Question

您好我想知道当我点击下拉菜单时是否可以扩展引导导航栏？请

点击之前

：

+------------------------------------------------+
|    THE NAVBAR -               dropdown menu \/ |
+------------------------------------------------+

点击后

：

+------------------------------------------------+
|    THE NAVBAR -               dropdown menu \/ |
|                                     submenu    |
+------------------------------------------------+

Answer 1

This might be helpful as an example. It's relatively straight forward once you look into the CSS. There are also libraries like Yamm!3.

.navbar-default {
  border-bottom: 4px solid #f00 !important;
  background: #fff !important;
}
.navbar-default .navbar-nav > li > a,
.navbar-header a.navbar-brand {
  color: #f00;
}
.navbar-default .navbar-nav > .dropdown > a .caret {
  border-top-color: #f00;
  border-bottom-color: #f00;
}
.menu-large {
  position: static !important;
}
.megamenu {
  padding: 20px 0px;
  width: 100%;
}
.megamenu> li > ul {
  padding: 0;
  margin: 0;
}
.megamenu> li > ul > li {
  list-style: none;
}
.megamenu> li > ul > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.428571429;
  color: #f00;
  white-space: normal;
}
.megamenu> li ul > li > a:hover,
.megamenu> li ul > li > a:focus {
  text-decoration: none;
  color: #262626;
  background-color: #f5f5f5;
}
.megamenu.dropdown-header {
  color: #428bca;
  font-size: 18px;
}
.megamenu img {
  width: 100%;
  height: 150px;
  padding: 5px;
}
@media (max-width: 768px) {
  .megamenu {
    margin-left: 0;
    margin-right: 0;
  }
  .megamenu> li {
    margin-bottom: 30px;
  }
  .megamenu> li:last-child {
    margin-bottom: 0;
  }
  .megamenu.dropdown-header {
    padding: 3px 15px !important;
  }
  .navbar-nav .open .dropdown-menu .dropdown-header {
    color: #fff;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button> <a class="navbar-brand" href="#">Brand</a>

    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Home</a>

        </li>
        <li class="dropdown menu-large"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Stuff <span class="caret"></span></a>

          <ul class="dropdown-menu megamenu row ">
            <li>
              <div class="col-sm-6 col-md-3 ">
                <a href="# " class="img-responsive ">
                  <img src="http://placehold.it/300/f00/fff" />
                </a>

              </div>
              <div class="col-sm-6 col-md-3 ">
                <a href="# " class="img-responsive ">
                  <img src="http://placehold.it/300/f00/fff" />
                </a>

              </div>
              <div class="col-sm-6 col-md-3 ">
                <a href="# " class="img-responsive ">
                  <img src="http://placehold.it/300/f00/fff" />
                </a>

              </div>
              <div class="col-sm-6 col-md-3 ">
                <a href="# " class="img-responsive ">
                  <img src="http://placehold.it/300/f00/fff" />
                </a>

              </div>
            </li>
          </ul>
        </li>
        <li class="dropdown menu-large ">	<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Things <span class="caret"></span></a>

          <ul class="dropdown-menu megamenu row ">
            <li class="col-sm-3 ">
              <ul>
                <li class="dropdown-header ">Item I Main</li>
                <li><a href="# ">Item I Sub</a>

                </li>
                <li class="disabled "><a href="# ">Item II Sub</a>

                </li>
                <li><a href="# ">Item III Sub</a>

                </li>
                <li class="divider "></li>
                <li class="dropdown-header ">Item II Main</li>
                <li><a href="# ">Item I Sub</a>

                </li>
                <li><a href="# ">Item II Sub</a>

                </li>
                <li><a href="# ">Item III Sub</a>

                </li>
                <li><a href="# ">Item VI Sub</a>

                </li>
              </ul>
            </li>
            <li class="col-sm-3 ">
              <ul>
                <li class="dropdown-header ">Item III Main</li>
                <li><a href="# ">Item I Sub</a>

                </li>
                <li><a href="# ">Item II Sub</a>

                </li>
                <li><a href="# ">Item III Sub</a>

                </li>
                <li><a href="# ">Item VI Sub</a>

                </li>
                <li><a href="# ">Item V Sub</a>

                </li>
                <li class="divider "></li>
                <li class="dropdown-header ">Item IV Main</li>
                <li><a href="# ">Item I Sub</a>

                </li>
              </ul>
            </li>
            <li class="col-sm-3 ">
              <ul>
                <li class="dropdown-header ">Item V Main</li>
                <li><a href="# ">Item I Sub</a>

                </li>
                <li><a href="# ">Item II Sub</a>

                </li>
                <li><a href="# ">Item III Sub</a>

                </li>
                <li class="divider "></li>
                <li class="dropdown-header ">Item VI Main</li>
                <li><a href="# ">Item I Sub</a>

                </li>
                <li><a href="# ">Item II Sub</a>

                </li>
                <li><a href="# ">Item III Sub</a>

                </li>
              </ul>
            </li>
            <li class="col-sm-3 ">
              <ul>
                <li class="dropdown-header ">Item VII Main</li>
                <li><a href="# ">Item I Sub</a>

                </li>
                <li><a href="# ">Item II Sub</a>

                </li>
                <li><a href="# ">Item III Sub</a>

                </li>
                <li><a href="# ">Item VI Sub</a>

                </li>
                <li><a href="# ">Item V Sub</a>

                </li>
                <li><a href="# ">Item VI Sub</a>

                </li>
                <li><a href="# ">Item VII Sub</a>

                </li>
                <li><a href="# ">Item VIII Subp</a>

                </li>
                <li><a href="# ">Item VIIII Sub</a>

                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 2

Try using bootstrap collapse like this:

.my-menu{
  padding: 10px;
}

#collapse-menu{
  margin-bottom: 0; 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default my-nav-bar" role="navigation">
      <a class="navbar-brand" href="#">Logotipo</a>

        <div class="pull-right my-menu"> 
            <button href="#" class="dropdown-toggle btn btn btn-primary" data-toggle="collapse" data-target="#collapse-menu"> <!--add the atributes data-toggle="collapse" data-target="#collapse-menu" to the element that you want to be the collapser-->
                  Dropdown Menu <b class="caret"></b>
            </button>

            <ul id="collapse-menu" class="list-group collapse">  <!--add the class "collapse" to the element that you want collapse-->
                <li class="list-group-item"><a href="#">Acción #1</a></li>
                <li class="list-group-item"><a href="#">Acción #2</a></li>
            </ul>
        </div>
</nav>

单击下拉菜单时展开引导导航栏

2 个答案: