jQuery 水墨背景菜单导航条

适合艺术类网站的菜单栏，鼠标悬停有左右、上下扫描变亮动效。

@charset "utf-8";
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
html{background:#d5bd89 url(/uploads/150201/bgHtml.jpg) repeat }
body{background:url(/uploads/150201/bgBody.png) no-repeat top center; min-height:450px; }
.demo{width:960px;margin:0 auto;padding-top:130px;_height:500px;}

/* nav */
.nav{height:80px;overflow:hidden;}
.nav ul li{display:inline-block;position:relative;float:left;margin:0 6px 20px 0;}
.nav ul li a{background:url(/uploads/150201/bgNav.png) no-repeat;text-indent:-9999px;height:80px;width:155px;text-align:center;display:block;position:relative;float:left;}
.nav ul li a span{background:url(/uploads/150201/bgNav.png) no-repeat;display:none;position:absolute;left:0;top:0;height:80px;width:155px;}
.nav .last{margin-right:0;}

#nHom{background-position:0 0 }
#nAbo{background-position:-155px 0px }
#nPro{background-position:-310px 0px }
#nNew{background-position:-465px -80px }
#nSer{background-position:-620px -80px }
#nCon{background-position:-775px 0px }

#nHom span{background-position:0 -80px }
#nAbo span{background-position:-155px -80px }
#nPro span{background-position:-310px -80px }
#nNew span{background-position:-465px 0px; display:block }
#nSer span{background-position:-620px 0px; display:block }
#nCon span{background-position:-775px -80px }

/* Hover States */
.cssOnly #nHom:hover{background-position:0 -80px }
.cssOnly #nAbo:hover{background-position:-155px -80px }
.cssOnly #nPro:hover{background-position:-310px -80px }
.cssOnly #nNew span:hover{background-position:-465px -80px }
.cssOnly #nSer span:hover{background-position:-620px -80px }
.cssOnly #nCon:hover{background-position:-775px -80px }
/* Active State */
.active #nHom{background-position:0 -160px }

HTML

适合艺术类网站的菜单栏，鼠标悬停有左右、上下扫描变亮动效。

menu

编辑器支持Emmet

快捷键

适合艺术类网站的菜单栏，鼠标悬停有左右、上下扫描变亮动效。

menu

TweenMax.js 六边形博客导航菜单模板

使用CSS3 :focus-within实现的屏幕外导航菜单

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：