使用CSS制作垂直导航菜单的简易方法

作为一个成功的网站，导航菜单是永远不可缺少的。导航菜单的风格往往也决定了整个网站的风格，因此很多设计者都会投入很多时间和精力来制作各式各样的导航条，从而体现网站的整体构架。在传统方式下，制作导航菜单是很麻烦的工作。需要使用表格，设置复杂的属性，还需要使用JavaScript实现相应鼠标指针经过或点击动作。如果用CSS来制作导航菜单，实现起来就非常简单了。

建立HTML结构

首先建立HTML相关结构，将菜单的各个项用项目列表`

`表示，同时设置页面的背景颜色，代码如下：

```html

• Home
• Contact us
• Web Dev
• Web Design
• Map

```

设置CSS样式

然后开始设置CSS样式，为页面的背景色设置浅色，代码如下：

```css

body {

background-color: dee0ff;

}

```

此时页面的效果只是最普通的项目列表。

设定样式属性

1. 设置整个`

`块的宽度为固定150像素，并设置文字的字体。设置项目列表`

`的属性，将项目符号设置为不显示。

```css

navigation {

width: 150px;

font-family: Arial;

font-size: 14px;

text-align: right;

}

navigation ul {

list-style-type: none;

margin: 0px;

padding: 0px;

}

```

通过以上设置后，项目列表使显示为普通的超链接列表。

2. 为`

• `标记添加下边线，以分割各个超链接，并且对超链接``标记进行整体设置。

  ```css

  navigation li {

  border-bottom: 1px solid 9F9FED; /* 添加下划线 */

  }

  navigation li a {

  display: block;

  height: 1em;

  padding: 5px 5px 5px 0.5em;

  text-decoration: none;

  border-left: 12px solid 151571; /* 左边的粗边 */

  border-right: 1px solid 151571; /* 右侧阴影 */

  }

  ```

  通过设定`display: block;`，超链接被设置成块元素，实现鼠标在任何位置激活链接的效果。

  3. 最后设置超链接的样式，以实现动态菜单的效果。

  ```css

  navigation li a:link,

  navigation li a:visited {

  background-color: 1136c1;

  color: FFFFFF;

  }

  navigation li a:hover {

  background-color: 002099; /* 改变背景色 */

  color: ffff00; /* 改变文字颜色 */

  border-left: 12px solid yellow;

  }

  ```

  以上代码中的具体含义都在注释中详细说明了。完成这些设置后，导航菜单制作就完成了，最终的效果如图所示，在不同浏览器中显示效果一致。

  版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。

上一篇   如何轻松去除Word文档中的页眉下横线
下一篇   Word表格小数点位数设置技巧