最新消息:

CSS创建导航菜单

CSS 大步 769浏览 0评论

1.创建垂直导航按钮

开始的vertiacal.html:

1.1设置ul,li的样式:

但是我们发现<a>标签的高度和宽度只是文字内容的高度和宽度,而且上下间隔太窄了,所以我们需要修改下,让<a>标签的高度和宽度都统一(这里使用相对单位 :em),而不是由文字的长度来决定。如下:

1.2.设置链接的样式

 1.3设置按钮鼠标悬停的效果

1.4设置最后一个按钮的效果

2.创建水平导航菜单

开始的horizontal.html:

2.1设置ul,li的样式:

注意,要为html中的<nav>添加 class ,如下:
以清除浮动的影响。

2.2 设置鼠标悬停的效果

2.3设置当前导航的样式

3.下拉按钮(Dropdown Menus)

dropdown.html:

3.1设置样式

3.2设置下拉隐藏等

当出表没有悬停到父按钮时,下拉菜单自动隐藏:

鼠标悬停在父按钮上:

因为已经可以自动隐藏下拉菜单了,所以可以将html中被注释的下拉菜单的注释去掉了:

3.3给下拉菜单添加动画效果

 

下载demo

 

来自为知笔记(Wiz)

 

转载请注明:大步's Blog » CSS创建导航菜单

SiteMap