使用引导程序的垂直主菜单的水平子菜单 [英] Horizontal submenu for a vertical main menu using bootstrap

问题描述

有任何方法使用引导创建垂直菜单结构的水平子菜单我没有看到任何子菜单垂直主菜单方向。菜单结构的示例结构与此

解决方案

下拉菜单使用嵌套的ul，绝对位置，我们将从 display：none;

这样：

/ p>

 < ul> 
< li>< a href =＃> ...< / a> 
< ul> 
< li>< a href =＃> ...< / a> 
< ul> ...<！ - 等等。 - > 
< / ul> 
< / li> 
< li> 
< / ul> 
  

您的例子的HTML

 < nav id =main-nav> 
< ul> 
< li>< a href =＃>首页< / a>< / li& 
< li>< a href =＃>关于< / a>< / li& 
< li>< a href =＃> Projects< / a> 
< ul> 
< li>< a href =＃>专案1< / a> 
< ul> 
< li>< a href =＃>专案2< / a> 
< ul> 
< li>< a href =＃>专案3< / a> 
< ul> 
< li>< a href =＃> Project 4< / a> 
< ul> 
< li>< a href =＃>专案5< / a>< / li> 
< / ul> 
< / li> 
< / ul> 
< / li> 
< / ul> 
< / li> 
< / ul> 
< / li> 
< / ul> 
< / li> 
< li>< a href =＃>联系人< / a>< / li> 
< / ul> 
< / nav> 
 

您的explame的SCSS：（我使用sass，因为它更容易读写，但我也将粘贴CSS

 ＃main-nav {
 ul {/ *这些行仅用于样式* / 
 margin：0; 
 padding：0; 
 border-right：1px solid black; 
 width：150px; 
 list-style-type：none; 
 li {
 position：relative; / *这在使用绝对位置时很重要。 * / 
&：hover {
&：before {/ * arrow styles * / 
 content：; 
 top：0; 
 bottom：0; 
 right：0; 
 border-top：5px solid transparent; 
 border-right：5px solid＃999; 
 border-bottom：5px solid transparent; 
 border-left：5px solid transparent; 
 position：absolute; 
 height：0px; 
 width：0px; 
 margin：auto; 
} 
> ul {
 display：block; / *重要：当鼠标悬停在父级li中时，将显示下拉菜单。 * / 
 
 / *&：before {//我不喜欢这个部分，但如果你启用它，它会让孩子ul看起来更接近你的设计。 
 content：; 
 position：absolute; 
 right：0; 
 top：-65px; 
 bottom：-35px; 
 width：1px; 
 background-color：#ccc; 
} * / 
} 
} //：hover 
 
 a {/ *这些行只用于样式* / 
 padding：7px 10px; 
 display：block; 
&：hover {
 color：red; 
} 
} // a 
 
> ul {/ *这是什么使魔法发生。 * / 
 display：none; / *下拉菜单总是隐藏的，除非当你将鼠标悬停在它的父项* / 
 position：absolute; / *这将定位ul * / 
 top：0; 
 left：100％; / *这将推送ul在需要它。 * / 
 border-right：1px solid #ccc; 
} 
} // li 
} // ul 
} 
  

一个实例： https://jsfiddle.net/xwazzo/3spxxk1z/

和承诺的CSS版本：

 ＃main-nav ul { 
 margin：0; 
 padding：0; 
 border-right：1px solid black; 
 width：150px; 
 list-style-type：none; 
} 
 
＃main-nav ul li {position：relative; } 
＃main-nav ul li：hover：before {
 content：; 
 top：0; 
 bottom：0; 
 right：0; 
 border-top：5px solid transparent; 
 border-right：5px solid＃999; 
 border-bottom：5px solid transparent; 
 border-left：5px solid transparent; 
 position：absolute; 
 height：0px; 
 width：0px; 
 margin：auto; 
} 
 
＃main-nav ul li：hover> ul {display：block; } 
＃main-nav ul li a {
 padding：7px 10px; 
 display：block; 
} 
 
＃main-nav ul li a：hover {color：red; } 
＃main-nav ul li> ul {
 display：none; 
 position：absolute; 
 top：0; 
 left：100％; 
 border-right：1px solid #ccc; 
} 
  

Is there any way to create a horizontal submenu for a vertical menu structure using bootstrap I haven't seen any submenus with vertical main menu orientation. A sample structure of the menu structure is similar to this

解决方案

Here we go!

Dropdown menus work with nested "ul", absolute positions and we will change from display: none; to display:block; when needed with hovers.

Something like this:

<ul>
  <li><a href="#">…</a>
    <ul>
      <li><a href="#">…</a>
        <ul> … <!-- And so on. -->
        </ul>
      </li>
  <li>
</ul>

Your example's html

<nav id="main-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Projects</a>
      <ul>
        <li><a href="#">Project 1</a>
          <ul>
            <li><a href="#">Project 2</a>
              <ul>
                <li><a href="#">Project 3</a>
                  <ul>
                    <li><a href="#">Project 4</a>
                      <ul>
                        <li><a href="#">Project 5</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Your explame's SCSS: (I used sass because it's easier to read and write but i will also paste CSS below)

#main-nav{
  ul{ /* Those lines are used only for styling */
    margin: 0;
    padding: 0;
    border-right: 1px solid black;
    width: 150px;
    list-style-type: none;
    li{
      position: relative; /* This is important when using absolute positions. */
      &:hover{
        &:before{ /* arrow styles */
              content: "";
              top: 0;
              bottom: 0;
              right: 0;
              border-top: 5px solid transparent;
              border-right: 5px solid #999;
              border-bottom: 5px solid transparent;
              border-left: 5px solid transparent;
              position: absolute;
              height: 0px;
              width: 0px;
              margin: auto;
        }
        > ul{
          display: block; /* IMPORTANT: This will show your dropdown menus when hover in the parent li. */

          /*&:before { // I don't like this part but if you enable it, it will make child ul's look closer to your design.
              content: "";
              position: absolute;
              right: 0;
              top: -65px;
              bottom: -35px;
              width: 1px;
              background-color: #ccc;
          }*/
        }
      }//:hover

      a{ /* Those lines are used only for styling */
        padding: 7px 10px;
        display: block;
        &:hover{
          color: red;
        }
      }// a

      > ul{ /* This is what makes the magic happen. */
        display: none; /* Dropdown menus are always hidden, except when you hover it's li parent */
        position: absolute; /* This will position the ul */
        top: 0;
        left: 100%; /* This will push the ul where it is needed. */
        border-right: 1px solid #ccc;
      }
    }// li
  }// ul
}

A live example: https://jsfiddle.net/xwazzo/3spxxk1z/

And the promised CSS version:

#main-nav ul {
  margin: 0;
  padding: 0;
  border-right: 1px solid black;
  width: 150px;
  list-style-type: none; 
}

#main-nav ul li { position: relative; }
#main-nav ul li:hover:before {
  content: "";
  top: 0;
  bottom: 0;
  right: 0;
  border-top: 5px solid transparent;
  border-right: 5px solid #999;
  border-bottom: 5px solid transparent;
  border-left: 5px solid transparent;
  position: absolute;
  height: 0px;
  width: 0px;
  margin: auto; 
}

#main-nav ul li:hover > ul { display: block; }
#main-nav ul li a {
  padding: 7px 10px;
  display: block; 
}

#main-nav ul li a:hover { color: red; }
#main-nav ul li > ul {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  border-right: 1px solid #ccc; 
}

这篇关于使用引导程序的垂直主菜单的水平子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！