基于CSS3實(shí)現(xiàn)的漂亮Menu菜單效果代碼
發(fā)布時(shí)間：2015-09-10 15:12:35 作者：佚名 
我要評論
我要評論這篇文章主要為大家介紹了基于CSS3實(shí)現(xiàn)的漂亮Menu菜單效果代碼,采用純css3技術(shù)實(shí)現(xiàn)鼠標(biāo)滑過菜單項(xiàng)底部出現(xiàn)高亮光標(biāo)的效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了基于CSS3實(shí)現(xiàn)的漂亮Menu菜單效果代碼。分享給大家供大家參考。具體如下：
這是一款基于CSS3實(shí)現(xiàn)的漂亮Menu菜單代碼，請注意，ie9以下版本的瀏覽器看不到效果，請使用IE9及火狐以及Chrome等瀏覽器。
四個(gè)圓角的方框整齊橫向排列形成的菜單，當(dāng)把鼠標(biāo)放在任意菜單項(xiàng)的時(shí)候，該菜單項(xiàng)的底部會(huì)出現(xiàn)動(dòng)畫效果，一第向兩端延伸的下劃線，菜單整體挺漂亮的。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/css3-menu-nav-style-codes/
具體代碼如下：
復(fù)制代碼
代碼如下:<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3 技術(shù)實(shí)現(xiàn)的菜單</title>
<style type="text/css">
body{
background:#202020;
font:bold 12px Arial, Helvetica, sans-serif;
margin:0;
padding:0;
min-width:960px;
color:#bbbbbb;
}
a {
text-decoration:none;
color:#fff;
}
h1 {
font: 4em normal Arial, Helvetica, sans-serif;
padding: 20px; margin: 0;
text-align:center;
}
h1 small{
font: 0.2em normal Arial, Helvetica, sans-serif;
text-transform:uppercase; letter-spacing: 0.2em; line-height: 5em;
display: block;
}
header {
padding:0 40px;
margin:0 auto;
position:relative;
width:915px;
height:145px;
}
header nav ul{
list-style:none;
padding-top:50px;
}
header nav li {
position:relative;
float: left;
width:150px;
text-align:center;
padding-top:35px;
padding-bottom:35px;
color:#fff;
margin-right:20px;
border-radius:5px;
background:#161616;
border-bottom:1px solid #333;
border-left:1px solid #000;
border-right:1px solid #333;
border-top:1px solid #000;
cursor:pointer;
}
li:after, li:before {
-moz-transition:width 0.5s ease 0s;
height: 0px;
width: 0px;
position: absolute;
content: ' ';
display: block;
opacity:0;
box-shadow: 0px 0px 5px #00c6ff;
}
li:after {
background: -moz-linear-gradient(left, #0ad, #08b);
top: 84px;
left: 75px;
}
li:before {
background: -moz-linear-gradient(right, #0ad, #08b);
top: 84px;
right:75px;
}
li:hover:after,li:hover:before{
width: 72px;
height: 1px;
opacity:1;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</header>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3 技術(shù)實(shí)現(xiàn)的菜單</title>
<style type="text/css">
body{
background:#202020;
font:bold 12px Arial, Helvetica, sans-serif;
margin:0;
padding:0;
min-width:960px;
color:#bbbbbb;
}
a {
text-decoration:none;
color:#fff;
}
h1 {
font: 4em normal Arial, Helvetica, sans-serif;
padding: 20px; margin: 0;
text-align:center;
}
h1 small{
font: 0.2em normal Arial, Helvetica, sans-serif;
text-transform:uppercase; letter-spacing: 0.2em; line-height: 5em;
display: block;
}
header {
padding:0 40px;
margin:0 auto;
position:relative;
width:915px;
height:145px;
}
header nav ul{
list-style:none;
padding-top:50px;
}
header nav li {
position:relative;
float: left;
width:150px;
text-align:center;
padding-top:35px;
padding-bottom:35px;
color:#fff;
margin-right:20px;
border-radius:5px;
background:#161616;
border-bottom:1px solid #333;
border-left:1px solid #000;
border-right:1px solid #333;
border-top:1px solid #000;
cursor:pointer;
}
li:after, li:before {
-moz-transition:width 0.5s ease 0s;
height: 0px;
width: 0px;
position: absolute;
content: ' ';
display: block;
opacity:0;
box-shadow: 0px 0px 5px #00c6ff;
}
li:after {
background: -moz-linear-gradient(left, #0ad, #08b);
top: 84px;
left: 75px;
}
li:before {
background: -moz-linear-gradient(right, #0ad, #08b);
top: 84px;
right:75px;
}
li:hover:after,li:hover:before{
width: 72px;
height: 1px;
opacity:1;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</header>
</body>
</html>
希望本文所述對大家的css3網(wǎng)頁設(shè)計(jì)有所幫助。
相關(guān)文章
jSlickmenu菜單，CSS3結(jié)合jQuery實(shí)現(xiàn)的圖片導(dǎo)航菜單
jSlickmenu是一款基于jQuery和CSS3技術(shù)相結(jié)合的圖片導(dǎo)航菜單，該菜單的特點(diǎn)是利用旋轉(zhuǎn)和帶陰影的圖片作為導(dǎo)航項(xiàng)，當(dāng)鼠標(biāo)移到導(dǎo)航時(shí)，相應(yīng)的圖片高亮顯示。2012-07-20
基于jQuery的Super slick jQuery menu 圖片菜單 Css3
一個(gè)基于jQuery的圖文菜單——Super slick jQuery menu 圖片菜單 Css3，重點(diǎn)是圖片菜單的鼠標(biāo)效果，在鼠標(biāo)放上的時(shí)候圖片有較大的變化，或是高亮、或是漸變。2011-08-31基于css3的屬性transition制作菜單導(dǎo)航效果
這篇文章主要為大家介紹了基于css3的屬性transition制作菜單導(dǎo)航效果,可實(shí)現(xiàn)鼠標(biāo)滑過菜單項(xiàng)動(dòng)態(tài)改變背景滑塊的功能,基于css3的屬性transition實(shí)現(xiàn),非常具有實(shí)用價(jià)值,需要的2015-09-01CSS3實(shí)現(xiàn)銀灰色動(dòng)畫效果的導(dǎo)航菜單代碼
這篇文章主要為大家介紹了CSS3實(shí)現(xiàn)銀灰色動(dòng)畫效果的導(dǎo)航菜單代碼,采用純css3技術(shù)實(shí)現(xiàn)的導(dǎo)航效果,鼠標(biāo)滑過有背景變換的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-01css3實(shí)現(xiàn)的多級漸變下拉菜單導(dǎo)航效果代碼
這篇文章主要為大家介紹了css3實(shí)現(xiàn)的多級漸變下拉菜單導(dǎo)航效果代碼,通過純css3技術(shù)實(shí)現(xiàn)圓角圖形及漸變按鈕的模擬效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-31CSS3實(shí)現(xiàn)可關(guān)閉的下拉手風(fēng)琴菜單效果
這篇文章主要為大家介紹了CSS3實(shí)現(xiàn)可關(guān)閉的下拉手風(fēng)琴菜單效果,采用純css3技術(shù)實(shí)現(xiàn)了手風(fēng)琴折疊與展開效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-31純CSS3實(shí)現(xiàn)飄逸灑脫帶有飛行效果的三級下拉菜單
這篇文章主要為大家介紹了純CSS3實(shí)現(xiàn)飄逸灑脫帶有飛行效果的三級下拉菜單,鼠標(biāo)滑過可見對應(yīng)菜單項(xiàng)列表漸進(jìn)層疊彈出的效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-27
jQuery+CSS3實(shí)現(xiàn)移動(dòng)手機(jī)菜單特效源碼
jQuery+CSS3移動(dòng)手機(jī)菜單特效源碼是一款鼠標(biāo)點(diǎn)擊側(cè)邊實(shí)現(xiàn)滑動(dòng)展示收縮手機(jī)導(dǎo)航菜單的代碼，歡迎在本站下載2015-08-27
