Creating simple CSS multilevel menu

Question

I am trying to make a webpage with a navigation functionality EXACTLY like this one: http://www.rex-ny.com/ where you click a list item and its children items appear and stay.

I can do it with hover, but I can't figure out how to make it stay when not hovering.

It seems like the most simple thing is the most difficult to do.

<ul id="menu">
    <li><a href="#">Menu 1</a>
            <ul>
                <li><a href="#">Item A</a></li>
                <li><a href="#">Item B</a></li>
                <li><a href="#">Item C</a></li>
           </ul>
    </li>
    <li><a href="#">Menu 2</a>
            <ul>
                <li><a href="#">Item A</a></li>
                <li><a href="#">Item B</a></li>
                <li><a href="#">Item C</a></li>
           </ul>
    </li>
    <li><a href="#">Menu 3</a>
            <ul>
                <li><a href="#">Item A</a></li>
                <li><a href="#">Item B</a></li>
                <li><a href="#">Item C</a></li>
           </ul>
    </li>
</ul>

Thanks

Here is a jsfiddle http://jsfiddle.net/phzuC/

Can you pst a fiddle of your hovering example and then one of us will maybe make it clickable — Kevin Lynch
– Kevin Lynch, Commented Aug 29, 2013 at 20:57
@user2730793 That won't work. As soon as you let go of the mouse, the menu disappears. — ninty9notout
– ninty9notout, Commented Aug 29, 2013 at 21:13
@ninty9notout I know it won't work. I just don't know what else to do! — user2730793
– user2730793, Commented Aug 29, 2013 at 21:17

Kevin Lynch · Accepted Answer · 2013-08-29 22:08:31Z

4

Here is a CSS only solution as the OP requested, using tabindex

DEMO http://jsfiddle.net/kevinPHPkevin/phzuC/2/

#menu li > ul {
    display:none;
}

#menu li:focus > ul {
    display:block;
}
li {
    outline: 0; 
}

EDITED

Here is a jQuery solution should you ever need it. It keeps the submenus open and it's simple to implement. 11 lines of code.

DEMO http://jsfiddle.net/kevinPHPkevin/phzuC/5/

 $(document).ready(function() {
  $(".nav-top > li").click(function(e) {
  if($(this).find('ul').hasClass('expanded')) {
      $(this).find('ul').removeClass('expanded').hide();
  } else {
    $(this).find('ul').addClass('expanded').show();
  }
  });
  $('.nav-top a').click(function(e){
    e.preventDefault(); 
  });
});

edited Aug 29, 2013 at 22:08

answered Aug 29, 2013 at 21:13

Kevin Lynch

24.7k3 gold badges38 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user1320260 Over a year ago

This dude's a genius!

Itay Over a year ago

You should probably remove the href attribute from the "Menu *" buttons. Also this will stop working after clicking the inner links.

ninty9notout Over a year ago

This is a good solution. OP will have to compromise with it hiding as soon as the first-level link loses focus, but to re-utter @TheApptracker's words, that's genius!

user2730793 Over a year ago

It would be great if it didn't hide... but I will try this for now and maybe JS later on...

Kevin Lynch Over a year ago

thanks, I've added a simple quick jQuery solution if you ever need it. It may suit your needs better in the future.

dc5 · Accepted Answer · 2013-08-29 23:33:35Z

Here is another CSS only solution that uses either:

Checkboxes if you want the menus to toggle on click
radio buttons if you want the menus to auto close when another is selected

Reference:

Demo

Basic behavior CSS (the demo has more styling to remove the default list indentation/bullets):

.sideMenu input[type='radio'], 
.sideMenu input[type='checkbox'] {
    display: none;
}
.sideMenu input[type='radio'] + ul, 
.sideMenu input[type='checkbox'] + ul {
    position: relative;
    display: none;
}
.sideMenu input[type='radio']:checked + ul, 
.sideMenu input[type='checkbox']:checked + ul {
    display: block;
}

HTML (can be arbitrarily deep):

<nav class="sideMenu">
    <ul>
        <li>
            <label for="menu1">Menu 1</label>
            <input id="menu1" type="checkbox" name="menu1">
            <ul>
                <li><a href="#">Item A</a></li>
                <li><a href="#">Item B</a></li>
                <li><a href="#">Item C</a></li>
            </ul>
        </li>
        <!-- repeat -->
   </ul>
</nav>

Collectives™ on Stack Overflow

Creating simple CSS multilevel menu

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related