この記事の例では、3レベルのナビゲーションメニューを実装するためのjs + cssの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 CSS を使用してナビゲーション メニューのホバー イベントを実装するのは比較的簡単です。透明度を変更するだけです。メニューにグラデーション効果を持たせたい場合、残念ながら transition は display をサポートしていないため、不透明度を使用して同じ効果を実現します。 CSS で実装された完全なコードは次のとおりです。 <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8" /> <title>第 3 レベルのナビゲーション メニュー</title> </head> <スタイル> *{ マージン: 0; パディング: 0; } 体{ フォントサイズ: 16px; 背景色:#EDEDED; フォントスタイル: 継承; 色:#757576; } 。主要{ 幅: 1050ピクセル; マージン: 0 自動; } .fl{ フロート: 左; } .fr{ フロート: 右; } { テキスト装飾: なし; アウトライン: なし; 色:#757576; } ul、ol{ リストスタイル: なし; } 。クリア{ クリア: 両方; } .clearfix{ *ズーム:1; } li{ フロート: 左; 表示: インラインブロック; 幅: 120ピクセル; 高さ: 40px; テキスト配置: 中央; 行の高さ: 40px; } li a:hover{ 色: 赤; } #初め { 不透明度: 0; } #firstli{ フロート: なし; 位置: 相対的; } li a:hover{ 色: 赤; 遷移: すべて 0.5 秒; } :ホバー{ 遷移: すべて 2; } #2番 { 不透明度: 0; マージン: -40px 0 0 80px; パディング: 0px; 位置: 絶対; } #nav_one:ホバー #first{ 不透明度:1; 遷移: すべて 2; } #nav_two:ホバー #second{ 不透明度:1; 遷移: すべて 2; } </スタイル> <本文> <div class="nav main"> <ul id="nav"> <li id="nav_one"><a href="#" >レベル 1</a> <ul id="first"> <li id="nav_two" class="nav_two"> <a href="#" >第 2 レベル</a> <ul id="2番目"> <li><a href="#" >レベル 3</a></li> <li><a href="#" >レベル 3</a></li> <li><a href="#" >レベル 3</a></li> </ul> </li> <li class="nav_two"><a href="#" >第 2 レベル</a></li> <li class="nav_two"><a href="#" >第 2 レベル</a></li> </ul> </li> <li><a href="#" >レベル 1</a></li> <li><a href="#" >レベル 1</a></li> <li><a href="#" >レベル 1</a></li> <li><a href="#" >レベル 1</a></li> </ul> </div> </本文> </html> js の実装は比較的面倒ですが、CSS でホバー効果を置き換えることも可能です。 <!--<スクリプト> window.onload = 関数(){ var one = document.getElementById("nav_one"); var frist = document.getElementById("frist"); var second = document.getElementById("second"); one.onmouseover = 関数(){ first.style.opacity = "1"; first.style.transition = "すべて 2"; first.style.WebkitTransition = "すべて 2"; } one.onmouseout = 関数(){ first.style.opacity = "0"; first.style.transition = "すべて 0.5 秒"; first.style.WebkitTransition = "すべて 0.5 秒"; } var two = document.getElementById("nav_two"); 2.onmouseover = 関数(){ second.style.opacity = "1"; second.style.transition = "すべて 2"; second.style.WebkitTransition = "すべて 2"; } 2.onmouseout = 関数(){ second.style.opacity = "0"; second.style.transition = "すべて 0.5 秒"; second.style.WebkitTransition = "すべて 0.5 秒"; } } </script>--> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
HTTP ヘッダーの説明1. Accept: Web サーバーに受け入れるメディア タイプを通知しま...
この記事では、ショッピングカートを実装するためのVue.jsフレームワークの具体的なコードを参考まで...
前回の記事「MySQL テーブル構造の変更、メタデータ ロックを知っておく必要があります」では、MD...
<!DOCTYPE html> <html lang="ja"...
1. 表示効果: 2、HTML構造 <div class="プロセスリスト-lpu...
序文今日は、聖杯レイアウトとダブルウィングレイアウト、そしてそれらの違いについてお話しします。この2...
目次01 コンテナの一貫性02 レイヤーの概念03 レイヤードデザインの利点今日はコンテナ レイヤー...
効果: CSS スタイル: <スタイル タイプ="text/css">...
オンラインで多くの記事を検索しましたが、解決策は見つかりませんでした。次のように、tomcat7-m...
Shutdown.batファイルには次の文があります "%CATALINA_HOME%&q...
以下は私がまとめた基本的なSQL知識です。主に参考資料として、また将来の他の初心者の助けとして、私自...
記録として、将来使用される可能性があり、困っている友人も使用できます。 BBはもうやめて、まずはレン...
目次1. v-bind: 要素の属性にデータをバインドできる2. v-bind: は次のように省略で...
デバッグブランチプロジェクトの通常の開発中に、以前にリリースされたバージョンにバグがある場合がありま...
この記事では、主に実際のアプリケーションでよく使用されるMySQLの時刻と日付、および変換関数につい...