bootstrap 3 响应式巨型菜单

Posted 2023-03-06

【中文标题】bootstrap 3 响应式巨型菜单

【英文标题】：bootstrap 3 responsive mega menu

【发布时间】：2013-11-11 09:41:57

【问题描述】：

我尝试了很多，但我无法解决这个问题，

菜单无法响应的问题。

我试试这样的响应式菜单Demo

想要这样

HTML

<div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li id="fat-menu" class="dropdown pink"> <a href="#" id="drop3" role="button" class="dropdown-toggle " data-toggle="dropdown">Services </a>
            <ul class="dropdown-menu">
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
              <li role="presentation" class="divider"></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
            </ul>
          </li>
          <li id="fat-menu" class="dropdown rama"> <a href="#" id="drop3" role="button" class="dropdown-toggle " data-toggle="dropdown">Products </a>
            <div class="dropdown-menu" style="left:-250px !important; width:800px; " role="menu" aria-labelledby="drop3">
              <div class="nav-product"  role="main">
                <div class="col-lg-4">
                  <div class="media"> <img src="img/lms-nav-icon.png"  class="pull-left"/>
                    <div class="media-body">
                      <h4 class="pink">Labour Manage. System</h4>
                      <p>There Managing Contractor's Labours / Workers at the entry points with rich GUI... <a href="#">Read More</a></p>
                    </div>
                  </div>
                  <div class="media"> <img src="img/crm-nav-icon.png"  class="pull-left"/>
                    <div class="media-body">
                      <h4 class="rama" >eXiger CRM System</h4>
                      <p>awidely implemented strategy for managing a company's interactions with customers....<a href="#">Read More</a></p>
                    </div>
                  </div>
                  <div class="media"> <img src="img/payroll-nav-icon.png"  class="pull-left"/>
                    <div class="media-body">
                      <h4 class="blue">Payroll Management</h4>
                      <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="media"> <img src="img/lms-nav-icon.png"  class="pull-left"/>
                    <div class="media-body">
                      <h4>Subheading</h4>
                      <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
                    </div>
                  </div>
                  <div class="media"> <img src="img/lms-nav-icon.png"  class="pull-left"/>
                    <div class="media-body">
                      <h4>Subheading</h4>
                      <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
                    </div>
                  </div>
                  <div class="media"> <img src="img/lms-nav-icon.png"  class="pull-left"/>
                    <div class="media-body">
                      <h4>Subheading</h4>
                      <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4 ">
                  <div class="media"> <img src="img/lms-nav-icon.png"  class="pull-left"/>
                    <div class="media-body">
                      <h4>Subheading</h4>
                      <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
                    </div>
                  </div>
                  <div class="media"> <img src="img/lms-nav-icon.png"  class="pull-left"/>
                    <div class="media-body">
                      <h4>Subheading</h4>
                      <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
                    </div>
                  </div>
                  <div class="media"> <img src="img/lms-nav-icon.png"  class="pull-left"/>
                    <div class="media-body">
                      <h4>Subheading</h4>
                      <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li id="fat-menu" class="dropdown green"> <a href="#" id="drop3" role="button" class="dropdown-toggle " data-toggle="dropdown">Technology </a>
            <ul class="dropdown-menu">
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
              <li role="presentation" class="divider"></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
            </ul>
          </li>
          <li id="fat-menu" class="dropdown purple"> <a href="#" id="drop3" role="button" class="dropdown-toggle " data-toggle="dropdown">Marketing </a>
            <ul class="dropdown-menu">
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
              <li role="presentation" class="divider"></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
            </ul>
          </li>
          <li id="fat-menu" class="dropdown orange"> <a href="#" id="drop3" role="button" class="dropdown-toggle " data-toggle="dropdown">About Us </a>
            <ul class="dropdown-menu">
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
              <li role="presentation" class="divider"></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
            </ul>
          </li>
          <li class="pinkdark"><a href="#" >Request a Quote</a></li>
        </ul>
      </div>

【问题讨论】：

检查这个Fiddle 我使用了col-md-4 和img 类img-circle。

【参考方案1】：

如果不晚，我已经为 bootstrap 3 http://geedmo.github.io/yamm3/ 制作了这个 megamenu，也许它可以帮助你理解这个想法。

【讨论】：

嘿@geedmo 我刚刚偶然发现了你的大型菜单，首先在这方面做得很好！它对我很有用，所以我很感激！但我想知道如何将它从单击更改为悬停？这可能与您编码的方式有关吗？干杯！

与 ".dropdown.open" 的工作方式相同，此规则在悬停时打开菜单 .dropdown:hover>.dropdown-menu display: block;

@geedmo... yamm 的出色工作。我只是好奇，当您将浏览器缩小到大约 300 像素左右时，我注意到三明治图标超出了它的容器。浏览器窗口的缩小范围也有限制。经过一定的宽度，它就变成了固体。你在哪里设置这些 val？或者你如何确保三明治保持在预期的边界内？