JS+CSSによるナビゲーション効果の実装の例

著者：Eve Cole 更新時間：2025-05-23 02:48:01

この記事では、JS+CSSによるナビゲーション効果を実装する方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。

1.プログラムコードは次のとおりです。

コードコピーは次のとおりです。

<head>

<Title> CSS+JSは、適切な互換性を備えた無限のレベルのドロップダウンメニューを実装しています</title>

*{マージン：0;パディング：0;国境：0;}

Body {font：12px/130％Verdana、geneva、arial、helvetica、sans-serif、安体;} li {list-style：none;}

.CLEARFIX：After {content： ""; display：block; height; height：0; clear：blote; vidyability：hisdibility;}。clearfix {display：inline-block;}

A：link {color：＃000;テキスト装置：なし; }

A：訪問{色：＃000;テキスト装置：なし; }

A：Hover {color：＃000;テキスト装置：なし; }

.menu {width：778px;高さ：26px;背景：#ffff;マージン：0 auto;}

.menusel {float：left; width：100px;位置：相対;高さ：25px;背景：#ddd;ラインハイト：25px;マージン左：1px; *マージン左：0px; _margin-left：-1px;}

.Menusel H2 {font-size：12px; }

.Menusel a {display：block; text-align：center;幅：100px;境界線：1pxソリッド＃a4a4a4;高さ：25px;境界線底：1pxソリッド＃a4a4a4;位置：相対; z-index：2;}

.Menusel A：Hover {border：1px solid＃a4a4a4;国境圏：1pxダッシュ#eeeeeee;位置：相対; z-index：2;高さ：25px;}

.ahover a {border-bottom：1px dashed #eeeeeee;背景：#eeeeeeee; }

.position {position：absolute; z-index：1;}

.Menusel UL {width：125px;背景：#eee;境界線：1pxソリッド＃a4a4a4;マージントップ：-1px;位置：相対; z-index：1;ディスプレイ：なし;}

.menusel .block {display：block;}

.typeul li {border-bottom：1px dashed＃a4a4a4; width：125px;位置：相対;フロート：左; }

.typeul li a {border：none; width：125px; }

.typeul li A：Hover {border：none;背景：#ddd;}

.typeul {margin-left：0; }

.typeul ul {左：125px;上：0;位置：絶対;}

.fli {マージン左：-1px;国境左：#eeeeee solid1px;}

.menusel .lli {border：none; }

</style>

</head>

<body>

<div>

<div>

<ul>

<li> <a href = "// www.vevb.com">メニューオプション1-2 </a> </li>

<li>

<a href = "＃">メニューオプション1-2 </a>

<ul>

<li> <a href = "＃">メニューオプション1-2-1 </a> </li>

<li> <a href = "＃">メニューオプション1-2-2 </a> </li>

</ul>

</li>

<li> <a href = "// www.vevb.com">メニューオプション1-2 </a> </li>

<li> <a href = "＃">メニューオプション1-2 </a> </li>

</ul>

</div> <！ - 位置 - >

</div> <！ - メニューセル - >

<div>

<ul>

<li> <a href = "＃">メニューオプション2-2 </a> </li>

<li> <a href = "＃">メニューオプション2-2 </a>

<ul>

<li> <a href = "＃">メニューオプション2-2-1 </a> </li>

<li> <a href = "＃">メニューオプション2-2-2 </a>

<ul>

<li> <a href = "＃">メニューオプション2-2-1 </a> </li>

<li> <a href = "＃">メニューオプション2-2-2 </a>

</li>

</ul>

</li>

</ul>

</li>

<li> <a href = "＃">メニューオプション2-2 </a> </li>

</ul>

</div> <！ - 位置 - >

</div> <！ - メニューセル - >

<div>

<ul>

<li> <a href = "＃">メニューオプション3-2 </a> </li>

<li> <a href = "＃">メニューオプション3-2 </a>

<ul>

<li> <a href = "＃">メニューオプション3-2-1 </a> </li>

<li> <a href = "＃">メニューオプション3-2-2 </a>

<ul>

<li> <a href = "＃">メニューオプション3-2-1 </a> </li>

<li> <a href = "＃">メニューオプション3-2-2 </a>

<ul>

<li> <a href = "＃">メニューオプション3-2-1 </a> </li>

<li> <a href = "＃">メニューオプション3-2-2 </a> </li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

<li> <a href = "＃">メニューオプション3-2 </a> </li>

</ul>

</div> <！ - 位置 - >

</div> <！ - メニューセル - >

</div> <！ - メニュー - >

for（var x = 1; x <4; x ++）

{

var menuid = document.getElementById（ "menu"+x）;

menuid.num = x;

タイプ（）;

}

function type（）

{

var menuh2 = menuid.getelementsbytagname（ "h2"）;

var menuul = menuid.getelementsbytagname（ "ul"）;

var menuli = menuul [0] .getelementsbytagname（ "li"）;

menuh2 [0] .onmouseover = show;

menuh2 [0] .onmouseout = unshow;

menuul [0] .onmouseover = show;

menuul [0] .onmouseout = unshow;

関数show（）

{

menuul [0] .classname = "Clearfix Typeulブロック"

}

function unshow（）

{

menuul [0] .classname = "typeul"

}

for（var i = 0; i <menuli.length; i ++）

{

menuli [i] .num = i;

var liul = menuli [i] .getelementsbytagname（ "ul"）[0];

if（liul）

{

typeshow（）

}

関数typeshow（）

{

menuli [i] .onmouseover = showul;

menuli [i] .onmouseout = unshowul;

}

function showul（）

{

menuli [this.num] .getElementsByTagname（ "ul"）[0] .classname = "block";

}

function unshowul（）

{

menuli [this.num] .getelementsbytagname（ "ul"）[0] .classname = "";

}

</script>

</body>

</html>

2。プログラム効果

この記事がみんなのJavaScriptプログラミングに役立つことを願っています。