如何设计多级菜单列表-盈岚科技

如何设计多级菜单列表

2019-09-10 10:43:32
阅读次数：次
作者：盈岚科技小编
来源：http://www.lyjtt.cn

多级下拉菜单在一些企业网站应用非常广泛，它存在使用方便、占用空间小等特点。本节将介绍横网页设计中向导航菜单的二级菜单的制作方法，从而进一步说明列表在制作导航菜单上的应用。

【操作步骤】

第1步，启动Dreamweaver，新建一个网页，保存为index.html。

第2步，构建网页的基本结构。本例中由两层嵌套的<ul>标签定义了二级菜单。

<ul>

<ul>

</ul> </li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</div>

第3步，在<head>标签内添加<styletype="text/css">标签，定义一个内部样式表，然后输入下面样式，定义网页的menu容器样式，并定义一级菜单中列表样式。

.menu {/*menu样式类*/

font-family:"黑体"; /*定义整个menu容器中的字体为黑体*/

width:440px; /*menu容器宽度*/

margin:0; /*定义四周补白为0*/}

.menu ul {/*定义一级菜单中列表样式*/

padding:0; /*一级菜单中列表的内边距为0*/

list-style-type: none; /*不显示项目符号*/}

.menu ul li { float:left; /*使菜单项横向显示*/

position:relative; /*定义一级菜单中列表的定位方式为相对定位*/}

在以上代码中，定义了一级菜单的样式，其中<li>标签中，通过float:left语句使原来竖向显示的列表项横向显示，并用position:relative语句设置其position属性为相对定位。

第4步，设置一级菜单中的<a>标签的样式和<a>标签在已访问过时和鼠标悬停时的样式。

.menu ul li a,

.menu ul li a:visited { /*定义一级菜单中a对象样式及a对象在已访问过时的样式*/

display:block; /*定义为块级元素*/ text-align:center; /*居中对齐*/

text-decoration:none; /*不显示下划线*/

width:104px; /*定义菜单的宽度*/

height:30px; /*高宽*/

color:#fff; /*字体颜色*/ border:1px solid #666; /*定义边框*/

background: #252525; /*背景颜色*/

line-height:30px; /*行间距*/

font-size:14px; /*字体大小*/}

.menu ul li:hover a {/*鼠标悬停时<a>标签样式*/

color:#fff; /*鼠标悬停时改变字体颜色为#fff*/}

在以上代码中，首先定义了a为块级元素，border: 1px solid #fff语句虽然定义了网站建设中菜单项的边框样式，但是由于border-width:1px 1px 0 0的作用，所以在这里只显示上边框和右边框，下边框和左边框由于宽度为0，所以不显示任何效果。在这里值得注意的是，既定义了height:30px，又定义了line-height: 30px，两者的区别在于height定义的是整个a块的高度，而line-height定义的是文字的行高，在这里，line-height还有一个作用就是一行30个像素，文字会相对于这30个像素垂直居中显示。

第5步，设置二级菜单样式。

.menu ul li ul {/*二级菜单中ul样式*/ display: none; /*将二级菜单设置为不显示*/}

.menu ul li:hover ul {/*鼠标划过一级菜单的ul时，二级菜单才显示*/

display:block; /*定义为块级元素 */ position:absolute; /*绝对定位*/

top:31px; /*相对其父标签的位置*/

left:0px; /*相对其父标签的位置*/

width:105px; /*宽度*/}

在以上代码中，首先定义了二级菜单的<ul>标签样式，display:none语句的作用是将其所有内容隐藏，并且使其不再占用文档中的空间；然后定义了一级菜单中<li>标签的伪类，当鼠标经过一级菜单时，二级菜单开始显示，这就实现了我们想要的效果，目前IE6只支持a的伪类，其他标签的伪类不支持。在menu ul li:hover ul中设置了posi-tion:absolute属性，也就是绝对定位，它将脱离原来文档流，以其父标签的原点为原点定位，其定位为top:31px;left:0px，为什么是31px呢，因为其父级标签的height属性为30px，所以，在设计网页时，如果想要在一级菜单下显示，就应该是31px的位置；width:105px，是由于一级菜单的width是104px，加上右边框的1px，正好是105px。

第6步，设置二级菜单的链接样式和鼠标悬停时的效果。

.menu ul li:hover ul li a {/*二级菜单链接样式*/ display:block;

background:#ff4321; /*二级菜单背景色*/ color:#000; /*二级菜单字体颜色*/}

.menu ul li:hover ul li a:hover {/*二级菜单的鼠标悬停样式*/

background:#dfc184; /*二级菜单的鼠标悬停时背景色*/

color:#000; /*二级菜单的鼠标悬停时的字体颜色*/}

在以上代码中，设置了二级菜单的背景色、字体颜色和鼠标悬停时的背景色、字体颜色。