javascript - How to create a multilevel dropdown using jquery? -
i have unordered list want create multilevel drop down, should when click on drop down not hover should show list, if contents in list has sub list , if click on sub-list pop should appear above current drop down sub list , x mark in top right corner.if click on x should close pop up. (i should not use bootstrap)
this html code
<ul id="nav"> <li><a href="#">home</a></li> <li><a href="#"> menu2 <img alt="" src="images/warning.png" style=" border:0px;" /></a> <ul id="subnav"> <li><a href="#">submenu1</a></li> <ul> <li><a href="#">sub1sub2menu1</a></li> <li><a href="#">sub1sub2menu2</a></li> <li><a href="#">sub1sub2menu3</a></li> </ul> <li><a href="#">submenu2</a></li> <li><a href="#">submenu3</a></li> <li><a href="#">submenu4</a></li> <li><a href="#">submenu5</a></li> <li><a href="#">submenu6</a></li> <li><a href="#">submenu7</a></li> </ul> </li> <li><a href="#">menu3 <img alt="" src="images/warning.png" style=" border:0px;" /></a> <ul> <li><a href="#">sub1menu1</a></li> <li><a href="#">sub1menu2</a></li> </ul> </li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> </ul> and css :
#nav { margin:0; padding:0; list-style:none; width:640px; height:37px; } #nav li { float:right; display:block; width:124px; position:relative; z-index:500; text-decoration:none; } #nav li { display:block; height:37px; line-height:37px; text-decoration:none; color:#fff; text-align:center; color:#000; } #nav li a:hover { color:green; } #nav a.selected { color:#000; } #nav ul { position:absolute; right:0; display:none; padding:0; list-style:none; background-color:#c5c9cc; border: solid 1px #c5c9cc; -moz-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; } #nav ul li { width:124px; float:right; } #nav ul ul { width:124px; float:right; margin:0px 124px 0px 0px; display:block; border-radius: 10px 0 0 10px; } #nav ul { display:block; height:30px; color:#000; line-height:30px; text-decoration:none; } #nav li ul ul { margin:0px 124px 0 10px; } #nav ul a:hover { text-decoration:none; } *html #nav ul { margin:0 0 0 -2px; } and jquery code :
<script type="text/javascript"> $(document).ready(function () { $('#nav li').hover( function () { //show submenu $('ul', this).slidedown(200); $('#subnav ul', this).css({ visibility: "hidden" }); }, function () { //hide submenu $('ul', this).slideup(200); } ); $('#subnav').hover( function () { //show submenu $('#subnav ul', this).css({ visibility: "visible" }); $('#subnav ul', this).slidedown(200); }, function () { //hide submenu $('#subnav ul', this).slideup(200); } ); }); </script>
you can use navbar , change name
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="homepage-img" id="img-home"> <div class="logo"><img src="../images/logo3.svg"></div> <div class="navbar-header"> <button aria-controls="navbar" aria-expanded="false" class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse" type="button"><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 class="navbar-collapse collapse" id="navbar"> <ul class="nav navbar-nav navbar-right"> <li> <a class="menu" href="/" id="active"><i class="icon-025-home"></i> الرئيسية</a> </li> <li> <a class="menu" href="about"><i class="icon-010-group"></i> من نحن</a> </li> <li class="dropdown"> <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle menu" data-toggle="dropdown" role="button" style="cursor:pointer"><i class="icon-016-shop"></i> المتجر<span class="caret"></span></a> <ul class="dropdown-menu"> <li> <a href="/store/balancecard"><i class="icon-022-smartphone"></i> كروت شحن</a> </li> <li> <a href="/store/phonebill"><i class="icon-018-telephone"></i> فاتورة الأرضي</a> </li> <li> <a href="/store/internetbill"><i class="icon-024-earth"></i> فاتورة الانترنت</a> </li> <li> <a href="/store/withdrawmoney"><i class="icon-atm"></i> سحب/تحويل الأموال</a> </li> <li> <a href="store"><i class="icon-028-more"></i> المزيد</a> </li> </ul> </li> <li> <a class="menu" href="contact"><i class="icon-026-email"></i> اتصل بنا</a> </li> <li class="dropdown"> <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle menu" data-toggle="dropdown" role="button" style="cursor:pointer"><i class="icon-028-more"></i> المزيد<span class="caret"></span></a> <ul class="dropdown-menu"> <li> <a href="fees"><i class="icon-002-money"></i> الرسوم</a> </li> <li> <a href="privacy"><i class="icon-016-shield"></i> سياسة الخصوصية</a> </li> <li> <a href="security"><i class="icon-006-padlock"></i> الأمان</a> </li> <li> <a href="faq"><i class="icon-016-faq"></i> الأسئلة الأكثر شيوعاً</a> </li> </ul> </li> </ul> </div> <div class="clearfix"></div> <div class="name-header" id="yoo"> <h1>المتجر</h1> <p>خدمة الدفع والسحب الألكترونية الأولي من نوعها في مصر.</p> </div> </div> </nav> and use scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script> download bootstrap v3.3.5 css
Comments
Post a Comment