jQuery实现Meizu魅族官方网站的导航菜单效果

前端技术 2023/09/09 JavaScript

本文实例讲述了jQuery实现Meizu魅族官方网站的导航菜单效果。分享给大家供大家参考。具体如下：

偶尔看到魅族官方网站，发现网站的导航菜单的效果很不错就扣下来，俩字：给力。鼠标放到菜单上，菜单的下边会有一条横线在滑动。一直想找类似的效果学一下。结果，不是忘记有类似效果的网站的网址，就是压根儿找不到。。又不知道怎么描述，今天总算碰到了，真给力。

运行效果截图如下：

在线演示地址如下：

http://demo.phpstudy.net/js/2015/jquery-meizu-web-nav-menu-style-codes/

具体代码如下：

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"
\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<title>Meizu魅族导航菜单</title>
<script type=\"text/javascript\" src=\"jquery1.3.2.js\"></script>
<style>
div,h1,h2,h3,h4,p,form,label,input,textarea,img,span{margin:0;padding:0;}ul,li{list-style:none;padding:0;margin:0;}img{border:none;}
.csc_top{background:url(images/shopping_tab.jpg) 0 0 no-repeat;width:958px;height:45px;margin:0 auto;position:relative;z-index:101;}
.slideMenu{height:38px;}
li.current a{color:#00b5f7;cursor:pointer;}
li.current a:hover{color:#00b5f7;cursor:pointer;}
.lavaLampWithImage3 li a:hover,.lavaLampWithImage3 li a:active{border:none;color:#00B5F7;text-decoration:none;}
.lavaLampWithImage3 .sep{padding-top:13px;font-size:10px;color:#aeadad;float:left;height:20px;border-top:none;}
.lavaLampWithImage3{position:relative;height:28px;float:left;}
.lavaLampWithImage3 .current{color:#008ace;}
.lavaLampWithImage3 .current a{color:#008ace;}
.lavaLampWithImage3 li{float:left;list-style:none;padding-bottom:11px;}
.lavaLampWithImage3 li.back{background:url(images/b_slider.gif) center bottom no-repeat;width:120px;height:28px;z-index:8;position:absolute;}
.lavaLampWithImage3 li a{font:bold 14px arial;text-decoration:none;color:#303030;outline:none;text-align:center;top:6px;letter-spacing:0;z-index:10;display:block;float:left;height:28px;position:relative;overflow:hidden;padding:5px 20px 0 17px;font-family:\"Microsoft Yahei\",Arial,Helvetica,sans-serif,\"����\";font-weight:normal;font-size:13px;}
</style>
</head>
<body>
<div class=\"csc_top\">
 <div class=\"shead_left\">
 <ul id=\"1\" class=\"lavaLampWithImage3\">  
  <li class=\"current\">
  <a href=\"#\" style=\"padding: 5px 30px 0;\">Meizu</a>
  </li>
  <span class=\"sep\">|</span>
  <li >
  <a href=\"#\" style=\"padding: 5px 30px 0;\">魅族</a>
  </li>
  <span class=\"sep\">|</span>
  <li>
  <a href=\"#\" style=\"padding: 5px 30px 0;\">phpstudy</a>
  </li> 
 </ul>
 </div>
</div>
</div>
<script type=\"text/javascript\" src=\"MZPub-CSC-0121.js\"></script>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/24494

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案