2017-04-05 144 views
-1

我正在創建一個基於引導程序的網站,其垂直菜單可以通過按鈕和頂部欄進行切換,當屏幕尺寸縮小時可以摺疊。我設法添加一個註銷鏈接,但是當屏幕大小減少時,註銷不會出現在頂部導航欄摺疊菜單中。我不確定我要出錯的地方頂部導航欄崩潰不起作用

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <title>staff_admin</title> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link href="css/simple-sidebar.css" rel="stylesheet"> 
    <link href="font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet"> 

</head> 

<body> 

    <nav class="navbar navbar-default no-margin"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
       <div class="navbar-header fixed-brand"> 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" id="menu-toggle"> 
         <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span> 
        </button> 
         <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 


       </div><!-- navbar-header--> 

       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
          <ul class="nav navbar-nav"> 
           <li class="active" ><button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2"> <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span></button></li> 
          </ul> 
          <div id="navbarCollapse" class="collapse navbar-collapse"> 
          <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#">Profile</a></li> 
       <li><a href="#">Messages</a></li> 
      </ul> 

          <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#">Login</a></li> 
      </ul></div> 
       </div><!-- bs-example-navbar-collapse-1 --> 
    </nav> 
    <div id="wrapper"> 
     <!-- Sidebar --> 
     <div id="sidebar-wrapper"> 
      <ul class="sidebar-nav nav-pills nav-stacked" id="menu"> 

       <li class="active"> 
        <a href="admission_dec.html" target="admission"><span class="fa-stack fa-lg pull-left"><i class="fa fa-dashboard fa-stack-1x "></i></span>Dashboard</a> 
       </li> 

       <li> 
        <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-dashboard fa-stack-1x "></i></span>Administration</a> 
         <ul class="nav-pills nav-stacked" style="list-style-type:none;"> 
         <li><a href="admission_tte.html" target="admission">Enrol</a></li> 
         <li><a href="usermgmt.html" target="admission">SysAdmin</a></li> 
        </ul> 
       </li> 
       <li> 
        <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span>Student Management</a> 
        <ul class="nav-pills nav-stacked" style="list-style-type:none;"> 
         <li><a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span>Assessment</a></li> 
         <li><a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span>Vehicle Management</a></li> 

        </ul> 
       </li> 
       <li> 
        <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-cloud-download fa-stack-1x "></i></span>Overview</a> 
       </li> 
       <li> 
        <a href="#"> <span class="fa-stack fa-lg pull-left"><i class="fa fa-cart-plus fa-stack-1x "></i></span>Events</a> 
       </li> 
       <li> 
        <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-youtube-play fa-stack-1x "></i></span>About</a> 
       </li> 
       <li> 
        <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-wrench fa-stack-1x "></i></span>Services</a> 
       </li> 
       <li> 
        <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a> 
       </li> 
      </ul> 
     </div><!-- /#sidebar-wrapper --> 
     <!-- Page Content --> 
     <div id="page-content-wrapper"> 
      <div class="container-fluid xyz"> 
      <div class="embed-responsive embed-responsive-16by9" > 
    <iframe name="admission" class="embed-responsive-item" style="margin-left:0px; background-color: white;max-height:1500px" ></iframe> 
    </div> 

      </div> 
     </div> 
     <!-- /#page-content-wrapper --> 

    </div> 
    <!-- /#wrapper --> 
    <!-- jQuery --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="js/sidebar_menu.js"></script> 
</body> 

</html> 



$("#menu-toggle").click(function(e) { 
     e.preventDefault(); 
     $("#wrapper").toggleClass("toggled"); 
    }); 
    $("#menu-toggle-2").click(function(e) { 
     e.preventDefault(); 
     $("#wrapper").toggleClass("toggled-2"); 
     $('#menu ul').hide(); 
    }); 

    function initMenu() { 
     $('#menu ul').hide(); 
     $('#menu ul').children('.current').parent().show(); 
     //$('#menu ul:first').show(); 
     $('#menu li a').click(
     function() { 
      var checkElement = $(this).next(); 
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) { 
      return false; 
      } 
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { 
      $('#menu ul:visible').slideUp('normal'); 
      checkElement.slideDown('normal'); 
      return false; 
      } 
      } 
     ); 
     } 
    $(document).ready(function() {initMenu();}); 




