一个网站的导航是最基本的，一个方面的不足或能毁掉一个用户的体验。加载你的菜单和各个图像,CSS3可以做全部的事情。
不需要jQuery或JavaScript;不需要启动Photoshop。和让我们看了一个多级菜单,包括图标菜单字体。
HTML
我们用CSS3制作菜单。
菜单是一个简单的无序列表,与嵌套列表，无序列表是包裹在一个HTML5标签内.
CSS
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
background: url('img/denim.png');
font-family: 'Droid Sans', sans-serif;;
}
.clearfix {
clear: both;
}
.wrap {
width: 940px;
margin: 4em auto;
}
现在,我们将开始菜单样式。首先,我们用顶级导航来创建一个非常基本的框架。
nav {
padding: 0 10px;
position: relative;
}
.menu li {
float: left;
position: relative;
}
.menu li a {
color: #444;
display: block;
font-size: 14px;
line-height: 20px;
padding: 6px 12px;
margin: 8px 8px;
vertical-align: middle;
text-decoration: none;
}
.menu li a:hover {
color: #222;
}
嵌套的无序列表下拉菜单,再一次基本的CSS。
/* Dropdown styles */
.menu ul {
position: absolute;
left: -9999px;
list-style: none;
}
.menu ul li {
float: none;
}
.menu ul a {
white-space: nowrap;
}
/* Displays the dropdown on hover and moves back into position */
.menu li:hover ul {
left: 5px;
}
/* Persistent Hover State */
.menu li:hover a {
color: #222;
}
.menu li:hover ul a {
background: none;
}
.menu li:hover ul li a:hover {
}
现在去有趣的部分。CSS3规范引入了很多有趣和令人兴奋的工具，web设计人员和开发人员利用现代web浏览器。当然,并不是所有的浏览器都支持所有的CSS3规格,但很多规格降低优雅而不失设计。
注意:对于本教程,我使用Lea Verou强大的(2 kb)-prefix-free.js脚本。如果你还没有使用过它,你使用CSS3,帮自己一个忙,看看吧。它使用一些先进的CSS3声明和添加适当的特定的前缀,以确保浏览器兼容性。它使代码更加清晰,使本教程更容易理解。
让我们添加一些CSS3导航栏,顶级无序列表和列表项。
nav {
background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#ccc));
background-image: linear-gradient(#fff, #ccc);
border-radius: 6px;
box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.4);
padding: 0 10px;
position: relative;
}
.menu li a:hover {
background: -webkit-gradient(linear, center top, center bottom, from(#ededed), to(#fff));
background-image: linear-gradient(#ededed, #fff);
border-radius: 12px;
box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);
color: #222;
}
首先在导航栏上面的代码。我们添加一个线性渐变从白色到浅灰色，导航栏6px边界半径。
悬停状态:我们添加一个相反的线性渐变,以及一些圆角,和一个插入框阴影,给我们链接theappearancethat菜单项到导航栏。总的来说,一个非常干净的外观。悬停状态之前,我想重温一些HTML与一些CSS3。我使用一个大图标字体称为标志性的一些随机,isembeddedwith CSS3 @font-face属性,然后使用span标记菜单项。一旦你下载,你可以从CSS问题代码的zip文件,以及复制的字体文件。如果你改变相对路径,记住改变@font-face src。
@font-face {
font-family: 'IconicStroke';
src: url("fonts/iconic/iconic_stroke.eot");
src: local('IconicStroke'),
url("fonts/iconic/iconic_stroke.svg#iconic") format('svg'),
url("fonts/iconic/iconic_stroke.otf") format('opentype');
}
.iconic {
color:inherit;
font-family: "IconicStroke";
font-size: 38px;
line-height: 20px;
vertical-align: middle;
}
很明显,上面的代码仅更新顶级导航,通过添加一个span标记类标志性和适当的图标。现在已经完成,我们将做最后的样式下拉菜单项,加入一些新的CSS3属性如透明度和过渡。首先,。菜单ul:
.menu ul {
position: absolute;
left: -9999px;
list-style: none;
opacity: 0;
transition: opacity 1s ease;
}
两大属性来评估这是透明度和过渡声明。不透明度设置为0,过渡将下拉菜单从0到1的不透明的透明度在1秒。现在让我们做悬停状态。
.menu li:hover ul {
background: rgba(255,255,255,0.7);
border-radius: 0 0 6px 6px;
box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4);
left: 5px;
opacity: 1;
}
