부트 스트랩 드롭 다운 메뉴

나는 많은 exmaples/questions와 같은 코드가 있다는 것을 알고 있습니다. 나는 많은 것을 검색하고 많은 코드를 복사/붙여 넣으려고했다. 아무것도 효과가 없습니다. 중복되거나 무언가가 있으면 미안합니다.부트 스트랩 드롭 다운 메뉴

어쨌든, 고정 된 navbar에 부트 스트랩 드롭 다운 메뉴를 추가하려고합니다. 드롭 다운이 onclick으로 활성화되어 있으므로 캐럿을 제거하지 마십시오.

<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="http://getbootstrap.com/examples/navbar-fixed-top/#">SDK Tests Status</a> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <span class="glyphicon glyphicon-folder-open room-icn"></span> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Rooms</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 class="dropdown-header">Nav header</li> 
      <li><a href="#">Separated link</a></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 


    </div><!--/.nav-collapse --> 
    </div> 
</div>

사람 : 여기

내 코드 내 (의 일부)입니까? 감사 !

출처

2014-02-19 FunJoy

나는 이것을받을 자격이 없습니다. Ryan Olson은 here 자습서를 가지고 있습니다. .css 파일이나 머리에 CSS를 추가하십시오. </body> 앞에 페이지 맨 아래에 JavaScript를 추가하십시오. 페이지 본문에 HTML을 넣으십시오.

CSS :

.navbar-nav .dropdown:hover > .dropdown-menu { 
    display: block; 
} 
.navbar-nav .dropdown:hover > a[data-toggle=dropdown] + .dropdown-menu { 
    display: none; 
} 
.navbar-nav .dropdown.open > a[data-toggle=dropdown] + .dropdown-menu { 
    display: block; 
}

자바 스크립트 :

<script type="text/javascript"> 
$(function() { 
    var $win = $(window); 
    $win.resize(function() { 
     if ($win.width() > 768) 
      $(".navbar-nav > .dropdown > a").attr("data-toggle", ""); 
     else 
      $(".navbar-nav > .dropdown > a").attr("data-toggle", "dropdown"); 
    }).resize(); 
    $(".dropdown-menu").find("input, button").each(function() { 
     $(this).click(function (e) { 
      e.stopPropagation(); 
     }); 
    }); 
}); 
</script>

HTML :

<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="http://getbootstrap.com/examples/navbar-fixed-top/#">SDK Tests Status</a> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-folder-open room-icn"></span> Rooms</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 class="dropdown-header">Nav header</li> 
      <li><a href="#">Separated link</a></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</div>

전체 페이지 :

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     <meta charset="utf-8"> 
     <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
     <!--[if lt IE 9]> 
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> 
     <![endif]--> 
     <style type="text/css"> 
      .navbar-nav .dropdown:hover > .dropdown-menu { 
       display: block; 
      } 
      .navbar-nav .dropdown:hover > a[data-toggle=dropdown] + .dropdown-menu { 
       display: none; 
      } 
      .navbar-nav .dropdown.open > a[data-toggle=dropdown] + .dropdown-menu { 
       display: block; 
      } 
     </style>  
    </head> 

    <body> 

    <div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
      <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="http://getbootstrap.com/examples/navbar-fixed-top/#">SDK Tests Status</a> 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-folder-open room-icn"></span> Rooms</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 class="dropdown-header">Nav header</li> 
        <li><a href="#">Separated link</a></li> 
        <li><a href="#">One more separated link</a></li> 
        </ul> 
       </li> 
       </ul> 
      </div><!--/.nav-collapse --> 
      </div> 
     </div> 

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 

    <script type="text/javascript"> 
     $(function() { 
      var $win = $(window); 
      $win.resize(function() { 
       if ($win.width() > 768) 
        $(".navbar-nav > .dropdown > a").attr("data-toggle", ""); 
       else 
        $(".navbar-nav > .dropdown > a").attr("data-toggle", "dropdown"); 
      }).resize(); 
      $(".dropdown-menu").find("input, button").each(function() { 
       $(this).click(function (e) { 
        e.stopPropagation(); 
       }); 
      }); 
     }); 
    </script> 
    </body> 
</html>

Here is a bootply of it.

출처

2014-02-19 18:39:53 theRyanMark

Works! 감사 ! – FunJoy

당신은 오신 것을 환영합니다. 그것은 어리석은 옵션이 내장되어 있지 않습니다. – theRyanMark

더 이상 동의하지 않음 – FunJoy

부트 스트랩 드롭 다운 메뉴

답변

관련 문제