5

私は、まさにこのようなナビゲーション機能を備えた Web ページを作成しようとしています: http://www.rex-ny.com/リスト項目をクリックすると、その子項目が表示されて留まります。

ホバーでできますが、ホバーしていないときにとどまらせる方法がわかりません。

最も単純なことは最も難しいことのようです。

<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>

ありがとう

ここにjsfiddleがありますhttp://jsfiddle.net/phzuC/

4

2 に答える 2

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(); 
  });
});
于 2013-08-29T21:13:22.777 に答える