js實現前端介面導航欄下拉列表
阿新 • • 發佈:2020-08-29
本文例項為大家分享了js實現前端介面導航欄下拉列表的具體程式碼,供大家參考,具體內容如下
先來看成果圖
html程式碼:
<nav> <ul class="nav"> <li class="dropDowm"> <a href="javascript:;" class="dropdown-toggle"> 列表一 </a> <ul class="dropdown-menu" style="display: none;height: 116px;padding-top: 0px;margin-top: 0px;padding-bottom: 0px;margin-bottom: 0px;"> <li><a href="#" >概述</a></li> <li><a href="#" >概述</a></li> <li><a href="#" >概述</a></li> <li><a href="#" >概述</a></li> <div class="ulbg"></div> </ul> </li> <li class="dropDowm"> <a href="javascript:;" class="dropdown-toggle"> 列表二 </a> <ul class="dropdown-menu" style="display: none;height: 145px;padding-top: 0px;margin-top: 0px;padding-bottom: 0px;margin-bottom: 0px;"> <li><a href="#" >概述</a></li> <li><a href="#" >概述</a></li> <li><a href="#" >概述</a></li> <li><a href="#" >概述</a></li> <li><a href="#" >概述</a></li> <div class="ulbg"></div> </ul> </li> <li class="dropDowm"> <a href="javascript:;" class="dropdown-toggle"> 列表三 </a> <ul class="dropdown-menu" style="display: none;height: 145px;padding-top: 0px;margin-top: 0px;padding-bottom: 0px;margin-bottom: 0px;"> <li><a href="#" >概述</a></li> <li><a href="#" >概述</a></li> <li><a href="#" >概述</a></li> <li><a href="#" >概述</a></li> <li><a href="#" >概述</a></li> <div class="ulbg"></div> </ul> </li> <li class="dropDowm"> <a href="javascript:;" class="dropdown-toggle"> 列表四 </a> <ul class="dropdown-menu" style="display: none;height: 116px;padding-top: 0px;margin-top: 0px;padding-bottom: 0px;margin-bottom: 0px;"> <li><a href="#" >概述</a></li> <li><a href="#" >概述</a></li> <li><a href="#" >概述</a></li> <li><a href="#" >概述</a></li> <div class="ulbg"></div> </ul> </li> <li class="dropDowm"> <a href="javascript:;" class="dropdown-toggle"> 列表五 </a> <ul class="dropdown-menu" style="display: none;height: 116px;padding-top: 0px;margin-top: 0px;padding-bottom: 0px;margin-bottom: 0px;"> <li><a href="#" >概述</a></li> <li><a href="#" >概述</a></li> <li><a href="#" >概述</a></li> <li><a href="#" >概述</a></li> <div class="ulbg"></div> </ul> </li> <li class="dropDowm"> <a href="javascript:;" class="dropdown-toggle"> 列表六 </a> <ul class="dropdown-menu" style="display: none;height: 116px;padding-top: 0px;margin-top: 0px;padding-bottom: 0px;margin-bottom: 0px;"> <li><a href="#" >概述</a></li> <li><a href="#" >概述</a></li> <li><a href="#" >概述</a></li> <li><a href="#" >概述</a></li> <div class="ulbg"></div> </ul> </li> <li class="dropDowm"> <a href="javascript:;" class="dropdown-toggle"> 列表七 </a> <ul class="dropdown-menu" style="display: none;height: 116px;padding-top: 0px;margin-top: 0px;padding-bottom: 0px;margin-bottom: 0px;"> <li><a href="#" >概述</a></li> <li><a href="#" >概述</a></li> <li><a href="#" >概述</a></li> <li><a href="#" >概述</a></li> <div class="ulbg"></div> </ul> </li> </ul> </nav>
css程式碼:
nav { background-color: #efe5e5; width: 77%; } .nav{ height: 50px; width: 100%; display: flex; } .nav .dropDowm{ float: left; width: 14%; list-style: none; } .nav .dropDowm>a{ text-decoration: none; margin: 12px; line-height: 3; } .nav .dropDowm .dropdown-menu{ background-color: #848d9e; } .nav .dropDowm .dropdown-menu>li{ list-style: none; display: block; } .nav .dropDowm .dropdown-menu>li>a{ text-decoration: none; display: block; font-size: 16px; line-height: 28px; }
最重要的是js程式碼 利用js程式碼控制
$(function(){ $('.nav .dropDowm').hover(function(e) { $(this).find('ul').stop().slideToggle(); }); });
簡短介紹:
slideToggle() 方法通過使用滑動效果(高度變化)來切換元素的可見狀態。
如果被選元素是可見的,則隱藏這些元素,如果被選元素是隱藏的,則顯示這些元素。
如果執行出現(F12檢視):
解決 在頭部加上jquery的js檔案即可
比如,這是小編的js目錄下的 別忘了下載再引入
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。