[英]How can I create sidebar menu and clickable sub menu with html css bootstrap?
This is a piece of my code for sidebar menu.I want to create dashboard and drop down menu in left of screen. 这是我的侧边栏菜单代码的一部分。我想创建仪表板并在屏幕左侧下拉菜单。 when I go on flower don't show it's sub menu.
当我继续前进时,不显示它的子菜单。 (i want clickable)
(我想点击)
<div class="navbar-default navbar-right sidebar">
<div class="sidebar-nav navbar-collapse">
<ul class="nav-fall">
<li class="charj"><a href="">flower<i class="fa fa-angle-right arrow" aria-hidden="true"></i></a>
<ul class="nav-second-level">
<li><a href="">name</a></li>
<li><a href="">price</a></li>
</ul>
</li>
<li><a href="">one</a></li>
<li><a href="">two</a></li>
<li><a href="">three</a></li>
</ul>
</div>
</div>
<!------css----->
.sidebar .fa.arrow:before {
content: "\f105";
}
.sidebar .nav-second-level {
display: none;
}
.sidebar .nav-fall .charj a:hover .nav-second-level {
display: block;
}
Below 2 examples. 下面有两个例子。 The first one uses hover, the second one uses a click event.
第一个使用悬停,第二个使用单击事件。
.sidebar .fa.arrow:before { content: "\\f105"; margin-left: 3px; } .nav-second-level { display: none; } .sidebar .nav-fall li:hover .nav-second-level { display: block; }
<div class="navbar-default navbar-right sidebar"> <div class="sidebar-nav navbar-collapse"> <ul class="nav-fall"> <li class="charj"><a href="">flower<i class="fa fa-angle-right arrow" aria-hidden="true"></i></a> <ul class="nav-second-level"> <li><a href="">name</a></li> <li><a href="">price</a></li> </ul> </li> <li><a href="">one</a></li> <li><a href="">two</a></li> <li><a href="">three</a></li> </ul> </div> </div>
$(document).on("click", ".charj", function() { $(this).find("ul").show(); })
.sidebar .fa.arrow:before { content: "\\f105"; margin-left: 3px; } .nav-second-level { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="navbar-default navbar-right sidebar"> <div class="sidebar-nav navbar-collapse"> <ul class="nav-fall"> <li class="charj"><a href="#">flower<i class="fa fa-angle-right arrow" aria-hidden="true"></i></a> <ul class="nav-second-level"> <li><a href="">name</a></li> <li><a href="">price</a></li> </ul> </li> <li><a href="">one</a></li> <li><a href="">two</a></li> <li><a href="">three</a></li> </ul> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.