부트 스트랩의 메뉴 디자인 문제

부트 스트랩 3.2.0을 사용 중입니다. 설계 아주 좋은,하지만 지금은 문제에 직면하고하면 다음과 같은 메뉴를 만들 : plunker에서부트 스트랩의 메뉴 디자인 문제

enter image description here

메뉴를 설계하려면, 내가 작성한 코드와 여기 내 예제 코드입니다 :

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
     <div class="container-fluid"> 
      <div class="row"> 
       <ul class="topmenu"> 
        <li class="topmenuItem"><a>HOME</a></li> 
        <li class="topmenuItem"><a>HOME</a></li> 
        <li class="topmenuItem"><a>HOME</a></li> 
        <li class="topmenuItem"><a>HOME</a></li> 
        <li class="topmenuItem"><a>HOME</a></li> 
       </ul> 
       <ul class="submenu"> 
        <li class="submenuItem"> 
         <ul class="submenuItemGroup"> 
          <li class="submenuItemGroupItem"><a>SUBMENU</a></li> 
          <li class="submenuItemGroupItem"><a>SUBMENU</a></li> 
         </ul> 
        </li> 
        <li class="submenuItem"> 
         <ul class="submenuItemGroup"> 
          <li class="submenuItemGroupItem"><a>SUBMENU</a></li> 
          <li class="submenuItemGroupItem"><a>SUBMENU</a></li> 
         </ul> 
        </li> 
        <li class="submenuItem"> 
         <ul class="submenuItemGroup"> 
          <li class="submenuItemGroupItem"><a>SUBMENU</a></li> 
          <li class="submenuItemGroupItem"><a>SUBMENU</a></li> 
         </ul> 
        </li> 
        <li class="submenuItem"> 
         <ul class="submenuItemGroup"> 
          <li class="submenuItemGroupItem"><a>SUBMENU</a></li> 
          <li class="submenuItemGroupItem"><a>SUBMENU</a></li> 
         </ul> 
        </li> 
        <li class="submenuItem"> 
         <ul class="submenuItemGroup"> 
          <li class="submenuItemGroupItem"><a>SUBMENU</a></li> 
          <li class="submenuItemGroupItem"><a>SUBMENU</a></li> 
         </ul> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </nav>

정확한 이미지 메뉴를 관리 할 수 없습니다. 어떻게 설계 할 수 있습니까? 감사.

출처

2014-09-03 Shohel

JSFIDDLE : 여기에 코드가 있습니다.

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
<div class="container-fluid"> 
    <ul class="nav navbar-nav navbar-left"> 
    <li><a href="#">Link</a></li> 

    <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home1 <b class="caret"></b></a> 
     <ul class="dropdown-menu"> 

     <li class="dropdown-submenu"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home2</a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 

      <li> 
       <li class="dropdown-submenu"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home2</a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li class="divider"></li> 
        <li><a href="#">Separated link</a></li> 
       </ul> 
       </li> 

      </li> 
      </ul> 
     </li> 

     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
     <li class="divider"></li> 
     <li><a href="#">Separated link</a></li> 
     </ul> 
    </li> 

    <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home2 <b class="caret"></b></a> 
     <ul class="dropdown-menu"> 
     <li><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
     <li class="divider"></li> 
     <li><a href="#">Separated link</a></li> 
     </ul> 
    </li> 

    <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home3 <b class="caret"></b></a> 
     <ul class="dropdown-menu"> 
     <li><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
     <li class="divider"></li> 
     <li><a href="#">Separated link...</a></li> 
     </ul> 
    </li> 

    </ul> 
</div> 
</nav>

메뉴에 둘 이상의 수준을 지정하려면이 코드가 필요합니다. 그렇지 않으면 아래 코드를 추가하지 마십시오. 답변

<style> 

.dropdown-submenu { 
    position: relative; 
} 

.dropdown-submenu>.dropdown-menu { 
    top: 0; 
    left: 100%; 
    margin-top: -6px; 
    margin-left: -1px; 
    -webkit-border-radius: 0 6px 6px 6px; 
    -moz-border-radius: 0 6px 6px; 
    border-radius: 0 6px 6px 6px; 
} 

.dropdown-submenu:hover>.dropdown-menu { 
    display: block; 
} 

.dropdown-submenu>a:after { 
    display: block; 
    content: " "; 
    float: right; 
    width: 0; 
    height: 0; 
    border-color: transparent; 
    border-style: solid; 
    border-width: 5px 0 5px 5px; 
    border-left-color: #ccc; 
    margin-top: 5px; 
    margin-right: -10px; 
} 

.dropdown-submenu:hover>a:after { 
    border-left-color: #fff; 
} 

.dropdown-submenu.pull-left { 
    float: none; 
} 

.dropdown-submenu.pull-left>.dropdown-menu { 
    left: -100%; 
    margin-left: 10px; 
    -webkit-border-radius: 6px 0 6px 6px; 
    -moz-border-radius: 6px 0 6px 6px; 
    border-radius: 6px 0 6px 6px; 
} 

</style>

해당 메뉴

<nav class="navbar navbar-fixed-top" role="navigation"> 
<div class="container-fluid" > 
<div class = "row" style = "background-color:orange"> 
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
<ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> 
     <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
</div> 

<div class = "row" style = "background-color:green"> 
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> 
     <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
</div> 

<div class = "row" style = "background-color:green"> 
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> 
     <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
</div> 


</div> 
</nav>

출처

2014-09-07 01:23:58 kelgwiin

안녕 @kelgwiin의 또 다른 방법, 감사합니다, 당신은 내 plunker를 참조 않았다. 최고 또는 하위의 2 단계 메뉴가 있습니다. 드롭 다운 메뉴는 내 plunker 언급 한 부분에서 응답 할 수 있습니다. – Shohel

Hellow @Shoel, 나는 당신의 플 런커를 보았고 사용하는 구문이 옳지 않습니다. 각 라벨의 코 런트 클래스를 사용해야합니다. 그렇지 않으면 제대로 작동하지 않습니다. 레이블'li'에는'dropdown' 클래스가 있어야하고 내부리스트'ul'에는'dropdown-menu' 클래스가 있어야합니다. 하위 메뉴를 원하면'dropdown-submenu' 클래스에 작성해야합니다. 제대로 작동하려면 구문을 정확히 따라야합니다. 부트 스트랩 [부트 스트랩 - Navbar] 공식 매뉴얼 참조 (http://getbootstrap.com/components/#navbar) – kelgwiin

안녕하세요 @kelgwiin, 네 말이 맞아. 하지만 부트 스트랩이 내 메뉴 구조를 지원하지 않기 때문에 클래스 topmenu, topmenuItem 등을 만들어야합니다. 내 정확한 메뉴를 만들고 싶니? 감사합니다. – Shohel

부트 스트랩의 메뉴 디자인 문제

답변

관련 문제