- CSS jquery制作实现的导航菜单效果,用户交互做的不错,当鼠标放在菜单上时,菜单背景悬停豪华,仔细看,本款菜单的文字还有阴影效果,菜单项的修饰同样有阴影效果,这种阴影让本款菜单的立体感有着很不错的视觉效果。本款菜单适合做网站的一级导航,并没有设计二级子菜单,企业站、公司站比较适合使用。
点击(此处)折叠或打开
-
<html>
- <head>
- <title>导航条效果- www.codesc.net </title>
- <style>
- .navigation{
- position:relative;
- margin:0 auto;
- width:915px;
- }
- ul.menu{
- list-style:none;
- font-family:"微软雅黑";
- border-top:1px solid #bebebe;
- margin:0px;
- padding:0px;
- float:left;
- }
- ul.menu li{
- float:left;
- }
- ul.menu li a{
- text-decoration:none;
- background:#2d83db url(http://www.codesc.net/jscode/demoimg/201602/bgMenu.png) repeat-x top left;
- padding:15px 0px;
- width:128px;
- color:#333333;
- float:left;
- text-shadow: 0 1px 1px #fff;
- text-align:center;
- border-right:1px solid #a1a1a1;
- border-left:1px solid #e8e8e8;
- font-weight:bold;
- font-size:15px;
- -moz-box-shadow: 0 1px 3px #555;
- -webkit-box-shadow: 0 1px 3px #555;
- }
- ul.menu li a.hover{
- background-image:none;
- color:#fff;
- text-shadow: 0 -1px 1px #000;
- }
- ul.menu li a.first{
- -moz-border-radius:0px 0px 0px 10px;
- -webkit-border-bottom-left-radius: 10px;
- border-left:none;
- }
- ul.menu li a.last{
- -moz-border-radius:0px 0px 10px 0px;
- -webkit-border-bottom-right-radius: 10px;
- }
- ul.menu li span{
- width:64px;
- height:64px;
- background-repeat:no-repeat;
- background-color:transparent;
- position:absolute;
- z-index:-1;
- top:80px;
- cursor:pointer;
- }
- </style>
- </head>
- <style>
- body { margin:0px; padding:0px; background-color:#f0f0f0;}
- </style>
- <body>
- <div class="navigation">
- <ul class="menu" id="menu">
- <li><span class="ipod"></span><a href="" class="first">网站源码</a></li>
- <li><span class="video_camera"></span><a href="">CSS特效</a></li>
- <li><span class="television"></span><a href="">菜单模板</a></li>
- <li><span class="monitor"></span><a href="">圆角菜单</a></li>
- <li><span class="toolbox"></span><a href="">菜单代码</a></li>
- <li><span class="telephone"></span><a href="">手机菜单</a></li>
- <li><span class="print"></span><a href="" class="last">菜单动画</a></li>
- </ul>
- </div>
- <script type="text/javascript" src="http://www.codesc.net/ajaxjs/jquery-1.9.1.min.js"></script>
- <script type="text/javascript">
- $(function() {
- var d=1000;
- $('#menu span').each(function(){
- $(this).stop().animate({
- 'top':'-17px'
- },d+=250);
- });
- $('#menu > li').hover(
- function () {
- var $this = $(this);
- $('a',$this).addClass('hover');
- $('span',$this).stop().animate({'top':'40px'},300).css({'zIndex':'10'});
- },
- function () {
- var $this = $(this);
- $('a',$this).removeClass('hover');
- $('span',$this).stop().animate({'top':'-17px'},800).css({'zIndex':'-1'});
- }
- );
- });
- </script>
- </body>
- </html>
引用自原文:http://www.codesc.net/jscss/3332.shtml