js實現(xiàn)前端界面導(dǎo)航欄下拉列表
更新時間：2020年08月27日 10:47:05 作者：mo-2016
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)前端界面導(dǎo)航欄下拉列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)前端界面導(dǎo)航欄下拉列表的具體代碼，供大家參考，具體內(nèi)容如下
先來看成果圖
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() 方法通過使用滑動效果（高度變化）來切換元素的可見狀態(tài)。
如果被選元素是可見的，則隱藏這些元素，如果被選元素是隱藏的，則顯示這些元素。
如果運行出現(xiàn)（F12查看）：
解決 在頭部加上jquery的js文件即可
比如，這是小編的js目錄下的 別忘了下載再引入
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JS中用三種方式實現(xiàn)導(dǎo)航菜單中的二級下拉菜單
- 原生JS實現(xiàn)導(dǎo)航下拉菜單效果
- JS+CSS實現(xiàn)簡單的二級下拉導(dǎo)航菜單效果
- JS 實現(xiàn)導(dǎo)航菜單中的二級下拉菜單的幾種方式
- javascript仿京東導(dǎo)航左側(cè)分類導(dǎo)航下拉菜單效果
- js+div+css下拉導(dǎo)航菜單完整代碼分享
- javascript實現(xiàn)帶下拉子菜單的導(dǎo)航菜單效果
- 頂部緩沖下拉菜單導(dǎo)航特效的JS代碼
- 基于JS快速實現(xiàn)導(dǎo)航下拉菜單動畫效果附源碼下載
- JavaScript實現(xiàn)HTML導(dǎo)航欄下拉菜單
相關(guān)文章
希望頁面加載完畢后向左自動滾動一定位置，下面有個不錯的方法可以輕松幫大家實現(xiàn)下2014-02-02
JS實現(xiàn)點擊按鈕控制Div變寬、增高及調(diào)整背景色的方法
這篇文章主要介紹了JS實現(xiàn)點擊按鈕控制Div變寬、增高及調(diào)整背景色的方法,涉及javascript動態(tài)操作頁面元素屬性的相關(guān)技巧,適用于動態(tài)更換頁面皮膚的功能,需要的朋友可以參考下2015-08-08
這篇文章主要給大家介紹了關(guān)于JavaScript深拷貝的一些踩坑記錄，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
web-view是一個web瀏覽器組件,可以用來承載網(wǎng)頁的容器,會自動鋪滿整個頁面,下面這篇文章主要給大家介紹了關(guān)于uni-app和web-view頁面相互傳參的相關(guān)資料,需要的朋友可以參考下2023-06-06
JavaScript實現(xiàn)前端飛機(jī)大戰(zhàn)小游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)前端飛機(jī)大戰(zhàn)小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
JavaScript數(shù)組中reduce方法的應(yīng)用詳解
JavaScript 中的reduce()方法可以用于將數(shù)組元素匯總為單個值，，所以本文為大家整理了一些JavaScript數(shù)組中reduce方法的應(yīng)用，需要的可以參考一下2023-07-07
Moment.js是一個輕量級的JavaScript時間庫,通常會對時間進(jìn)行下面這幾個操作：比如獲取時間,設(shè)置時間,格式化時間,比較時間等等,本文就來介紹一下如何使用,感興趣的可以了解下2023-09-09
本文給大家分享的是如何解決獲取JavaScript異步函數(shù)返回值的經(jīng)歷及最后的解決方法，有需要的小伙伴可以參考下2016-12-12
手機(jī)圖片預(yù)覽插件photoswipe.js使用總結(jié)
這篇文章主要為大家詳細(xì)總結(jié)了手機(jī)圖片預(yù)覽插件photoswipe.js使用方法，感興趣的小伙伴們可以參考一下2016-08-08
js獲取時間并實現(xiàn)字符串和時間戳之間的轉(zhuǎn)換
這篇文章主要介紹了js獲取時間并實現(xiàn)字符串和時間戳之間的轉(zhuǎn)換,需要的朋友可以參考下2015-01-01