导航栏下拉菜单效果代码
導航欄,菜單欄下拉簡單實現
先看看效果圖
<!--
jQuery Drop-down Menu/Navigation bar
Copyright 2017-9-21, Jachin
QQ: 381558301
Email: 381558301@qq.com
需腳本語言:jQuery
純靜態頁面
功能的關鍵點:
父元素需要hover函數觸發
子元素必須在父元素里面并且需要絕對定位(絕對定位不影響布局)
兼容ie全家族 over~~~
tip:ie8(包含)以下瀏覽器需要去除頭部的注釋,否則樣式會出錯.
-->
<!DOCTYPE html>
<html lang="ZH-CN">
<head>
<meta charset="utf-8">
<title>導航欄,菜單欄下拉簡單實現</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
/樣式初始化/
body, dl, dd, h1, h2, h3, h4, h5, h6, p, form,ul,ol{margin:0; padding:0;}
ol,ul { list-style:none; }
.nav span{
display: inline-block;
height:36px;
width:120px;
background: #ff9900;
line-height: 36px;
text-align: center;
position: relative;
}
.nav ul{
position: absolute;
width:120px;
display: none;
background: #f90
}
</style>
</head>
<body>
<div class="nav">
<span>導航欄-1
<ul>
<li>1-1</li>
<li>1-2</li>
<li>1-3</li>
</ul>
</span>
<span>導航欄-2
<ul>
<li>1-1</li>
<li>1-2</li>
<li>1-3</li>
</ul>
</span>
<span>導航欄-3
<ul>
<li>1-1</li>
<li>1-2</li>
<li>1-3</li>
</ul>
</span>
</div>
</body>
</html>
<script type="text/javascript">
//hover接收2個參數,第一個是經過,第二個是離開;
$('.nav span').hover(function(){
$(this).find('ul').show();
},function(){
$(this).find('ul').hide();
});
</script>
離開舒適區
轉載于:https://blog.51cto.com/13947669/2318006
總結
以上是生活随笔為你收集整理的导航栏下拉菜单效果代码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数据库正常运行，突然变慢的解决思路
- 下一篇： 大数据学习——MapReduce学习——