主要用到了position 和 transition 属性，对低版本浏览器不兼容。
效果图如下
我们先编写基本的菜单HTML代码。
| 代码如下 | 复制代码 |
|
<nav> <ul> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Work</a></li> <li><a href="">Contact</a></li> </ul> </nav> |
|
首先清除body元素默认的样式，给网页添加一个橙色的背景。
| 代码如下 | 复制代码 |
|
body{ margin: 0px; padding: 0px; background: #e74c3c; font-family: 'Lato', sans-serif; } |
|
定位菜单的显示位置，这里设置菜单居中显示在网页中。
| 代码如下 | 复制代码 |
|
nav{ float: none; clear: both; width: 30%; margin: 10% auto; background: #eee; } |
|
给菜单的子元素设置样式。
| 代码如下 | 复制代码 |
|
nav ul { list-style: none; margin: 0px; padding: 0px; } nav li{ float: none; width: 100%; } nav li a{ display: block; width: 100%; padding: 20px; border-left: 5px solid; position: relative; z-index: 2; text-decoration: none; color: #444; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } |
|
给不同的菜单项设置不同的左侧边框
| 代码如下 | 复制代码 |
|
nav li a:hover{ border-bottom: 0px; color: #fff;} nav li:first-child a{ border-left: 10px solid #3498db; } nav li:nth-child(2) a{ border-left: 10px solid #ffd071; } nav li:nth-child(3) a{ border-left: 10px solid #f0776c; } nav li:last-child a{ border-left: 10px solid #1abc9c; } |
|
设置鼠标滑动到菜单项目上的动画效果
| 代码如下 | 复制代码 |
|
nav li a:after { content: ""; height: 100%; left: 0; top: 0; width: 0px; position: absolute; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; z-index: -1; } nav li a:hover:after{ width: 100%; } nav li:first-child a:after{ background: #3498db; } nav li:nth-child(2) a:after{ background: #ffd071; } nav li:nth-child(3) a:after{ background: #f0776c; } nav li:last-child a:after{ background: #1abc9c; } |
|
讲到了不兼容低版本浏览器了，所以目前暂时还不是非常的好用哦，在很多浏览器中是看不到效果的。
时间： 2024-09-20 07:55:57