html5+css3下拉菜单特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 html5+css3下拉菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>html5+css3下拉菜单</title>

  <link rel="stylesheet" href="css/style.css">

  <!--[if lt IE 9]><script src="js/html5.js"></script><![endif]-->
</head>

<body>
  <header>
    <nav>
      <ul>
        <li><a href="http://www.baidu.com/" class="icon home"><span>网页特效</span></a></li>
        <li class="dropdown">
          <a href="http://www.baidu.com/">网页特效</a>
          <ul>
            <li><a href="http://www.baidu.com/">图片特效</a></li>
            <li><a href="http://www.baidu.com/">flash特效</a></li>
            <li><a href="http://www.baidu.com/">导航菜单特效</a></li>
            <li><a href="http://www.baidu.com/">jquery特效</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="http://www.baidu.com/">Music, Games, Film &amp; TV</a>
          <ul class="large">
            <li><a href="http://www.baidu.com">Music</a></li>
            <li><a href="http://www.baidu.com/">MP3 Downloads</a></li>
            <li><a href="http://www.baidu.com/">Film &amp; TV</a></li>
            <li><a href="http://www.baidu.com/">Blu-ray</a></li>
            <li><a href="http://www.baidu.com/">PC &amp; Video Games</a></li>
          </ul>
        </li>
        <li class="active"><a href="http://www.baidu.com/">Electronics</a></li>
        <li><a href="http://www.baidu.com/">Computers &amp; Office</a></li>
      </ul>
    </nav>
  </header>
</body>
</html>

JS代码(html5.js):

/* HTML5 Shiv v3.6.2pre | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed Uncompressed source:https://github.com/aFarkas/html5shiv*/
(function(l,f){
	function m(){
	var a=e.elements;
	return"string"==typeof a?a.split(" "):a}
function i(a){
	var b=n[a[o]];
	b||(b={
}
,h++,a[o]=h,n[h]=b);
	return b}
function p(a,b,c){
	b||(b=f);
	if(g)return b.createElement(a);
	c||(c=i(b));
	b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);
	return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}
function t(a,b){
	if(!b.cache)b.cache={
}
,b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
	a.createElement=function(c){
	return!e.shivMethods?b.createElem(c):p(c,a,b)}
;
	a.createDocumentFragment=Function("h,f","return function(){
	var n=f.cloneNode(),c=n.createElement;
	h.shivMethods&&("+m().join().replace(/\w+/g,function(a){
	b.createElem(a);
	b.frag.createElement(a);
	return'c("'+a+'")'}
)+");
	return n}
")(e,b.frag)}
function q(a){
	a||(a=f);
	var b=i(a);
	if(e.shivCSS&&!j&&!b.hasCSS){
	var c,d=a;
	c=d.createElement("p");
	d=d.getElementsByTagName("head")[0]||d.documentElement;
	c.innerHTML="x<style>article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{
	display:block}
mark{
	background:#FF0;
	color:#000}
</style>";
	c=d.insertBefore(c.lastChild,d.firstChild);
	b.hasCSS=!!c}
g||t(a,b);
	return a}
var k=l.html5||{
}
,s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={
}
,g;
	(function(){
	try{
	var a=f.createElement("a");
	a.innerHTML="<xyz></xyz>";
	j="hidden"in a;
	var b;
	if(!(b=1==a.childNodes.length)){
	f.createElement("a");
	var c=f.createDocumentFragment();
	b="undefined"==typeof c.cloneNode||"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}
g=b}
catch(d){
	g=j=!0}
}
)();
	var e={
	elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",version:"3.6.2pre",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){
	a||(a=f);
	if(g)return a.createDocumentFragment();
	for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;
	d<h;
	d++)c.createElement(e[d]);
	return c}
}
;
	l.html5=e;
	q(f)}
)(this,document);

