Support » Themes and Templates » Header navigation foldout on click instead of on mouseover

  • I really dislike these dropdown menus that fold out as soon as the mouse moves over them and now I’ve got them myself. I use this in my header:

    <div id="navbar">
    <ul id="nav">
    <li><?php wp_list_bookmarks('title_li=&categorize=1') ?></li>

    This results in a menu headed by link-categories and on mouseover, the links appear in a dropdown. My stylesheet is this.

    Is there a way to make the dropdown only drop down on mouseclick rather than on mouseover?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The page is set up to use the :hover method in CSS, meaning that really you’d be looking at some re-coding and using JS to change it to onclick.

    Obviously it’s your website and you should make it how you want, but reasons not to do this include –

    • More often than not the top level of a menu will take you to a page, so haveing to click on it to view the menu would either mean that it’s a pain to work the site properly, or you lose some good functionality;
    • Search engines don’t like searching though JS (and can’t search through external JS files), so it’s good to avoid large chunks of JS;
    • It’ll take ages to do!

    Thanks for your reply. I hoped it would be something as simple as onclick. I’m not too good with PHP and CSS, so I’m not going to even try JS 🙂
    You have a point at your first dot, but since link categories are (as far as I know) no ‘permalinkable addresses’, I figured I might get away with that.

    Hm, and here’s the part that some browsers don’t seem to like:

    #nav li:hover ul {
    	left: auto;
    	display: block;

    IE6 and for example Opera Mini don’t give the dropdown. That’s another reason I’d like the menus to be ‘clickable’.

    But of course I’m not going to burden myself with a whole lot of coding for that sort of browsers.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Header navigation foldout on click instead of on mouseover’ is closed to new replies.