创建一个漂亮的CSS3的导航菜单

下载地址

一个网站的导航是最基本的，一个方面的不足或能毁掉一个用户的体验。加载你的菜单和各个图像,CSS3可以做全部的事情。不需要jQuery或JavaScript;不需要启动Photoshop。和让我们看了一个多级菜单,包括图标菜单字体。HTML我们用CSS3制作菜单。菜单是一个简单的无序列表,与嵌套列表，无序列表是包裹在一个HTML5标签内.CSShtml, 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;}

dd: