制作一个导航菜单
一.最简单的导航菜单
1.菜单原理
在制作之前,先介绍制作菜单的原理如下。
制作导航菜单其实很简单,使用的元素是ul和li元素。菜单中,每个导航元素都是放在li元素中,设定li的宽度和高度,用浮动属性使li横向排列。然后对菜单进行修饰。(如果要使用背景图片的方式显示菜单前的修饰图片,应该控制内容部分的位置,让背景图片显示出来。)
2.编写代码
结构部分
- <div id="menu">
- <ul id="nav">
- <li><a href="#">首页</a></li>
- <li><a href="#">留言</a></li>
- <li><a href="#">关于</a></li>
- <li><a href="#">联系</a></li>
- </ul>
- </div>
表现部分
- * {
- margin:0;
- padding:0;
- }
- body {
- font-family:Verdana, Arial, Helvetica, sans-serif;
- font-size:11px;
- background:#fff;
- }
- #menu {
- }
- #nav {
- margin:50px;
- list-style:none;
- }
- #nav li {
- float:left; /*用浮动属性使li横向排列*/
- width:100px;
- height:50px;
- }
- #nav li a { /*制作链接样式*/
- display:block;
- padding:10px 20px;
- background:#999;
- border:1px solid #000;
- color:#fff;
- text-decoration:none;
- text-align:center;
- }
- #nav li a:hover { /*制作鼠标悬停效果*/
- color:#000;
- background:#FFF;
- }
效果如图所示:

二.复杂导航菜单:下拉菜单的制作
1. 下拉菜单的原理
所使用的原理很简单。首先,使用绝对定位,将需要隐藏的菜单移出屏幕的可视范围。然后,在鼠标悬停时调用新的定位值,使原来移出的部分再显示出来。
因为要调用不同的样式文件,所以要使用到脚本语言完成这部分功能。也就是说,首先定义好显示和隐藏的样式,然后使用脚本,实现不同样式的调用。
2. 结构部分
菜单结构部分,主要是显示的菜单和隐藏的菜单组成。采用嵌套ul的方法,将需要隐藏的菜单,制作成主要导航菜单的子菜单。其具体的结构代码如下:
- <div class="main">
- <div class="menucontent">
- <ul id="nav">
- <li style="left: auto;"><a href="#">导航栏目1</a>
- <ul>
- <li><a href="#">子栏目1</a></li>
- <li><a href="#">子栏目2</a></li>
- <li><a href="#">子栏目3</a></li>
- </ul>
- </li>
- <li><a href="#">导航栏目2</a>
- <ul>
- <li><a href="#">子栏目1</a></li>
- <li><a href="#">子栏目2</a></li>
- <li><a href="#">子栏目3</a></li>
- </ul>
- </li>
- <li><a href="#">导航栏目3</a>
- <ul>
- <li><a href="#">子栏目1</a></li>
- <li><a href="#">子栏目2</a></li>
- <li><a href="#">子栏目3</a></li>
- </ul>
- </li>
- </ul>
- </div>
- </div>
3 表现部分
3.1编写主导航部分的样式
- .main{
- width:450px;
- height:auto !important;
- height:auto;
- border:1px solid #666666;
- margin:100px auto;
- background:#ffffff;
- padding:20px;
- font-size:18px;
- font-family:"宋体";}
- .menucontent{
- width:310px;
- margin:0 auto;}
- ul{
- margin:0;
- padding:0;}
- #nav{
- border-right:1px solid #666666;
- height:24px;
- width:303px;}
- #nav li{
- float:left;
- width:100px;
- height:24px;
- list-style:none;
- border-top:1px solid #666666;/*这里只定义3个方向的边框目的是配合ul的边框制作矩形框*/
- border-left:1px solid #666666;
- border-bottom:1px solid #666666;
- background:#cccccc;}
- #nav a {
- display: block; /*用来显示链接的背景*/
- font-size:12px;
- text-align:center;
- line-height:24px;
- color:#000000;
- font-weight:bold;
- text-decoration:none;}
说明:样式中,首先定义menucontent的属性,使其水平居中显示。然后定义ul的补白和边界值为0,目的是取消ul元素的默认的边界和补白。接下来,定义nav的宽度含有的每个li的宽度和边线,目的是分清每个导航元素。最后定义菜单的链接属性,替代原来的默认显示方式(注意其中定义的display属性,目的是制作鼠标悬停时的背景转换效果)。
3.2编写子栏目的样式
- #nav li ul li{
- width:99px;
- height:24px;
- background:#eeeeee;
- border-bottom:#cccccc 1px solid;
- border-left:#cccccc 1px solid;
- border-right:#cccccc 1px solid;}
- #nav li ul li a{
- font-size:12px;
- color:#333333;}
- #nav li ul li a:hover{
- background:#333333;
- color:#ffffff;}
3.3隐藏子栏目
- #nav li ul {
- position: absolute;
- left: -999px;
- }
说明:使用决定定位属性将子栏目隐藏。因为要隐藏子栏目,所以隐藏的属性应该添加在子栏目所在的ul里。
该样式用一个很大的负值,将子菜单移出屏幕的显示范围。
3.4制作显示效果的样式
- #nav li.sfhover ul {
- left: auto}
说明:制作隐藏效果后,还要做一种能够显示子菜单的样式,目的是当某个子菜单调用该样式时,可以显示出菜单的内容。
当某个子菜单使用该样式后,则使用auto值代替原有的-999像素,这样原本隐藏的菜单就会重新出现了。
4:行为层:使用的脚本代码
link_down.js
- sfHover = function() {
- var sfEls = document.getElementById("nav").getElementsByTagName("LI");
- for (var i=0; i
- sfEls[i].onmouseover=function() {
- this.className+=" sfhover";
- }
- sfEls[i].onmouseout=function() {
- this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
- }
- }
- }
- if (window.attachEvent) window.attachEvent("onload", sfHover);
说明:该导航中调用不同样式的脚本。这段脚本的主要作用是,使用循环语句找到页面代码中的第一层分类菜单所在的位置。然后当鼠标悬停状态时,在li中添加一个名称为sfHover的类。由于此时的li使用了sfHover类,根据不同选择符之间的关系,子菜单将使用类sfHover中定义的属性。所以隐藏的菜单就重新出现了。
最后的效果如图所示:










[回复]
Thanks for your support!
回头一定上你那逛逛去 呵呵
[回复]
呵呵 不错的教程
我把你的链接加上了 呵呵
[回复]