用jquery實現(xiàn)的一個超級簡單的下拉菜單
更新時間：2014年05月18日 16:24:33 作者：
這篇文章主要介紹了用jquery實現(xiàn)的一個超級簡單的下拉菜單,需要的朋友可以參考下
用jquery實現(xiàn)的一個超級簡單的下拉菜單。
效果圖
初始效果
鼠標懸浮效果
代碼
<!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>
效果圖
初始效果
鼠標懸浮效果
代碼
復(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中before()方法用法,以實例形式分析了before()方法的功能、定義與具體使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2014-12-12
這篇文章主要是對同域jQuery(跨)iframe操作DOM的示例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
jQuery是一種流行的JavaScript庫，可以輕松地在網(wǎng)頁中插入圖片和文字。通過使用jQuery的插入功能，您可以在網(wǎng)頁上動態(tài)地添加內(nèi)容，從而提高用戶體驗。本文將介紹如何使用jQuery在圖片和文字中插入內(nèi)容，并提供一些實用的代碼示例。2023-06-06
JQuery 1.6發(fā)布 性能提升，同時包含大量破壞性變更
JQuery 1.6剛剛發(fā)布了，有幾處性能和跨瀏覽器兼容性的改進，專門重寫了屬性模塊2011-05-05
Jquery AutoComplete自動完成 的使用方法實例
jQuery的Autocomplete（自動完成、自動填充）插件有不少，但比較下來我感覺，還是bassistance.de的JQuery Autocomplete plugin比較強大，我們就來寫一些代碼感受一下。2010-03-03
jquery實現(xiàn)點擊文字可編輯并修改保存至數(shù)據(jù)庫
網(wǎng)上的方法只有點擊文字編輯并保持，但是沒有完整的代碼寫怎么保存到數(shù)據(jù)庫，本例用一條sql語句保存到數(shù)據(jù)庫2014-04-04
這篇文章主要介紹了jQuery中:last選擇器用法,實例分析了:last選擇器的功能、定義及匹配時的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2014-12-12
因為工作的原因，從上周開始接觸了jquery，以前我是自己寫js的函數(shù)庫，把一些常用的的方法寫成函數(shù)，現(xiàn)在學(xué)習(xí)了jquery，發(fā)現(xiàn)還真是方便。不盡簡潔了很多。用Ajax很方便，而且還可以很方便創(chuàng)造一些特效。2009-08-08
easy-ajax是為了治理前端亂寫Ajax方法而生。接下來通過本文給大家介紹JQuery 封裝 Ajax 常用方法，需要的朋友參考下2017-05-05
本篇文章主要是對jquery彈出層居中效果的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03