在悬停时打开Bootstrap的YAMM

时间:2014-03-17 15:48:08

标签: javascript twitter-bootstrap megamenu

我正在使用YAMM为Bootstrap创建一个巨型菜单,但我无法弄清楚如何在mouseover / hover上显示菜单。目前它只出现在点击。

github demo

jsFiddle

<div class="container">

  <div class="navbar yamm">
    <div class="navbar-inner">
      <div class="container">
        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target="#nav1">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="brand" href="#"> Yamm Megamenu </a>
        <div class="nav-collapse collapse" id="nav1">
          <ul class="nav">
            <!-- Classic list -->
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"> List <b class="caret"></b> </a>
              <ul class="dropdown-menu">
                <li>
                  <!-- Content container to add padding -->
                  <div class="yamm-content">
                    <ul class="span2 unstyled">
                      <li><p><strong>Section Title</strong></p></li>
                      <li>
                        List Item
                      </li>
                      <li>
                        List Item
                      </li>
                      <li>
                        List Item
                      </li>
                      <li>
                        List Item
                      </li>
                      <li>
                        List Item
                      </li>
                      <li>
                        List Item
                      </li>
                    </ul>
                    <ul class="span2 unstyled">
                      <li><p><strong>Links Title</strong></p></li>
                      <li>
                        <a href="#"> Link Item </a>
                      </li>
                      <li>
                        <a href="#"> Link Item </a>
                      </li>
                      <li>
                        <a href="#"> Link Item </a>
                      </li>
                      <li>
                        <a href="#"> Link Item </a>
                      </li>
                      <li>
                        <a href="#"> Link Item </a>
                      </li>
                      <li>
                        <a href="#"> Link Item </a>
                    </ul>
                    <ul class="span2 unstyled">
                      <li><p><strong>Section Title</strong></p></li>
                      <li>
                        List Item
                      </li>
                      <li>
                        List Item
                      </li>
                      <li>
                        List Item
                      </li>
                      <li>
                        List Item
                      </li>
                      <li>
                        List Item
                      </li>
                      <li>
                        List Item
                    </ul>
                    <ul class="span2 unstyled">
                      <li><p><strong>Section Title</strong></p></li>
                      <li>
                        List Item
                      </li>
                      <li>
                        List Item
                      </li>
                      <li>
                        <ul>
                          <li>
                            <a href="#"> Link Item </a>
                          </li>
                          <li>
                            <a href="#"> Link Item </a>
                          </li>
                          <li>
                            <a href="#"> Link Item </a>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </div>
                </li>
              </ul>
            </li>
            <!-- Accordion demo -->
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Accordion <b class="caret"></b> </a>
              <ul class="dropdown-menu">
                <li>
                  <div class="yamm-content">
                    <div class="row-fluid">
                      <div id="accordion2" class="accordion  span6">
                        <div class="accordion-group">
                          <div class="accordion-heading">
                            <a href="#collapseOne" data-parent="#accordion2" data-toggle="collapse" class="accordion-toggle collapsed"> Collapsible Group Item #1 </a>
                          </div>
                          <div class="accordion-body collapse" id="collapseOne" style="height: 0px;">
                            <div class="accordion-inner">
                              Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                            </div>
                          </div>
                        </div>
                        <div class="accordion-group">
                          <div class="accordion-heading">
                            <a href="#collapseTwo" data-parent="#accordion2" data-toggle="collapse" class="accordion-toggle"> Collapsible Group Item #2 </a>
                          </div>
                          <div class="accordion-body collapse" id="collapseTwo">
                            <div class="accordion-inner">
                              Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                            </div>
                          </div>
                        </div>
                        <div class="accordion-group">
                          <div class="accordion-heading">
                            <a href="#collapseThree" data-parent="#accordion2" data-toggle="collapse" class="accordion-toggle"> Collapsible Group Item #3 </a>
                          </div>
                          <div class="accordion-body collapse" id="collapseThree">
                            <div class="accordion-inner">
                              Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                            </div>
                          </div>
                        </div>
                      </div>
                      <div id="accordion3" class="accordion  span6">
                        <div class="accordion-group">
                          <div class="accordion-heading">
                            <a href="#collapseOne1" data-parent="#accordion3" data-toggle="collapse" class="accordion-toggle collapsed"> Collapsible Group Item #1 </a>
                          </div>
                          <div class="accordion-body collapse" id="collapseOne1" style="height: 0px;">
                            <div class="accordion-inner">
                              Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                            </div>
                          </div>
                        </div>
                        <div class="accordion-group">
                          <div class="accordion-heading">
                            <a href="#collapseTwo1" data-parent="#accordion3" data-toggle="collapse" class="accordion-toggle"> Collapsible Group Item #2 </a>
                          </div>
                          <div class="accordion-body collapse" id="collapseTwo1">
                            <div class="accordion-inner">
                              Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                            </div>
                          </div>
                        </div>
                        <div class="accordion-group">
                          <div class="accordion-heading">
                            <a href="#collapseThree1" data-parent="#accordion3" data-toggle="collapse" class="accordion-toggle"> Collapsible Group Item #3 </a>
                          </div>
                          <div class="accordion-body collapse" id="collapseThree1">
                            <div class="accordion-inner">
                              Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </li>
            <!-- Classic dropdown -->
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Classic <b class="caret"></b> </a><!-- Classic Dropdown -->
              <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                <li>
                  <a tabindex="-1" href="#"> Action </a>
                </li>
                <li>
                  <a tabindex="-1" href="#"> Another action </a>
                </li>
                <li>
                  <a tabindex="-1" href="#"> Something else here </a>
                </li>
                <li class="divider"></li>
                <li>
                  <a tabindex="-1" href="#"> Separated link </a>
                </li>
              </ul>
            </li>
            <!-- Pictures -->
            <li class="dropdown yamm-fullwidth">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Pictures <b class="caret"></b> </a>
              <ul class="dropdown-menu">
                <li>
                  <div class="yamm-content">
                    <!-- thumbnails needs a row-fluid to make span fluid -->
                    <div class="row-fluid">
                      <ul class="thumbnails">
                        <li class="span2">
                          <a class="thumbnail" href="#"> <img alt="150x190" data-src="holder.js/150x90"> </a>
                        </li>
                        <li class="span2">
                          <a class="thumbnail" href="#"> <img alt="150x190" data-src="holder.js/150x90"> </a>
                        </li>
                        <li class="span2">
                          <a class="thumbnail" href="#"> <img alt="150x190" data-src="holder.js/150x90"> </a>
                        </li>
                        <li class="span2">
                          <a class="thumbnail" href="#"> <img alt="150x190" data-src="holder.js/150x90"> </a>
                        </li>
                        <li class="span2">
                          <a class="thumbnail" href="#"> <img alt="150x190" data-src="holder.js/150x90"> </a>
                        </li>
                        <li class="span2">
                          <a class="thumbnail" href="#"> <img alt="150x190" data-src="holder.js/150x90"> </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </li>
              </ul>
            </li>

          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
  </div>

3 个答案:

答案 0 :(得分:13)

当特定display: block悬停时,您需要li

在您的css代码

中添加此内容
ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

答案 1 :(得分:1)

许多插件可用于悬停时的show bootstrap下拉列表。这里我使用了一个插件进行演示,请参考以下网址

[http://jsfiddle.net/azhagu/6vYr2/2/][1]

答案 2 :(得分:0)

{{1}}