一：导航
网站导航栏是网站导航的第一层导航结构，我们可以使用HTML和jQuery来创建类似flash的动画效果
一：下拉式菜单
法一：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #bigdiv{ position:relative; text-align:left; width:450px;} #header{ height:50px; color:#3FC;} #menu{ position:absolute; height:50px; top:0; right:0;} #menu ,#menu ul { padding:0px; margin:0px; list-style:none;} #menu,#menu li{ float:left; background-color:#3F6; border-right:1px solid #CF6;} #menu a{ display:block; padding:5px; color:#FFF; width:80px;} #menu li ul { position:absolute; left:auto; width:80px;} .active{ background-color:#F90;} </style> <script src="jquery-3.1.1.js"></script> <script type="text/javascript"> $(document).ready(function(e) { $('#menu li ul').hide(); $('#menu li').hover( function(){ $(this).find('ul').slideDown('fast'); $(this).find('a:first').addClass('active'); },function(){ $(this).find('.ull').fadeOut('fast'); $(this).find('a').removeClass("active"); }); }); </script> </head> <body> <div id="bigdiv"> <div id="header"> <h1>下拉菜单</h1><hr /> </div> <div id="content"> <ul id="menu"> <li> <a href="#">年级</a> <ul class="ull"> <li><a href="#">一年级</a></li> <li><a href="#">二年级</a></li> <li><a href="#">三年级</a></li> </ul> </li> <li> <a href="#">专业</a> <ul class="ull"> <li><a href="#">计算机</a></li> <li><a href="#">会计</a></li> <li><a href="#">护士</a></li> </ul> </li> <li> <a href="#">扩展</a> <ul class="ull"> <li><a href="#">扩展一</a></li> <li><a href="#">扩展二</a></li> <li><a href="#">扩展三</a></li> </ul> </li> </ul> </div> </div> </body> </html>
法二：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>下拉菜单</title> <style type="text/css"> #container { position:relative; text-align:left; width:450px; } #header h1 { height:45px;color:#00ff90; } #content { padding:0 15px 10px 15px ; } #nav li { text-align:center; float:left;list-style-type:none; height:20px; width:60px; padding:3px; border-right:1px solid #fff; background-color:#00ff90; background-position:center 30px;background-repeat:no-repeat; display:block; } #nav ul { padding:0px; margin:0px; } #li1, #li2, #li3 { position:relative; z-index:100; display:block; } .navs { display:none; position:absolute; } </style> <script type="text/javascript" src="jquery-3.1.1.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#li1").mouseover(function () { $("#div1").show() }) $("#li1").mouseout(function () { $("#div1").hide() }) $("#li2").mouseover(function () { $("#div2").show() }) $("#li2").mouseout(function () { $("#div2").hide() }) $("#li3").mouseover(function () { $("#div3").show() }) $("#li3").mouseout(function () { $("#div3").hide() }) }); </script> <!-- 设置了太多id而且代码也不简洁，希望能简化算法来实现，我想可以在移动到每一个li上的 时候为其下面的div添加一个class，通过这个class能实现下拉的效果。不知道能不能成--> </head> <body> <div id="container"> <div id="header"> <h1>网站导航</h1> </div> <div id="content"> <div id="nav"> <ul> <li id="li1"><span>主页</span> <div id="div1" class="navs"> <a href="#">主页1</a> <a href="#">主页2</a> <a href="#">主页3</a> <a href="#">主页4</a> </div> </li> <li id="li2"><span>目录</span> <div id="div2" class="navs"> <a href="#">目录1</a> <a href="#">目录2</a> <a href="#">目录3</a> <a href="#">目录4</a> </div> </li> <li id="li3"><span>分类</span> <div id="div3" class="navs"> <a href="#">分类1</a> <a href="#">分类2</a> <a href="#">分类3</a> <a href="#">分类4</a> </div> </li> <li><span>购物车</span> </li> </ul> </div> </div> <br /> <p>这是一个下拉菜单,这是一段很low的代码我知道，如果你看到这儿，你要是有什么好建议，希望能联系我，做个朋友嘛</p> </div> </body> </html>
二：可折叠菜单
可折叠的菜单的HTML结构与下拉式菜单的HTML结构大致相同，只是li标签没有使用float属性值left，所以是垂直显示的。
因为菜单是单击显示，在单击就隐藏菜单选项，所以不使用hover事件处理，而是使用toggle事件来处理。
三：手风琴菜单
二：标签页
jQuery也可以创建标签页用户界面，例如：网站主页切换显示主题的用户界面。