ansaurus

Question

html menu lists

Answer 1

+1 A:

Yes - this can either be done using JavaScript or CSS. There is a good article on how to do this in CSS here:

http://www.howtocreate.co.uk/tutorials/testMenu.html

Update: This guide appears to be much better in fact:

http://www.seoconsultants.com/css/menus/tutorial/

Finding good information on CSS only menu's is more difficult than I had thought...

Kragen 2010-02-03 08:42:08

The CSS approach is not recommended. JavaScript allows for much more accessible solutions.

David Dorward 2010-02-03 08:49:36

@David Well *I'd* recommend the CSS approach - partly for accesibility, and party because I've seen some god-awful JavaScript menu implementations!

Kragen 2010-02-03 08:56:39

Accessibility is why the CSS approach isn't a good one. Keyboard access (and breath switch access, etc, etc)? No. Some degree of fuzz so you don't need to have high precision mouse skills (arthritis is not uncommon) to avoid the menu vanishing as you try to track to the menu item you want? No. Most JavaScript implementations fail to implement these features, but CSS implementations **can't**.

David Dorward 2010-02-03 09:21:17

@David Hmm, I imagine Keyboard access can probably still be added to a CSS implementation using JavaScript, and could a fuzz factor not be added simply by making the actual size of the elements larger than they appear?

Kragen 2010-02-03 09:26:47

That style of fuzz factor would be very tricky to pull off. Keyboard access is a no-no. You can't express "Make element visible if any of its descendents has the focus" in CSS.

David Dorward 2010-02-03 09:52:30

@David Ok, having done a quick think about how to add Keyboard shortcuts to a CSS menu I now believe you! :-) - Getting the menu to show easily enough, but getting it to hide again meant hooking into the mouseover event of every menu item - essentially re-implementing the CSS bit. I'd still do it in the style of a CSS menu however.

Kragen 2010-02-03 10:05:57

Answer 2

A:

With CSS or with JS?

Here with CSS:

<html>
  <head>
    <style type="text/css">
      li:hover > ul {
        display:block;
      }
      .submenu {
        display:none;
      }
    </style>
  </head>
  <body>
    <ul class="menu">
      <li>
        <a href="">Header</a>
        <ul class="submenu">
          <li><img src=""/> Link 1</li>
          <li><img src=""/> Link 2</li>
        </ul>
      </li>
    </ul>
  </body>
</html>

But this probably does not work in IE6 and lower (thanks Andy E) as the don't allow the :hover pseudo selector with other selectors than a.

There are better approaches but as your question is not very specific, this is my solution.

Edit: This would be

li a:hover + ul {
    display:block;
}

Reference.

Be aware that this might not work with every browser. But you'll find plenty information which CSS elements are supported by which browser in the internet.

Felix Kling 2010-02-03 08:44:32

Even js is fine................

Hulk 2010-02-03 08:47:12

IE6 and lower, to be more specific. The immediate child selector, `>`, is also unsupported by IE6.

Andy E 2010-02-03 08:47:41

Can u give me the same code mouse over on a hyperlink

Hulk 2010-02-03 08:49:27

Sorry but does it hold good for the below code also<html><head><style type="text/css"> a:hover + #ab { display:block; } .submenu { display:none; }</style></head><body><div id="ab" class="ab"></div> <a href="">Header</a> <div class="submenu"> <img src=""/> Link 1</img> <img src=""/> Link 2</img> </div> </body> </html>

Hulk 2010-02-03 08:58:28

Look at the last link in my post. This helps you to understand how to use the CSS selectors. You are not using it correctly.

Felix Kling 2010-02-03 09:19:13

Answer 3

A:

You could try to use combination of jQuery and CSS.

HTML:

<ul class="menu">
    <li>
        <a href="" class="submenuLink">Header</a>
        <ul class="submenu">
            <li><img src=""/> Link 1</li>
            <li><img src=""/> Link 2</li>
        </ul>
    </li>
</ul>

CSS:

ul.submenu
{
    display: none;
}

jQuery:

$(document).ready(function() {
    $(".submenuLink").mouseover(function() {
        $(".submenu").css("display", "inline");
    });   
});

You'll just have to bind mouseoout to hide it again when you move your mouse away from "Header".

Ondrej Slinták 2010-02-03 09:02:58

Thanks..............................

Hulk 2010-02-03 09:19:31

ansaurus

tags:

views:

answers:

html menu lists

related questions