用jquery實現(xiàn)的一個超級簡單的下拉菜單
更新時間：2014年05月18日 16:24:33 作者：
這篇文章主要介紹了用jquery實現(xiàn)的一個超級簡單的下拉菜單,需要的朋友可以參考下
用jquery實現(xiàn)的一個超級簡單的下拉菜單。
效果圖
初始效果
鼠標(biāo)懸浮效果
代碼
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<style>
nav a {
text-decoration: none;
}
nav > ul > li {
float: left;
text-align: center;
padding: 0 0.5em;
}
nav li ul.sub-menu {
display: none;
padding-left: 0 !important;
}
.sub-menu li {
color: white;
}
.sub-menu li:hover {
background-color: black;
}
.sub-menu li:hover a {
color: white;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home
<ul class="sub-menu">
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
</ul>
</li>
<li><a href="#">Programming
<ul class="sub-menu">
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
</ul>
</li>
<li><a href="#">Japanese
<ul class="sub-menu">
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
</ul>
</li>
</ul>
</nav>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('nav li').hover(function() {
$(this).find('.sub-menu').css('display', 'block');
}, function() {
$(this).find('.sub-menu').css('display', 'none');
});
});
</script>
</html>
效果圖
初始效果
鼠標(biāo)懸浮效果
代碼
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<style>
nav a {
text-decoration: none;
}
nav > ul > li {
float: left;
text-align: center;
padding: 0 0.5em;
}
nav li ul.sub-menu {
display: none;
padding-left: 0 !important;
}
.sub-menu li {
color: white;
}
.sub-menu li:hover {
background-color: black;
}
.sub-menu li:hover a {
color: white;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home
<ul class="sub-menu">
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
</ul>
</li>
<li><a href="#">Programming
<ul class="sub-menu">
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
</ul>
</li>
<li><a href="#">Japanese
<ul class="sub-menu">
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
</ul>
</li>
</ul>
</nav>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('nav li').hover(function() {
$(this).find('.sub-menu').css('display', 'block');
}, function() {
$(this).find('.sub-menu').css('display', 'none');
});
});
</script>
</html>
相關(guān)文章
jQuery操作listbox原理并不難，就是將listbox中的選中項進行移動，實現(xiàn)我們需要的移動效果，具體實例如下，感興趣的朋友可以學(xué)習(xí)下2013-05-05
本文以示例的方式為大家介紹下jquery sortable的拖動方法的具體實現(xiàn)，感興趣的朋友可以參考下2014-01-01
這篇文章主要介紹了jQuery基于cookie實現(xiàn)換膚功能,結(jié)合具體實例形式分析了jQuery使用cookie記錄與讀取用戶信息實現(xiàn)頁面樣式的操作方法,需要的朋友可以參考下2017-10-10
jQuery使用$.extend(true,object1, object2);實現(xiàn)深拷貝對象的方法分析
這篇文章主要介紹了jQuery使用$.extend(true,object1, object2);實現(xiàn)深拷貝對象的方法,結(jié)合實例形式分析了jQuery中$.extend(true,object1, object2);進行深拷貝操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-03-03
圖片上下切換效果,學(xué)習(xí)jquery的朋友可以參考下。2011-03-03
背景顏色，比如換個心情之類的，需要記住這樣的一個狀態(tài)，下面為大家介紹下利用cookie記住背景顏色的具體實現(xiàn)，感興趣的朋友不要錯過2013-11-11
這篇文章主要介紹了jQuery-mobile事件監(jiān)聽與用法,結(jié)合實例形式分析了jQuery-mobile各種常見事件類型與使用技巧,需要的朋友可以參考下2016-11-11
jQuery實現(xiàn)鼠標(biāo)選中文字后彈出提示窗口效果【附demo源碼】
這篇文章主要介紹了jQuery實現(xiàn)鼠標(biāo)選中文字后彈出提示窗口效果,涉及jQuery事件響應(yīng)及頁面元素動態(tài)操作相關(guān)技巧,非常簡便實用,需要的朋友可以參考下2016-09-09
本文介紹了“JQuery操作tr和td內(nèi)容的方法實例”，需要的朋友可以參考一下2013-03-03
下面小編就為大家?guī)硪黄猨Query為DOM動態(tài)追加事件的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02