javascript - Dropdown menu bootstrap multilevel -
i have question:
- how make navbar text in left in bootstrap?
- i'd make dropdown menu bootstrap , jquery-menu-aim. dropdown submenu piled up. goal is.
and i've done..
can me? in advance. i'm using bootstrap 3.3.4.
html file
<header> <div class="branding">logo <h3>brand</h3> <!--<div style="clear: both;"></div>--></div> </header> <nav role="navigation" class="navbar navbar-fixed-top"> <div class="container"> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="navbar-left"> <a href="index.html" class="dropdown-toggle" data-toggle="dropdown">product</a> <ul class="dropdown-menu" role="menu"> <li class="search row-sm-3"> <input type="text" class="form-control" placeholder="search" /> </li> <li role="separator" class="divider"></li> <li data-submenu-id="submenu-mobile"> <a href="#">mobile devices</a> <div id="submenu-mobile" class="popover"> <h3 class="popover-title">mobile devices</h3> <div class="popover-content"> <ul class="list-unstyled"> <li><a href="#">smartphones</a> </li> <li><a href="#">tablets</a> </li> <li><a href="#">other phones</a> </li> <li><a href="#">accessoris</a> </li> </ul> </div> </div> </li> <li data-submenu-id="submenu-audio"> <a href="#">tv / audio / video</a> <div id="submenu-audio" class="popover"> <h3 class="popover-title">tv / audio / video</h3> <div class="popover-content"> <ul class="list-unstyled"> <li><a href="#">televisions</a> </li> <li><a href="#">audio , video</a> </li> <li><a href="#">accessoris</a> </li> </ul> </div> </div> </li> <li data-submenu-id="submenu-track-trace"> <a href="#">cameras , camcorders</a> <div id="submenu-track-trace" class="popover"> <h3 class="popover-title">cameras , camcorders</h3> <div class="popover-content"> <ul class="list-unstyled"> <li><a href="#">cameras</a> </li> <li><a href="#">camcorders</a> </li> </ul> </div> </div> </li> <li data-submenu-id="submenu-it"> <a href="#">it</a> <div id="submenu-it" class="popover"> <h3 class="popover-title">it</h3> <div class="popover-content"> <ul class="list-unstyled"> <li><a href="#">monitor</a> </li> <li><a href="#">printers</a> </li> </ul> </div> </div> </li> </ul> </li> <li class="navbar-left"><a href="#">apps</a> </li> <li class="navbar-left"><a href="#">support</a> </li> </ul> <ul class="nav navbar-nav navbar-right setting"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> setting <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> profile</a> </li> <li><a href="#"><span class="glyphicon glyphicon-inbox"></span> messages</a> </li> <li role="separator" class="divider"></li> <li><a href="#"><span class="glyphicon glyphicon-log-out"></span> logout</a> </li> </ul> </li> </ul> </div> <!--/.nav-collapse --> </div> <!--/.container --> css file
.branding h3 { position: fixed; float: left; left: 25%; top: -5px; font-weight: bold; font-size: 18px; color: #595959; } nav { height: 30px; float: left; } .navbar-fixed-top { top: 40px; /*font-size: 13px;*/ font-weight: bold; background: #d9d9d9; color: #727272; } .nav li { text-decoration: none; color: #727272; } .nav li a:hover { color: blue; } .disabled { top: 15px; } .divider { background: #000; } .dropdown-menu { top: 50px; border-top-color: #eee; background: #eee; /*width: 300px;*/ } .popover { background: #eee; width: 250px; } .popover-title { font-weight: bold; } .popover-content { border: 0; list-style-type: none; } .popover-content ul li { list-style-type: none; color: #727272; } .popover-content ul li a:hover { text-decoration: none; color: blue; } .search { margin: 10px; }
Comments
Post a Comment