页面导航菜单的设计

来源：互联网发布：制作电子音乐的软件编辑：程序博客网时间：2024/05/17 07:51

导航菜单是web页面中一个重要的部分，是整个站点便捷性的体现。一个设计良好的导航既可以方便用户浏览整个网站，同时也是吸引用户眼球的一个亮点。现在的站点设计的第一原则是简洁大方，导航的设计也不例外。下面以一个CSDN站点导航设计为蓝本，结合CSS、jQuery介绍动态主导航菜单设计的几个要点。

以一个二级菜单为例，当进入一级菜单所在页面后，显示相应一级菜单下的二级菜单列表，其他二级菜单为隐藏状态。最终效果如下图所示：

html代码片段：

<body id="serv"> //表示该页面为service页面，用于CSS代码识别突出显示当前的导航菜单

<div id="nav">    <div id="menubar">        <div id="mainmenu">            <ul class="nav">                <li><a href="javascript:void()">Home</a></li>                <li class="prod"><a href="javascript:void()">Products</a>                    <ul>                        <li><a href="software">Software</a></li>                        <li><a href="hardware">Hardware</a></li>                        <li><a href="other">Other</a></li>                    </ul>                </li>                <li  class="serv"><a href="javascript:void()">Service</a>                    <ul>                        <li><a href="jQuery">jQuery</a></li>                        <li><a href="Hadoop">Hadoop</a></li>                        <li><a href="MapReduce">MapReducee</a></li>                    </ul>                </li>                <li><a href="javascript:void()">Contact us</a></li>            </ul>        </div>        <div id="submenu"></div>    </div></div>

上述代码为导航菜单的主要结构，由两层嵌套的列表组成。重点是要给父列表的列表项增加相应的class属性，用于和body元素class属性组合突出显示当前页面的导航菜单。

1、列表浮动

因为导航为水平方向，所以必须使父列表和子列表都水平向左浮动。并设置相应的宽度。

ul.nav li {  //该选择器包含二级列表包含的列表项    float: left;    width: 12em;    line-height: 43px; //使菜单文字垂直居中}

2、子菜单隐藏

在特定的某个页面，只有属于该页面的二级菜单才会显示在页面中，所有其他页面的二级菜单都是不显示的，所以要将其隐藏，待用户导航至相应页面时，再将相应页面的二级菜单取消隐藏。css中可以绝对定位技术可以实现这种要求。

通过将二级菜单的列表进行绝对定位，使其定位到屏幕以外的地方使其实现”隐藏'。

ul.nav li ul {    position: absolute;    left: -999em;}

这样默认情况下，所有二级列表都绝对定位到父列表项左边-999em单位的地方（屏幕以外的地方）。在后面的适当时候再将属于某个页面的二级菜单重现定位，即可使其出现在相应父列表项的下面位置。

3、突出显示当前页

为了突出显示当前页面，需要将属于该页面的二级菜单显示出来，使其处于可选择状态。但是浏览器如何知道当前页面该显示哪个二级菜单呢？可以在页面主体元素如body中增加一个ID或class属性，同时在每个父列表项中增加ID或class属性以形成[body.id li.id]的唯一组合来突出显示当前页面。

#hom .nav li.hom ul,#prod .nav li.prod ul,#serv .nav li.serv ul,#cont .nav li.cont ul //4种组合中每个页面只会有一个选择器被选中{    left:auto; //使浏览器重新自动计算列表的位置。}

4、背景图像及颜色设置

在突出显示当前页面的技术中，除了使二级菜单显示出来之外，还可以通过给列表项替换背景图片，使其更加醒目。

#hom .nav li.hom,#prod .nav li.prod,#serv .nav li.serv,#cont .nav li.cont{    background: url(../img/arrow_nav_drop.gif) no-repeat center 0;}

这样便出现了开始时看见的导航样式了，每个页面的一级菜单通过向下的箭头指向属于该页面的二级菜单。

说明：图中红色上部分高度为38px,下半部分为32px,但是为了能够显示向下箭头指示效果，我们将上面的div高度设为43px(5px为箭头的高度)，下面的高度设为27px.

当鼠标移动到非当前页面的一级菜单时，我们希望能够以不同的背景色突出显示，按照上面的高度比例，会出现下面的效果。背景色超出了红色部分。

原因是css中背景色是覆盖内容区域和内边距的。所以我们可以如下设计代码：

ul.nav>li:hover>a, ul.nav>li:focus>a{    height: 38px;    margin-bottom: 5px;    background-color:#f00;}

在hover、focus时，使其内容高度减小到38px即红色部分的高度，同时也为了确保下面的二级菜单保持原位不动，将外边距设置为5px(43px-38px)。
这样一个简洁大方的导航菜单便完成了。

0 0