jquery - why my slide nav bar keep expanding even i dont trigger it -
please take this. tired use media min-width 768px sidebar-wrapper , sidebar-nav li a, display: none, slide nav keep showing (auto expand), button trigger nav gone. 
every time refresh/open desktop
$("#menu-toggle").click(function(e) { e.preventdefault(); $("#wrapper").toggleclass("toggled"); });body { color: #ffffff; background-color: #ffffff; } .navbar li { color: #ffffff !important; } .navbar li a:hover { color: gray !important; } .navbar-inner, .navbar .btn-navbar { background: #ffffff } .navbar-inverse .navbar-toggle { border-color: #333; float: left; } #wrapper { padding-left: 0; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 0.5s ease; } #wrapper.toggled { padding-left: 250px; } #sidebar-wrapper { z-index: 1000; position: fixed; overflow-y: auto; left: 250px; width: 0; top: 0; height: 100%; margin-left: -250px; overflow-y: auto; background: #000; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 0.5s ease; } #wrapper.toggled #sidebar-wrapper { width: 250px; } #page-content-wrapper { width: 100%; position: absolute; padding: 15px; } #wrapper.toggled #page-content-wrapper { position: absolute; margin-right: -250px; } /* sidebar styles */ .sidebar-nav { position: absolute; top: 0; width: 250px; margin: 0; padding: 0; list-style: none; } .sidebar-nav li { text-indent: 20px; line-height: 40px; } .sidebar-nav li { display: block; text-decoration: none; color: #999999; } .sidebar-nav li a:hover { text-decoration: none; color: #fff; background: rgba(255,255,255,0.2); } .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 { color: #999999; } .sidebar-nav > .sidebar-brand a:hover { color: #fff; background: none; } @media(min-width:768px) { #wrapper { padding-left: 250px; } #wrapper.toggled { padding-left: 0; } #sidebar-wrapper { width: 250px; } #wrapper.toggled #sidebar-wrapper { width: 0; } #page-content-wrapper { padding: 20px; position: relative; } #wrapper.toggled #page-content-wrapper { position: relative; margin-right: 0; } }<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="js/respond.js"></script> <script src="js/bootstrap.min.js"></script> <body> <div id="wrapper"> <nav role="navigation" class="navbar navbar-inverse"> <div class="navbar-header"> <button type="button" data-target="#" data-toggle="collapse" class="navbar-toggle" id="menu-toggle" style=" margin-left: 24px;"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="navbarcollapse" class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-center"> <li><a href="#">about</a></li> <li><a href="#">contact us</a></li> <li><a href="index.html"><i class="fa fa-youtube-play"></i> youtube channel</a></li> </ul> </div> </nav> <!-- end navigation button--> <!-- sidebar --> <div id="sidebar-wrapper"> <ul class="sidebar-nav"> <li class="sidebar-brand" > <a href="#"> sad </a> </li> <li> <a href="#">dashboard</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">a<span class="caret"></span></a> <ul class="dropdown-menu navmenu-nav"> <li><a href="#">a1</a></li> <li><a href="#">a2</a></li> <li><a href="#">a3</a></li> </ul> </li> <li> <a href="#" >about</a> </li> </ul> </ul> </div> <div id="page-content-wrapper"> <div class="container-fluid"> </div> </nav> </div> <!-- /#page-content-wrapper --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body>
change
#wrapper { padding-left: 0; position: relative; } and
#sidebar-wrapper { background: #000 none repeat scroll 0 0; height: 100%; left: 0; margin-left: 0; overflow-y: auto; position: absolute; top: 0; transition: 0.5s ease 0s; width: 0; z-index: 1000; } for second problem: cant find display: none; in css.
auto-expand problem:
set width: 250px; standard width of nav. in media-queries work
@media (max-width: 768px) { #sidebar-wrapper { display: none; } } and change jquery-code to
#wrapper.toggled #sidebar-wrapper { width: 0px; } this not tested, should idea. show navbar @ start, hide when screen <768px display: none;, way doesnt animated. , change toggle work new standard width.
Comments
Post a Comment