CSS代码(style.css):

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License:none (public domain)*/
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;}
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;}
/* * Copyright (c) 2012 Thibaut Courouble * http://www.webinterfacelab.com * * Licensed under the MIT License:* http://www.opensource.org/licenses/mit-license.php */
/* ======================================================== Page ===================================================== */
body{background:#ecedef;color:#404040;font-family:'Lucida Grande',Verdana,sans-serif;font-size:13px;font-weight:normal;line-height:20px;}
a{color:#1e7ad3;text-decoration:none;}
a:hover{text-decoration:underline;}
.container,nav > ul{width:680px;margin-left:auto;margin-right:auto;}
/* ======================================================== Header & Navigation ===================================================== */
header{padding-top:60px;background:#404040 url("../img/bg.png") 0 0 repeat;border-bottom:1px solid #dadada;-webkit-box-shadow:0 0 1px rgba(0,0,0,0.04);box-shadow:0 0 1px rgba(0,0,0,0.04);}
nav{height:34px;border-bottom:5px solid #fff;-webkit-box-shadow:inset 0 -2px 1px rgba(0,0,0,0.03);box-shadow:inset 0 -2px 1px rgba(0,0,0,0.03);}
nav > ul > li{float:left;margin-right:3px;}
nav > ul > li > a{display:block;height:34px;line-height:34px;padding:0 20px;color:#fff;font-weight:bold;text-shadow:0 -1px rgba(0,0,0,0.3);border-radius:3px 3px 0 0;background-color:#759aaf;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#9cb6c5),color-stop(100%,#759aaf));background-image:-webkit-linear-gradient(top,#9cb6c5,#759aaf);background-image:-moz-linear-gradient(top,#9cb6c5,#759aaf);background-image:-ms-linear-gradient(top,#9cb6c5,#759aaf);background-image:-o-linear-gradient(top,#9cb6c5,#759aaf);background-image:linear-gradient(top,#9cb6c5,#759aaf);-webkit-box-shadow:inset 0 1px rgba(255,255,255,0.3),inset 0 -2px 2px rgba(0,0,0,0.03),0 2px white,0 0 2px rgba(0,0,0,0.2);box-shadow:inset 0 1px rgba(255,255,255,0.3),inset 0 -2px 2px rgba(0,0,0,0.03),0 2px white,0 0 2px rgba(0,0,0,0.2);}
nav > ul > li > a:hover{text-decoration:none;background-color:#85a6b8;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#afc5d1),color-stop(100%,#85a6b8));background-image:-webkit-linear-gradient(top,#afc5d1,#85a6b8);background-image:-moz-linear-gradient(top,#afc5d1,#85a6b8);background-image:-ms-linear-gradient(top,#afc5d1,#85a6b8);background-image:-o-linear-gradient(top,#afc5d1,#85a6b8);background-image:linear-gradient(top,#afc5d1,#85a6b8);}
nav > ul > li.active > a,nav > ul > li > a:active,nav > ul > li.dropdown:hover > a{background:#fff;color:#404040;text-shadow:none;-webkit-box-shadow:0 2px white,0 0 2px rgba(0,0,0,0.2);box-shadow:0 2px white,0 0 2px rgba(0,0,0,0.2);}
nav a.icon{position:relative;width:40.8px;padding:0;}
nav a.icon span{display:block;text-indent:-1000px;overflow:hidden;position:absolute;top:9px;left:12px;height:16px;width:16px;background-repeat:no-repeat;background-position:0 0;}
nav a.icon.home span{background-image:url("../img/home.png");}
nav .active a.icon span,nav a.icon:active span{background-position:0 -16px;}
.dropdown{position:relative;border-bottom:5px solid #fff;}
.dropdown:hover ul{display:block;}
.dropdown ul{display:none;position:absolute;top:39px;left:-1px;min-width:160px;padding:0 0 5px;background:#fff;border:1px solid #dadada;border-top:0;border-radius:0 0 3px 3px;-webkit-box-shadow:0 0 1px rgba(0,0,0,0.04);box-shadow:0 0 1px rgba(0,0,0,0.04);}
.dropdown ul.large{min-width:200px;}
.dropdown li{display:block;margin:0 18px;overflow:visible;}
.dropdown li + li{border-top:1px solid #eee;}
.dropdown li a{display:block;color:#555;padding:8px 18px;margin:0 -18px;}
.dropdown li a:hover{color:#222;}
/* ======================================================== About ===================================================== */
.about{margin:80px auto;padding:15px 20px;width:300px;text-align:center;color:#777;text-shadow:0 1px rgba(255,255,255,0.7);background:rgba(0,0,0,0.05);border-radius:3px;}
.about a{padding:1px 3px;margin:0 -1px;color:#1c74c8;text-decoration:none;border-radius:2px;}
.about a:hover{color:#fff;text-shadow:0 1px #0063A6;background:#0090D2;}
.links{zoom:1;}
.links:before,.links:after{content:"";display:table;}
.links:after{clear:both;}
.links a{padding:6px 0;float:left;width:50%;font-size:14px;}
.author{margin-top:15px;font-size:11px;}

附件:下载该文件资源,减少时间成本(增值服务)