以下是 12款纯CSS3菜单导航特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS-only Menus</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="CSS-only Menus" />
<meta name="keywords" content="beautiful, fancy, menu, navigation, css" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/menu1.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/menu2.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/menu3.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/menu4.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/menu5.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/menu6.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/menu7.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/menu8.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/menu9.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/menu10.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/menu11.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/menu12.css" type="text/css" media="screen"/>
</head>
<body>
<h1 class="title"></h1>
<div class="container">
<h2>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </h2>
<h2>Menu 1</h2>
<div id="menu1">
<ul>
<li><a href="">
<span class="title">About</span>
<span class="text">Who we are</span>
</a>
</li>
<li><a href="">
<span class="title">Portfolio</span>
<span class="text">What we do</span>
</a>
</li>
<li><a href="">
<span class="title">Blog</span>
<span class="text">What we talk about</span>
</a>
</li>
<li><a href="">
<span class="title">Contact</span>
<span class="text">How to get in touch</span>
</a>
</li>
</ul>
</div>
<h2>Menu 2</h2>
<div id="menu2">
<ul>
<li><a href="">
<span class="title">About</span>
<span class="text">Who we are</span>
</a>
</li>
<li><a href="">
<span class="title">Portfolio</span>
<span class="text">What we do</span>
</a>
</li>
<li><a href="">
<span class="title">Blog</span>
<span class="text">What we talk about</span>
</a>
</li>
<li><a href="">
<span class="title">Contact</span>
<span class="text">How to get in touch</span>
</a>
</li>
</ul>
</div>
<h2>Menu 3</h2>
<div id="menu3">
<ul>
<li><a href="">
<span class="title">About</span>
<span class="text">Who we are</span>
</a>
</li>
<li><a href="">
<span class="title">Portfolio</span>
<span class="text">What we do</span>
</a>
</li>
<li><a href="">
<span class="title">Blog</span>
<span class="text">What we talk about</span>
</a>
</li>
<li><a href="">
<span class="title">Contact</span>
<span class="text">How to get in touch</span>
</a>
</li>
</ul>
</div>
<h2>Menu 4</h2>
<div id="menu4">
<ul>
<li><a href="">
<span class="title">About</span>
<span class="text">Who we are</span>
</a>
</li>
<li><a href="">
<span class="title">Portfolio</span>
<span class="text">What we do</span>
</a>
</li>
<li><a href="">
<span class="title">Blog</span>
<span class="text">What we talk about</span>
</a>
</li>
<li><a href="">
<span class="title">Contact</span>
<span class="text">How to get in touch</span>
</a>
</li>
</ul>
</div>
<h2>Menu 5</h2>
<div id="menu5">
<ul>
<li><a href="">
<span class="title">About</span>
<span class="text">Who we are</span>
</a>
</li>
<li><a href="">
<span class="title">Portfolio</span>
<span class="text">What we do</span>
</a>
</li>
<li><a href="">
<span class="title">Blog</span>
<span class="text">What we talk about</span>
</a>
</li>
<li><a href="">
<span class="title">Contact</span>
<span class="text">How to get in touch</span>
</a>
</li>
</ul>
</div>
<h2>Menu 6</h2>
<div id="menu6">
<ul>
<li><a href="">
<span class="title">About</span>
<span class="text">Who we are</span>
</a>
</li>
<li><a href="">
<span class="title">Portfolio</span>
<span class="text">What we do</span>
</a>
</li>
<li><a href="">
<span class="title">Blog</span>
<span class="text">What we talk about</span>
</a>
</li>
<li><a href="">
<span class="title">Contact</span>
<span class="text">How to get in touch</span>
</a>
</li>
</ul>
</div>
<h2>Menu 7</h2>
<div id="menu7">
<ul>
<li><a href="">
<span class="title">About</span>
<span class="text">Who we are</span>
</a>
</li>
<li><a href="">
<span class="title">Portfolio</span>
<span class="text">What we do</span>
</a>
</li>
<li><a href="">
<span class="title">Blog</span>
<span class="text">What we talk about</span>
</a>
</li>
<li><a href="">
<span class="title">Contact</span>
<span class="text">How to get in touch</span>
</a>
</li>
</ul>
</div>
<h2>Menu 8</h2>
<div id="menu8">
<ul>
<li><a href="">
<span class="title">About</span>
<span class="text">Who we are</span>
</a>
</li>
<li><a href="">
<span class="title">Portfolio</span>
<span class="text">What we do</span>
</a>
</li>
<li><a href="">
<span class="title">Blog</span>
<span class="text">What we talk about</span>
</a>
</li>
<li><a href="">
<span class="title">Contact</span>
<span class="text">How to get in touch</span>
</a>
</li>
</ul>
</div>
<h2>Menu 9</h2>
<div id="menu9">
<ul>
<li><a href="">
<span class="title">About</span>
<span class="text">Who we are</span>
</a>
</li>
<li><a href="">
<span class="title">Portfolio</span>
<span class="text">What we do</span>
</a>
</li>
<li><a href="">
<span class="title">Blog</span>
<span class="text">What we talk about</span>
</a>
</li>
<li><a href="">
<span class="title">Contact</span>
<span class="text">How to get in touch</span>
</a>
</li>
</ul>
</div>
<h2>Menu 10</h2>
<div id="menu10">
<ul>
<li><a href="">
<span class="title">About</span>
<span class="text">Who we are</span>
</a>
</li>
<li><a href="">
<span class="title">Portfolio</span>
<span class="text">What we do</span>
</a>
</li>
<li><a href="">
<span class="title">Blog</span>
<span class="text">What we talk about</span>
</a>
</li>
<li><a href="">
<span class="title">Contact</span>
<span class="text">How to get in touch</span>
</a>
</li>
</ul>
</div>
<h2>Menu 11</h2>
<div id="menu11">
<ul>
<li><a href="">
<span class="title">About</span>
<span class="text">Who we are</span>
</a>
</li>
<li><a href="">
<span class="title">Portfolio</span>
<span class="text">What we do</span>
</a>
</li>
<li><a href="">
<span class="title">Blog</span>
<span class="text">What we talk about</span>
</a>
</li>
<li><a href="">
<span class="title">Contact</span>
<span class="text">How to get in touch</span>
</a>
</li>
</ul>
</div>
<h2>Menu 12</h2>
<div id="menu12">
<ul>
<li><a href="">
<span class="title">About</span>
<span class="text">Who we are</span>
</a>
</li>
<li><a href="">
<span class="title">Portfolio</span>
<span class="text">What we do</span>
</a>
</li>
<li><a href="">
<span class="title">Blog</span>
<span class="text">What we talk about</span>
</a>
</li>
<li><a href="">
<span class="title">Contact</span>
<span class="text">How to get in touch</span>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
CSS代码(menu1.css):
#menu1 ul{list-style:none;font-family:Georgia,serif;font-size:20px;font-style:italic;font-weight:normal;letter-spacing:normal;line-height:1.4em;border:2px solid #000;border-left:none;float:left;clear:both;margin:20px;}
#menu1 ul li{float:left;}
#menu1 ul li a{display:block;text-decoration:none;background-color:#444;padding:5px 10px;color:#fff;width:140px;border-right:1px solid #666;border-left:1px solid #000;}
#menu1 ul li a span{display:block;}
#menu1 ul li a span.title{border-bottom:1px solid #444;}
#menu1 ul li a:hover span.title{border-bottom:1px dashed #f0f0f0;color:#ef0000;}
#menu1 ul li a span.text{visibility:hidden;font-size:12px;text-align:right;}
#menu1 ul li a:hover span.text{visibility:visible;}
CSS代码(style.css):
*{margin:0px;padding:0px;}
body{background:#000 url(../images/pattern.jpg) repeat top left;font-family:arial;}
h1.title{width:622px;height:108px;background:transparent url(../images/title.png) no-repeat top left;}
a.back{width:207px;height:44px;background:transparent url(../images/back.png) no-repeat top left;display:block;clear:both;float:left;margin-top:40px;}
.container{width:950px;}
.container h2{float:left;clear:both;margin:30px 10px 10px 10px;width:100%;color:#fff;background-color:#000;padding:10px;}
分享到QQ
分享到微博
微信扫一扫
