search

Home >Web Front-end >JS Tutorial >jQuery implements the navigation menu effect of Meizu Meizu official website_jquery

jQuery implements the navigation menu effect of Meizu Meizu official website_jquery

WBOY
WBOYOriginal
2016-05-16 15:39:201553browse

The example in this article describes how jQuery implements the navigation menu effect of Meizu official website. Share it with everyone for your reference. The details are as follows:

I occasionally saw Meizu’s official website and found that the website’s navigation menu was very effective, so I downloaded it. Two words: awesome. When the mouse is placed on the menu, a horizontal line will slide under the menu. I have always wanted to find similar effects and learn from them. As a result, I either forgot the URL of a website with similar effects, or I couldn't find it at all. . I don’t know how to describe it, but I finally came across it today, and it’s really awesome.

The screenshot of the running effect is as follows:

The online demo address is as follows:

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

The specific code is as follows: 

<!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,"&#65533;&#65533;&#65533;&#65533;";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;">脚本之家</a>
  </li> 
 </ul>
 </div>
</div>
</div>
<script type="text/javascript" src="MZPub-CSC-0121.js"></script>
</body>
</html>

I hope this article will be helpful to everyone’s jQuery programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JavaScript implements imitating Sina Weibo lobby and Tencent Weibo homepage scrolling special effects source code_javascript skillsNext article：JavaScript implements imitating Sina Weibo lobby and Tencent Weibo homepage scrolling special effects source code_javascript skills

Related articles

See more