#wrapper { 
    padding-left: 0; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
    overflow: hidden; 
} 

#wrapper.toggled { 
    padding-left: 250px; 
    overflow: hidden; 
} 

#sidebar-wrapper { 
    z-index: 1000; 
    position: absolute; 
    left: 235px; 
    width: 0; 
    height: 100%; 
    margin-left: -250px; 
    overflow-y: auto; 
    background: #000; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 
#wrapper.toggled #sidebar-wrapper { 
    width: 250px; 
} 

#page-content-wrapper { 
    position: absolute; 
    padding: -20px; 
    width: 100%; 
    overflow-x: hidden; 
} 
.xyz{ 
    min-width: 360px; 
} 
#wrapper.toggled #page-content-wrapper { 
    position: relative; 
    margin-right: 0px; 
} 
.fixed-brand{ 
    width: auto; 
} 
/* Sidebar Styles */ 

.sidebar-nav { 
    position: absolute; 
    top: 0; 
    width: 250px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    margin-top: 2px; 
} 

.sidebar-nav li { 
    text-indent: 15px; 
    line-height: 40px; 
} 

.sidebar-nav li a { 
    display: block; 
    text-decoration: none; 
    color: #999999; 
} 

.sidebar-nav li a:hover { 
    text-decoration: none; 
    color: #fff; 
    background: rgba(255,255,255,0.2); 
    border-left: red 2px solid; 
} 

.sidebar-nav li a:active, 
.sidebar-nav li a:focus { 
    text-decoration: none; 
} 

.sidebar-nav > .sidebar-brand { 
    height: 65px; 
    font-size: 18px; 
    line-height: 60px; 
} 

.sidebar-nav > .sidebar-brand a { 
    color: #999999; 
} 

.sidebar-nav > .sidebar-brand a:hover { 
    color: #fff; 
    background: none; 
} 
.no-margin{ 
    margin:0; 
} 

@media(min-width:768px) { 
    #wrapper { 
     padding-left: 250px; 
    } 
    .fixed-brand{ 
     width: 250px; 
    } 
    #wrapper.toggled { 
     padding-left: 0; 
    } 

    #sidebar-wrapper { 
     width: 250px; 
    } 

    #wrapper.toggled #sidebar-wrapper { 
     width: 250px; 
    } 
    #wrapper.toggled-2 #sidebar-wrapper { 
     width: 50px; 
    } 
    #wrapper.toggled-2 #sidebar-wrapper:hover { 
     width: 250px; 
    } 


    #page-content-wrapper { 
     padding: -20px; 
     position: relative; 
     -webkit-transition: all 0.5s ease; 
     -moz-transition: all 0.5s ease; 
     -o-transition: all 0.5s ease; 
     transition: all 0.5s ease; 
    } 

    #wrapper.toggled #page-content-wrapper { 
     position: relative; 
     margin-right: 0; 
     padding-left: 250px; 
    } 
    #wrapper.toggled-2 #page-content-wrapper { 
     position: relative; 
     margin-right: 0; 
     margin-left: -200px; 
     -webkit-transition: all 0.5s ease; 
     -moz-transition: all 0.5s ease; 
     -o-transition: all 0.5s ease; 
     transition: all 0.5s ease; 
     width: auto; 

    } 
} 
+0

你的代碼是爲我工作的罰款* [見小提琴(https://fiddle.jshell.net/gdexp9qo/)* –

+0

沒有它不工作,重新審覈 – MUT

回答

1

替換您的導航欄<nav>代碼與此。它正在工作。在你的小提琴中測試。

<nav class="navbar navbar-default no-margin"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header fixed-brand"> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" id="menu-toggle"> 
     <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span> 
    </button> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#text"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    </div> 
    <!-- navbar-header--> 

    <div class="collapse navbar-collapse" id="text"> 
    <ul class="nav navbar-nav"> 
     <li class="active"> 
     <button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2"> <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span></button> 
     </li> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Profile</a></li> 
     <li><a href="#">Messages</a></li> 
    </ul> 

    <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Lin</a></li> 
    </ul> 
    </div> 
    <!-- bs-example-navbar-collapse-1 --> 
</nav>