下拉菜单思路及实现
来源：互联网 发布：华为java上机编程题 编辑：程序博客网 时间：2024/05/19 20:21
制作思路
- 静态网页的制作
- 动态特效的视线——下拉菜单的显示与隐藏【css方法实现／jQuery方法实现／JavaScript方法实现】
- 浏览器兼容
静态网页的制作（HTML+CSS）
- 项目列表：
<ul><li></li></ul>标签 - 链接：
<a>标签 - 浮动：
float display:block- 元素的定位：
position
版本1.0【CSS实现】代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>下拉菜单实现-CSS（版本1.0）</title> <style type="text/css"> * { /*盒子有自己默认的margin和padding，去掉这些*/ margin: 0; padding: 0; } #menu { background-color: #eee; width: 600px; height: 40px; margin: 0 auto; } ul { list-style: none; /**/ } ul li { float: left; /*让列表横向显示*/ line-height: 40px; /*垂直居中*/ text-align: center; /*水平居中*/ position: relative; /*将下拉菜单放在指定位置第二步，让子菜单针对此菜单进行定位，而不是针对浏览器定位*/ } ul li:hover ul{ display: block; /*其次，鼠标划过时下拉菜单显示*/ } ul li ul { position: absolute; /*将下拉菜单放在指定位置第一步*/ left: 0; /*绝对absolute定位要配合left和top使用*/ top: 40px; display: none; /*首先，下拉菜单隐藏*/ } ul li ul li { float: none; /*子列表竖向显示*/ background-color: #eeeeee; margin-top: 2px; border: 1px solid #ff1212; } a { padding: 0 20px; /*让宽度自适应文字大小*/ text-decoration: none; /*取消链接下划线*/ color: #000; display: block; /*将a标签变为块级元素*/ height: 40px; } a:hover { color: white; /*鼠标滑过时文字颜色为白色*/ background-color: #787f80; /*鼠标滑过时背景颜色*/ } ul li ul li a { width: auto; /*让下拉菜单框大小自适应文字多少*/ } ul li ul li a:hover{ background-color: #ff1212; /*设置二级菜单的样式*/ } </style></head><body><div id="menu"> <ul> <li><a href="#">首页</a></li> <li><a href="#">前端学习</a> <ul> <li><a>HTMLHTMLHTMLHTMLHTMLHTML</a></li> <li><a>CSS</a></li> <li><a>JavaScript</a></li> <li><a>jQuery</a></li> </ul> </li> <li><a href="#">后端学习</a> <ul> <li><a>HTML</a></li> <li><a>CSS</a></li> <li><a>JavaScript</a></li> <li><a>jQuery</a></li> </ul></li> <li><a href="#">算法学习</a> <ul> <li><a>HTML</a></li> <li><a>CSS</a></li> <li><a>JavaScript</a></li> <li><a>jQuery</a></li> </ul></li> <li><a href="#">网络学习</a> <ul> <li><a>HTML</a></li> <li><a>CSS</a></li> <li><a>JavaScript</a></li> <li><a>jQuery</a></li> </ul></li> </ul></div></body></html>版本1.1【JavaScript实现】代码
onmouseover、onmouseout、getElementsById、this- 代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>下拉菜单实现-JavaScript（版本1.1）</title> <style type="text/css"> * {margin:0; padding:0;} #menu{background-color:#eee; width:600px; height:40px; margin:0 auto;} ul {list-style:none;} ul li {float:left; line-height:40px; text-align:center; position:relative;} a {text-decoration:none; color:black; display:block; width:90px;} a:hover{color:white; background-color:gray;} ul li ul{width:90px; position:absolute; left:0; top:40px; display:none;} ul li ul li{float:none; border-left:none; margin-top:2px; background-color:#eee;} </style> <script type="text/javascript"> function showSubMenu(li) { //获取li下的ul子菜单 var subMenu = li.getElementsByTagName('ul')[0]; subMenu.style.display = 'block'; } function hideSubMenu(li) { var subMenu = li.getElementsByTagName('ul')[0]; subMenu.style.display = 'none'; } </script></head><body><div id="menu"> <ul> <li><a href="#">首页</a></li> <li onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">前端学习</a> <ul> <li><a href="#">HTMLHTMLHTMLHTMLHTMLHTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> </ul> </li> <li><a href="#">后端学习</a> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> </ul></li> <li><a href="#">算法学习</a> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> </ul></li> <li><a href="#">网络学习</a> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> </ul></li> </ul></div></body></html>版本1.2【jQuery实现】代码
$(function(){})、children()、show()、hide()- 代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>下拉菜单实现-CSS（版本1.0）</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <script type="text/javascript"> $(function () { $('.outer').mouseover(function () { $(this).children('ul').show(); }); $('.outer').mouseout(function () { $(this).children('ul').hide(); }); }); </script> <style type="text/css"> * { margin: 0; padding: 0; } #menu { background-color: #eeeeff; width: 600px; height: 40px; margin: 0 auto; } ul { list-style: none; } ul li { float:left; line-height: 40px; text-align: center; position: relative; } a { text-decoration: none; color: #000; display: block; width: 90px; } a:hover { color: #FFFFFF; background-color: #666666; } ul li ul li { float: none; border-left: none; margin-top: 2px; background-color: #eeeeff; } ul li ul { width: 90px; position: absolute; left: 0px; top: 40px; display: none; } </style></head><body><div id="menu"> <ul> <li><a href="#">首页</a></li> <li class="outer"><a href="#">前端学习</a> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> </ul> </li> <li class="outer"><a href="#">后端学习</a> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> </ul></li> <li class="outer"><a href="#">算法学习</a> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> </ul></li> <li class="outer"><a href="#">网络学习</a> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> </ul> </li> </ul></div></body></html>版本1.3【变幻菜单】代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>变幻菜单</title> <style type="text/css"> .outer{ font-size: 12px; font-weight: bold; list-style: none; border-bottom: 8px solid #40e0d0; overflow: auto; /*使其包裹整个ul*/ } .outer li{ float: left; margin-right: 1px; } .outer li a{ line-height: 40px; text-decoration: none; background: #ddd; color: #666666; display: block; width: 80px; text-align: center; } .outer li a span { display: none; } .outer li a:hover span{ display: block; color: white; background: #40e0d0; } .outer li a:hover{ margin-top: -40px; } </style></head><body><ul class="outer"> <li><a href="#">First<span>天头</span></a></li> <li><a href="#">Third<span>书眉</span></a></li> <li><a href="#">Forth<span>订口</span></a></li> <li><a href="#">Fifth<span>封里</span></a></li> <li><a href="#">Sixth<span>书脊</span></a></li> <li><a href="#">Second<span>地脚</span></a></li></ul></body></html>版本1.3【多级菜单】代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>多级菜单</title> <style type="text/css"> .outer{ font-size: 12px; font-weight: bold; list-style: none; } .outer li{ float: left; margin-right: 1px; } .outer li a{ line-height: 40px; text-decoration: none; background: #ddd; color: #666666; display: block; width: 80px; text-align: center; } .outer li a:hover{ counter: white; background: red; } .outer li ul{ list-style: none; display: none; padding: 0; position: relative; } .outer li ul li { float: none; } .outer li:hover ul{ display: block; } .outer li:hover ul li ul{ display: none; } .outer li ul li:hover ul{ display: block; top: 0; left: 80px; position: absolute; } </style></head><body><ul class="outer"> <li><a href="#">First</a></li> <li><a href="#">Second</a> <ul> <li><a href="#">第一章</a> <ul> <li><a href="#">第一节</a></li> <li><a href="#">第二节</a></li> <li><a href="#">第三节</a></li> <li><a href="#">第四节</a></li> </ul> </li> <li><a href="#">第二章</a></li> <li><a href="#">第三章</a></li> <li><a href="#">第四章</a></li> </ul> </li> <li><a href="#">Third</a></li> <li><a href="#">Forth</a></li> <li><a href="#">Fifth</a></li> <li><a href="#">Sixth</a></li></ul></body></html>jQuery实现动画菜单
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery实现动画菜单</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <style type="text/css"> .outer{ font-size: 20px; font-weight: bold; list-style: none; /*去掉圆点*/ } .outer li{ float: left; /*让菜单横向显示*/ margin-right: 1px; /*让菜单间有1px的间距*/ } .outer li a{ line-height: 60px; /*行高*/ text-decoration: none; /*去除下划线*/ background: #ddd; color: #666666; display: block; width: 100px; text-align: center; /*居中对齐*/ } .outer li ul{ list-style: none; display: none; padding: 0; position: absolute; /*特别注意！！！！！！*/ } .outer li a:hover { background: url("materials/grayMulti.png") 0 0 repeat-x; } .note { color: #ddd; display: block; background: url("materials/grayMulti.png") 0 0 repeat-x; } .arrow{ display: block; height: 40px; background: url("materials/arrow.png") 30px 0 no-repeat; } </style> <script type="text/javascript"> $(document).ready(function () { $('.outer li').mouseover(function () { $(this).find('ul').slideDown('1000'); }); $('.outer li').mouseleave(function () { $(this).find('ul').slideUp('1000'); }) }) </script></head><body><ul class="outer"> <li><a href="#"><span class="note">START</span></a></li> <li><a href="#">First</a> <ul> <span class="arrow"></span> <li><a href="#">第一章</a></li> <li><a href="#">第二章</a></li> <li><a href="#">第三章</a></li> <li><a href="#">第四章</a></li> </ul> </li> <li><a href="#">Second</a> <ul> <span class="arrow"></span> <li><a href="#">第一章</a></li> <li><a href="#">第二章</a></li> <li><a href="#">第三章</a></li> <li><a href="#">第四章</a></li> </ul> </li> <li><a href="#">Third</a> <ul> <span class="arrow"></span> <li><a href="#">第一章</a></li> <li><a href="#">第二章</a></li> <li><a href="#">第三章</a></li> <li><a href="#">第四章</a></li> </ul> </li> <li><a href="#">Forth</a> <ul> <span class="arrow"></span> <li><a href="#">第一章</a></li> <li><a href="#">第二章</a></li> <li><a href="#">第三章</a></li> <li><a href="#">第四章</a></li> </ul> </li> <li><a href="#">Fifth</a> <ul> <span class="arrow"></span> <li><a href="#">第一章</a></li> <li><a href="#">第二章</a></li> <li><a href="#">第三章</a></li> <li><a href="#">第四章</a></li> </ul> </li> <li><a href="#">Sixth</a> <ul> <span class="arrow"></span> <li><a href="#">第一章</a></li> <li><a href="#">第二章</a></li> <li><a href="#">第三章</a></li> <li><a href="#">第四章</a></li> </ul> </li></ul></body></html>JS实现动画菜单
onmouseover、onmouseout、setTimeOut、onmouseover、onmouseleave尤其要注意后面两个都是小写！！！- 代码示例；
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title> JS实现动画菜单</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <style type="text/css"> .outer{ font-size: 20px; font-weight: bold; list-style: none; /*去掉圆点*/ } .outer li{ float: left; /*让菜单横向显示*/ margin-right: 1px; /*让菜单间有1px的间距*/ } .outer li a{ line-height: 60px; /*行高*/ text-decoration: none; /*去除下划线*/ background: #ddd; color: #666666; display: block; width: 100px; text-align: center; /*居中对齐*/ } .outer li ul{ list-style: none; display: none; padding: 0; position: absolute; /*特别注意！！！！！！*/ height: 0; /*为移动位置做准备*/ overflow: hidden; /*隐藏溢出的部分*/ } .outer li a:hover { background: url("materials/grayMulti.png") 0 0 repeat-x; } .note { color: #ddd; display: block; background: url("materials/grayMulti.png") 0 0 repeat-x; } .arrow{ display: block; height: 40px; background: url("materials/arrow.png") 30px 0 no-repeat; } </style> <script type="text/javascript"> window.onload = function () { var ALi = document.getElementsByTagName('li'); for(var i=0;i<ALi.length;i++){ ALi[i].onmouseover = function () { var oUl = this.getElementsByTagName('ul')[0]; if(oUl!=undefined){ oUl.style.display = 'block'; changeHeight(oUl.id, 1); } }; ALi[i].onmouseleave = function () { var oUl = this.getElementsByTagName('ul')[0]; if(oUl!=undefined){ changeHeight(oUl.id, -1); } } } }; function changeHeight(id, speed) { var aUl = document.getElementById(id); var h = aUl.offsetHeight; h += speed; if(speed>0){ if(h<100){ aUl.style.height = h + 'px'; setTimeout("changeHeight('"+id+"',1)",10); } }else{ if(h>0){ aUl.style.height = h + 'px'; setTimeout("subHeight('"+id+"',-1)",10); }else{ aUl.style.display = 'none'; } } } function addHeight(id) { var aUl = document.getElementById(id); var h = aUl.offsetHeight; h += 1; if(h<100){ aUl.style.height = h + 'px'; setTimeout("addHeight('"+id+"')",10); } } function subHeight(id) { var aUl = document.getElementById(id); var h = aUl.offsetHeight; h -= 1; if(h>0){ aUl.style.height = h + 'px'; setTimeout("subHeight('"+id+"')",10); }else{ aUl.style.display = 'none'; } } </script></head><body><ul class="outer"> <li><a href="#"><span class="note">START</span></a></li> <li><a href="#">First</a> <ul id="f"> <span class="arrow"></span> <li><a href="#">第一章</a></li> <li><a href="#">第二章</a></li> <li><a href="#">第三章</a></li> <li><a href="#">第四章</a></li> </ul> </li> <li><a href="#">Second</a> <ul> <span class="arrow"></span> <li><a href="#">第一章</a></li> <li><a href="#">第二章</a></li> <li><a href="#">第三章</a></li> <li><a href="#">第四章</a></li> </ul> </li> <li><a href="#">Third</a> <ul> <span class="arrow"></span> <li><a href="#">第一章</a></li> <li><a href="#">第二章</a></li> <li><a href="#">第三章</a></li> <li><a href="#">第四章</a></li> </ul> </li> <li><a href="#">Forth</a> <ul> <span class="arrow"></span> <li><a href="#">第一章</a></li> <li><a href="#">第二章</a></li> <li><a href="#">第三章</a></li> <li><a href="#">第四章</a></li> </ul> </li> <li><a href="#">Fifth</a> <ul> <span class="arrow"></span> <li><a href="#">第一章</a></li> <li><a href="#">第二章</a></li> <li><a href="#">第三章</a></li> <li><a href="#">第四章</a></li> </ul> </li> <li><a href="#">Sixth</a> <ul> <span class="arrow"></span> <li><a href="#">第一章</a></li> <li><a href="#">第二章</a></li> <li><a href="#">第三章</a></li> <li><a href="#">第四章</a></li> </ul> </li></ul></body></html>CSS3实现动画菜单
CSS3实现菜单圆角：
border-radius。
CSS3实现渐变背景：linear-gradient。
CSS3实现阴影：box-shadow。
CSS3实现透明：transition。
CSS3实现尖角：before。- 代码示例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css实现动画菜单</title> <style type="text/css"> .box { display: block; width: 0; border-bottom: 10px solid red; border-left: 10px solid transparent; border-top: 10px solid transparent; border-right: 10px solid transparent; } .box2 { display: block; width: 0; border-bottom: 10px solid red; border-left: 10px solid green; border-top: 10px solid blue; border-right: 10px solid gray; } .outer{ width: 960px; margin: 60px auto; border: 1px solid #222222; background-color: #111; background-image: linear-gradient(#444,#111); /*渐变背景*/ border-radius: 6px; /*圆角*/ box-shadow: 0 1px 1px #777; padding: 0; list-style: none; zoom: 1; /*清除浮动*/ } /*清除浮动终极！！*/ .outer:before, .outer:after { content: ' '; display: table; } .outer:after { clear: both; } .outer li { float: left; border-right: 1px solid #222; box-shadow: 1px 0 0 #444; position: relative; } .outer li a { float: left; padding: 12px 30px; color: #999; font-weight: bold; font-size: 12px; text-decoration: none; text-shadow: 0 1px 0 #000; /*水平距离，垂直距离，模糊距离，颜色*/ } .outer li a:hover { color: #fafafa; } .outer li ul{ visibility: hidden; position: absolute; top: 38px; left: 0; z-index: 1; padding: 0; background-color: #444; background-image: linear-gradient(#444,#111); box-shadow: 0 -1px 0 rgba(255,255,255,.3); border-radius: 3px; opacity: 0; /*透明度*/ margin: 20px 0 0 0; transition: all .2s ease-in-out; _margin:0; } .outer li:hover > ul { opacity: 1; visibility: visible; margin: 0; } .outer ul li { float: none; display: block; border: 0; box-shadow: 0 1px 0 #111, 0 2px 0 #666; /*两个阴影叠加形成分割线的效果*/ } .outer ul a { padding: 10px; width: 130px; display: block; float: none; _height: 10px; } .outer ul a:hover { background-color: #0186ba; background-image: linear-gradient(#04acec, #0186ba); } .outer ul li:first-child > a { border-radius: 3px 3px 0 0; } .outer ul li:last-child > a { border-radius: 0 0 3px 3px; } .outer ul li:first-child > a:before { content: ''; position: absolute; left: 40px; top: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #444; } .outer ul li:first-child > a:hover:before { border-bottom-color: #04acec; } .outer ul ul { top: 0; left: 150px; margin: 0 0 0 20px; box-shadow: -1px 0 0 rgba(255,255,255,.3); _margin:0; } .outer ul ul li:first-child a:before{ left: -6px; top: 50%; margin-top: -6px; border-left: 0; border-bottom: 6px solid transparent; border-top: 6px solid transparent; border-right: 6px solid transparent; } .outer ul ul li:first-child a:hover:before{ border-bottom-color: transparent; border-right-color: #0299d3; } </style></head><body><!--CSS3实现菜单圆角：border-radius--><!--CSS3实现渐变背景：linear-gradient--><!--CSS3实现阴影：box-shadow--><!--CSS3实现透明：transition--><!--CSS3实现尖角：before--><ul class="outer"> <li><a href="#">START</a></li> <li><a href="#">First</a> <ul> <li><a href="#">第一章</a> <ul> <li><a href="#">第一节</a></li> <li><a href="#">第二节</a></li> <li><a href="#">第三节</a></li> <li><a href="#">第四节</a></li> </ul> </li> <li><a href="#">第二章</a></li> <li><a href="#">第三章</a></li> <li><a href="#">第四章</a></li> </ul> </li> <li><a href="#">Second</a> <ul> <li><a href="#">第一章</a></li> <li><a href="#">第二章</a></li> <li><a href="#">第三章</a></li> <li><a href="#">第四章</a></li> </ul> </li> <li><a href="#">Third</a> <ul> <li><a href="#">第一章</a></li> <li><a href="#">第二章</a></li> <li><a href="#">第三章</a></li> <li><a href="#">第四章</a></li> </ul> </li> <li><a href="#">Forth</a> <ul> <li><a href="#">第一章</a></li> <li><a href="#">第二章</a></li> <li><a href="#">第三章</a></li> <li><a href="#">第四章</a></li> </ul> </li> <li><a href="#">Fifth</a> <ul> <li><a href="#">第一章</a></li> <li><a href="#">第二章</a></li> <li><a href="#">第三章</a></li> <li><a href="#">第四章</a></li> </ul> </li> <li><a href="#">Sixth</a> <ul> <li><a href="#">第一章</a></li> <li><a href="#">第二章</a></li> <li><a href="#">第三章</a></li> <li><a href="#">第四章</a></li> </ul> </li></ul><div class="box"></div><div class="box2"></div></body></html> 0 0
- 下拉菜单思路及实现
- 用js实现tab菜单及下拉菜单
- CSS实现下拉菜单
- 实现下拉菜单
- Popupwindow实现下拉菜单
- js实现下拉菜单
- Android_Spinner实现下拉菜单
- popwindow实现下拉菜单
- 时间下拉菜单实现
- iphone 实现下拉菜单
- android 实现下拉菜单
- iphone 实现下拉菜单
- iphone 实现下拉菜单
- 实现下拉菜单
- CSS实现下拉菜单
- jquery 实现下拉菜单
- iOS实现下拉菜单
- IOS 实现下拉菜单
- 手机号码正则校验
- 1282.回文数猜想
- 红外解码数码管显示
- AS断点调试与高级调试（二）
- 习题3-3 数数字
- 下拉菜单思路及实现
- 《peopleware》摘抄（二）
- BFS 走迷宫
- Android UI 开发
- 【Leetcode题解】258.Add Digits
- 【Android develop】【学习笔记005】打开另一个activity
- 258. Add Digits
- cocos2d
- poj 2524 Ubiquitous Religions
