昨天在做一个网站的左栏菜单的时候,突然想到,看了那么多创意的CSS3导航、菜单,何不自己动手做一个纯CSS3菜单呢?于是捣鼓了一下把想法给实现了,虽然说是比较老掉牙的一个创意,不过顺便也算是锻炼了一下CSS水平。
先看看网页里的最终效果:
那么,教程开始了!
Step1
首先,一个菜单的结构如下:
<div class="wrapper">
<ul id="menu">
<li><a href="javascript:void(0);">菜单1</a></li>
<li><a href="javascript:void(0);">菜单2</a></li>
<li><a href="javascript:void(0);">菜单3</a></li>
<li><a href="javascript:void(0);">菜单4</a></li>
<li><a href="javascript:void(0);">菜单5</a></li>
</ul>
</div>
当然,未经过CSS美化的效果相当之差,我们来开始加工——
Step2
加上该加上的,去掉该去掉的。该上色的上色,该加宽度的加宽度,该重置的重置(css reset)。
- body颜色:#ddd
- wrapper颜色:#eee
- menu颜色:#0764a1
- 链接颜色:#cde0ec
虽然颜色也有了形状也有了但仍很是单调,因此——
Step3
加上光影圆角细节:
- 菜单左上圆角:10px
- 菜单右下圆角:10px
- 菜单左边框颜色:#0982bd
- 菜单上边框颜色:#0982bd
- 菜单下边框颜色:#054685
- 菜单阴影:3px 5px 5px rgba(0,0,0,0.5)
- wrapper阴影:0 0 10px #222222
虽然菜单已经成型了,但怎么说都谈不上“创意”二字,作为一个追求完美的前端发烧友,自然不能止步于此——
Step4
通过margin负值来实现菜单与wrapper错开:
- menu左端外边距:-20px
但似乎还是少了点什么?没错,就是小小的三角形折页——
Step5
如何用DIV+CSS实现三角形呢?可以利用border来实现,具体原理可参见张鑫旭的《CSS border三角、圆角图形生成技术简介》一文。
- 翻折三角形颜色:#054685
- 边框大小:12px 20px
- 左端外边距:-40px(利用右边框实现多浏览器兼容三角形,因此整个DIV都应该在wrapper外,即为上面20px的两倍)
- 顶端外边距:-12px(与上面边框大小中12px对应)
整个折页菜单的效果就出来了,但为了用户体验,还应该给菜单加上交互效果——
Step6
为菜单的鼠标经过及按下加上交互效果:
- 鼠标经过菜单颜色:#05528f
- 鼠标经过菜单上边框颜色:#066fae
- 鼠标经过菜单下边框颜色:#033772
- 鼠标按下菜单颜色:#033f7e
- 鼠标按下菜单上边框颜色:#045ca0
- 鼠标按下菜单下边框颜色:#02275f
这里还为菜单加大了左端内边距,当然你也可以加上其它CSS3效果:
如图是加上左端外边距和放大1.05倍的效果。
Finally
最后当然是给出代码和Demo了:
CSS部分:
body{
margin:0;
background:#ddd;
}
.wrapper{
width:960px;
height:800px;
margin:0 auto;
position:relative;
background:#eee;
-moz-box-shadow:0 0 10px #222222;
-khtml-box-shadow:0 0 10px #222222;
-webkit-box-shadow:0 0 10px #222222;
box-shadow:0 0 10px #222222;
}
#menu{
margin: 0;
padding:0;
list-style:none;
margin-top:150px;
margin-left:-20px;
display:inline-block;
position:relative;
z-index:100;
}
#menu a{
*zoom:1;
width:120px;
display:block;
font-size:14px;
color: #cde0ec;
line-height:45px;
padding-left:40px;
background:#0764a1;
text-decoration:none;
border-left:1px solid #0982bd;
border-top:1px solid #0982bd;
border-bottom:1px solid #054685;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-moz-box-shadow:3px 5px 5px rgba(0,0,0,0.5);
-khtml-box-shadow:3px 5px 5px rgba(0,0,0,0.5);
-webkit-box-shadow:3px 5px 5px rgba(0,0,0,0.5);
box-shadow:3px 5px 5px rgba(0,0,0,0.5);
}
#menu li:first-child a{
border-top-right-radius:10px;
}
#menu li:last-child a{
border-bottom-right-radius:10px;
}
#menu a:hover{
padding-left:55px;
padding-left:40px\0;
*padding-left:40px;
background:#05528f;
border-top:1px solid #066fae;
border-bottom:1px solid #033772;
-webkit-transform-origin:0;
-moz-transform-origin:0;
-o-transform-origin:0;
-moz-box-shadow:0 5px 5px rgba(0,0,0,0.5);
-khtml-box-shadow:0 5px 5px rgba(0,0,0,0.5);
-webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.5);
box-shadow:5px 5px 5px rgba(0,0,0,0.5);
}
#menu a:active{
background:#033f7e;
border-top:1px solid #045ca0;
border-bottom:1px solid #02275f;
}
.triangle{
width:0;
height:0;
position:relative;
margin-top:-12px;
_margin-top:-30px;
margin-left:-40px;
border-color:transparent #054685 transparent transparent;
border-style:dashed solid dashed dashed;
border-width:12px 20px;
}
HTML部分:
<div class="wrapper">
<ul id="menu">
<li><a href="javascript:void(0);">菜单1</a></li>
<li><a href="javascript:void(0);">菜单2</a></li>
<li><a href="javascript:void(0);">菜单3</a></li>
<li><a href="javascript:void(0);">菜单4</a></li>
<li><a href="javascript:void(0);">菜单5</a></li>
</ul>
<div class="triangle"></div>
</div>
=======================签 名 档=======================
原文地址(我的博客):http://www.clanfei.com/2012/05/1255.html
欢迎访问交流,至于我为什么要多弄一个博客,因为我热爱前端,热爱网页,我更希望有一个更加自由、真正属于我自己的小站,或许并不是那么有名气,但至少能够让我为了它而加倍努力。。
=======================签 名 档=======================