ホームページ >ウェブフロントエンド >jsチュートリアル >Meizu Meizu 公式ウェブサイトのナビゲーション メニュー効果を jQuery で実装_jquery
Meizu Meizu 公式ウェブサイトのナビゲーション メニュー効果を jQuery で実装_jquery
- WBOYオリジナル
- 2016-05-16 15:39:201540ブラウズ
この記事の例では、Meizu 公式 Web サイトのナビゲーション メニュー効果を jQuery で実装する方法を説明します。皆さんの参考に共有してください。詳細は以下の通りです。
Meizu の公式 Web サイトを時々見ていて、Web サイトのナビゲーション メニューが非常に効果的だったので、素晴らしいの一言です。マウスをメニュー上に置くと、水平線がメニューの下にスライドします。私は常に同様の効果を見つけてそこから学びたいと思っていました。その結果、似たような効果のあるWebサイトのURLを忘れてしまったか、まったく見つけることができませんでした。 。なんと表現したらいいのかわかりませんが、今日やっと見つけました。本当に素晴らしいです。
実行中のエフェクトのスクリーンショットは次のとおりです:
オンライン デモのアドレスは次のとおりです:
http://demo.jb51.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;">脚本之家</a>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="MZPub-CSC-0121.js"></script>
</body>
</html>
この記事が皆さんの jQuery プログラミングに役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。