Question

我是bootstrap的新手，我无法弄清楚如何将我的多级水平菜单折叠到标准的垂直引导菜单。现在正在搜索和尝试过去几个小时，只得到一些奇怪的菜单＆＃34; art＆＃34;错位。

这是我的菜单HTML

<ul id="nav">
   <li value="1"><a href="#">Home</a></li>
   <li value="2">
      <a href="#">Portfolio</a>
      <ul class='subs'>
         <li value="5"><a href="#">Web Design</a></li>
         <li value="6"><a href="#">Graphic Design</a></li>
         <li value="7"><a href="#">Logo Design</a></li>
         <li value="8"><a href="#">Blog Design</a></li>
         <li value="17"><a href="#">Apple</a></li>
         <li value="18"><a href="#">Banana</a></li>
      </ul>
   </li>
   <li value="3">
      <a href="#">Projects</a>
      <ul class='subs'>
         <li value="9"><a href="#">Project1</a></li>
         <li value="10"><a href="#">Project2</a></li>
         <li value="11"><a href="#">Project3</a></li>
         <li value="12"><a href="#">Project4</a></li>
      </ul>
   </li>
   <li value="4">
      <a href="#">Contact</a>
      <ul class='subs'>
         <li value="13"><a href="#">Support</a></li>
         <li value="14"><a href="#">Quote</a></li>
         <li value="15"><a href="#">General Inquiry</a></li>
      </ul>
   </li>
   <li value="16"><a href="#">kaas</a></li>
</ul>

我不认为它需要，但这是我的CSS

#nav span {
    display: none;
}

#nav, #nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    z-index: 99;
}

#nav {
    color-stop(0, #E3E3E3),
    color-stop(0.5, white)

    background-image: -o-linear-gradient(bottom, #E3E3E3 0%, white 100%);
    background-image: -moz-linear-gradient(bottom, #E3E3E3 0%, white 100%);
    background-image: -webkit-linear-gradient(bottom, #E3E3E3 0%, white 100%);
    background-image: -ms-linear-gradient(bottom, #E3E3E3 0%, white 100%);
    background-image: linear-gradient(to bottom, #E3E3E3 0%, white 100%);

    border-bottom: 5px solid #333333;
    float: left;
    position: relative;
    width: 100%;
}

#nav ul.subs {
    color-stop(0, #E3E3E3),
    color-stop(0.5, white)

    background-color: -o-linear-gradient(bottom, white 0%, #E3E3E3 100%);
    background-image: -moz-linear-gradient(bottom, white 0%, #E3E3E3 100%);
    background-image: -webkit-linear-gradient(bottom, white 0%, #E3E3E3 100%);
    background-image: -ms-linear-gradient(bottom, white 0%, #E3E3E3 100%);
    background-image: linear-gradient(to bottom, white 0%, #E3E3E3 100%);

    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    color: #333333;
    display: none;
    left: 0;
    padding: 1.5%;
    position: absolute;
    top: 54px;
    width: 96%;
}

#nav > li {
    border-bottom: 5px solid transparent;
    float: left;
    margin-bottom: -5px;
    text-align: left;
    -moz-transition: all 300ms ease-in-out 0s;
    -ms-transition: all 300ms ease-in-out 0s;
    -o-transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    transition: all 300ms ease-in-out 0s;
}

#nav li a {
    display: block;
    text-decoration: none;
    -moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    white-space: normal;
}

#nav > li > a {
    color: #333333;
    display: block;
    font-size: 1.3em;
    line-height: 49px;
    padding: 0 15px;
    text-transform: uppercase;
}

#nav > li:hover > a, #nav > a:hover {
    background-color: #F55856;
    color: #FFFFFF;
}

/* submenu */
#nav li:hover ul.subs {
    display: block;
}

#nav ul li a {
    color: #777777;
    margin-left: 5%;
    padding: 0;
}

#nav ul li a:hover{
    color: #F55856;
    padding-left: 15px;

    -moz-transition: padding 300ms ease-out 0s;
    -ms-transition: padding 300ms ease-out 0s;
    -o-transition: padding 300ms ease-out 0s;
    -webkit-transition: padding 300ms ease-out 0s;
    transition: padding 300ms ease-out 0s;
}

我不是要求那些只是编辑我的代码以便它可行的人，尽管我会介意并且非常感激它。但我想学习如教程，解释，链接。我尝试了几个教程和其他＆＃34;有用的＆＃34;信息，但你可以看到我没有得到任何进一步。

Answer 1

我相信你正在寻找类似的东西：

<div class="btn-group-vertical">
    <button type="button" class="btn btn-default dd"><a href="#">Home</a>
    </button>
    <div class="btn-group">
        <button type="button" class="btn btn-default btn-block dropdown-toggle" data-toggle="dropdown">Portfolio <span class="caret"></span>

        </button>
        <ul class="dropdown-menu" role="menu">
            <li value="5"><a href="#">Web Design</a>
            </li>
            <li value="6"><a href="#">Graphic Design</a>
            </li>
            <li value="7"><a href="#">Logo Design</a>
            </li>
            <li value="8"><a href="#">Blog Design</a>
            </li>
            <li value="17"><a href="#">Apple</a>
            </li>
            <li value="18"><a href="#">Banana</a>
            </li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default btn-block dropdown-toggle" data-toggle="dropdown">Projects <span class="caret"></span>

        </button>
        <ul class="dropdown-menu" role="menu">
            <li value="9"><a href="#">Project1</a>
            </li>
            <li value="10"><a href="#">Project2</a>
            </li>
            <li value="11"><a href="#">Project3</a>
            </li>
            <li value="12"><a href="#">Project4</a>
            </li>
        </ul>
    </div>
    <div class="btn-group b">
        <button type="button" class="btn btn-default dropdown-toggle aa" data-toggle="dropdown">Contacts <span class="caret"></span>

        </button>
        <ul class="dropdown-menu" role="menu">
            <li value="13"><a href="#">Support</a>
            </li>
            <li value="14"><a href="#">Quote</a>
            </li>
            <li value="15"><a href="#">General Inquiry</a>
            </li>
        </ul>
    </div>
    <button type="button" class="btn btn-default"><a href="#">kaas</a>
    </button>
</div>

我真的重新定义了整套代码以符合BootStrap标准，我将其网站用作guide。您可能希望根据需要更改任何HTML / CSS，但实际上，这是您的网站，但有垂直菜单栏。

<强> DEMO JSFiddle

Bootstrap折叠菜单到垂直

1 个答案: