ホームページ > 記事 > ウェブフロントエンド > js は水平方向に拡張するセカンダリ ナビゲーション メニューを実装します code_javascript スキル
js は水平方向に拡張するセカンダリ ナビゲーション メニューを実装します code_javascript スキル
- WBOYオリジナル
- 2016-05-16 15:41:461469ブラウズ
この記事の例では、水平方向に拡張されたセカンダリ ナビゲーション メニュー コードの js 実装について説明します。皆さんの参考に共有してください。詳細は以下の通りです。
これは、JS で実装された水平方向に拡張されたセカンダリ ナビゲーション メニューです。プライマリ メニューの 4 番目のメニュー項目にマウスを置くと、セカンダリ メニューが展開されます。一般的な変更だけです。独自のウェブサイトのスタイルに合わせてメニューのスタイルを再美化できます。
実行中のエフェクトのスクリーンショットは次のとおりです:
オンライン デモのアドレスは次のとおりです:
http://demo.jb51.net/js/2015/js-r-show-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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>横向伸展开来的二级导航菜单</title>
<style type="text/css">
.suckerdiv { }
.suckerdiv ul { width: 120px; position: relative; }
.suckerdiv ul li ul { left: 120px; /* Parent menu width - 1*/ position: absolute; width: 140px; /*sub menu width*/ top: 0; display: none; }
/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li ul { left: 159px; /* Parent menu width - 1*/ }
/* menu links style */
.suckerdiv ul li a { display: block; color: #353302; text-decoration: none; font:12px 宋体; background: #eee; line-height:24px; padding: 0px 10px; border: 1px solid #fff; border-bottom: 0; }
.suckerdiv ul li a:visited { color: black; }
.suckerdiv ul li a:hover{ color: white; background-color: #97c839; }
.suckerdiv .subfolderstyle { }
.suckerdiv a.subfolderstyle:hover { background: #97c839 url() no-repeat center right; }
</style>
</head>
<body>
<script type="text/javascript">
var menuids = ["suckertree1"]
function buildsubmenus() {
for (var i = 0; i < menuids.length; i++) {
var ultags = document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t = 0; t < ultags.length; t++) {
ultags[t].parentNode.getElementsByTagName("a")[0].className = "subfolderstyle"
ultags[t].parentNode.onmouseover = function () {
this.getElementsByTagName("ul")[0].style.display = "block";
this.firstChild.style.backgroundColor = 'green';
}
ultags[t].parentNode.onmouseout = function () {
this.getElementsByTagName("ul")[0].style.display = "none"
this.firstChild.style.backgroundColor = '';
}
}
}
}
if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)
</script>
<div class="suckerdiv">
<ul id="suckertree1">
<li><a href="#">腾讯新闻</a></li>
<li><a href="#">腾讯汽车</a></li>
<li><a href="#">腾讯科技</a></li>
<li><a href="#">腾讯手机</a>
<ul>
<li><a href="#">HTC</a></li>
<li><a href="#">联想</a></li>
<li><a href="#">华为</a></li>
<li><a href="#">中兴</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。