ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS+JQ によるクールなナビゲーションの実装 bar_html/css_WEB-ITnose
CSS+JQ によるクールなナビゲーションの実装 bar_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:27:261667ブラウズ
ステップバイステップで学び、後で包括的なページを作成します
1. 現在のページで強調表示されているナビゲーション バー
1 つ目は非常に単純な HTML コードです。ul+li はメニューを実装します
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>导航栏一</title></head><body> <header class="header"> <div class="nva"> <ul class="list"> <li><a href="Android.html">Android</a></li> <li><a href="C++.html">C++</a></li> <li><a href="IOS.html">IOS</a></li> <li><a href="Java.html">Java</a></li> <li><a href="Ruby.html">Ruby</a></li> </ul> </div> </header><h1>首页</h1></body></html>
基本効果:
次に、CSS プロパティを設定します。ここで、タグ a は行レベルの要素であるため、display を使用してブロック レベルの要素に変換する必要があることに注意してください。これは非常に一般的に使用されます。 line-height の一般的な使用法
*{ margin:0; padding: 0;}a{ text-decoration: none;}.nva{ width: 100%; height: 40px; margin-top: 70px; background-color: #222;}.list{ width: 80%; height: 40px; margin: 0 auto; list-style-type: none;}.list li{ float: left;}.list li a{ padding: 0 30px; color: #aaa; line-height: 40px; display: block;}.list li a:hover{ background:#333; color:#fff;}.list li a.on{ background:#333; color:#fff;}h1{ margin: 20px auto; text-align: center;} 達成される効果:
最後に、JS は、ページがジャンプするときに、リンクの接尾辞に応じて属性が一致することを考慮します。一致するように、スタイルを変更して目的の効果を実現します。 注意する必要があるのは、URL からの href 情報の取得方法です
レンダリング
2. 自動切り替えナビゲーション バーを挿入します。 1をベースにHTMLaタグの内容を変更し、CSSでアニメーション効果を設定します
$(function(){ //当前链接以/分割后最后一个元素索引 var index = window.location.href.split("/").length-1; //最后一个元素前四个字母,防止后面带参数 var href = window.location.href.split("/")[index].substr(0,4); if(href.length>0){ //如果匹配开头成功则更改样式 $(".list li a[href^='"+href+"']").addClass("on"); //[attribute^=value]：匹配给定的属性是以某些值开始的元素。 }else { //默认主页高亮 $(".list li a[href^='index']").addClass("on"); }});CSSの実装 アニメーション効果については、まずbタグとiタグをブロックレベルの要素として設定します。いわゆるアニメーションは、スライドインした後に a を変更し、a に境界線を追加することです。下の図を見てください 最後に、この効果を実現したい場合は、メニューをラップする div にオーバーフロー非表示属性を設定するだけです
<ul class="list"> <li><a href="index01.html"> <b>首页</b> <i>Index</i> </a></li> <li><a href="Android.html"> <b>Android</b> <i>安卓</i> </a></li> <li><a href="C++.html"> <b>C++</b> <i>谁加加</i> </a></li> <li><a href="IOS.html"> <b>IOS</b> <i>苹果</i> </a></li> <li><a href="Java.html"> <b>Java</b> <i>爪哇</i> </a></li> <li><a href="Ruby.html"> <b>Ruby</b> <i>如八一</i> </a></li> </ul>
JQ を使用して実現することもできます。コードは次のとおりです
*{ margin:0; padding: 0;}a{ text-decoration: none;}.nva{ width: 100%; height: 40px; margin-top: 70px; background-color: #222; overflow: hidden;}.list{ width: 80%; height: 40px; margin: 0 auto; list-style-type: none;}.list li{ float: left;}.list li a{ padding: 0 30px; color: #aaa; line-height: 40px; display: block; transition: 0.3s;} .list b,.list i{ display: block; }.list li a:hover{ margin-top: -40px; background:#333; color:#fff;}.list li a.on{ background:#333; color:#fff;}h1{ margin: 20px auto; text-align: center;} 3. 柔軟なサブメニューの実装
まず、 submenu は以下のようにタグで埋められた div で囲まれています
$(function () { $(".list a").hover(function () { //stop是当执行其他动画的时候停止当前的 $(this).stop().animate({ "margin-top": -40 }, 300); }, function () { $(this).stop().animate({ "margin-top": 0 }, 300); });}); 次に、サブメニューなのでドキュメントページから切り離す必要があるので、これを使用する場合は、absolute 属性を使用します。属性を使用する場合、親コンテナは相対的である必要があります <li><a href="Android.html"> <b>Android</b> </a> <div class="down"> <a href="#">子菜单1</a> <a href="#">子菜单2</a> <a href="#">子菜单3</a> <a href="#">子菜单4</a> </div> </li>
次の効果: 次に、JQ およびイージング プラグインを使用してアニメーションを制御します
一般に、操作要素の子孫要素を見つけるには find メソッドが使用されます
*{ margin:0; padding: 0;}a{ text-decoration: none;}.nva{ width: 100%; height: 40px; margin-top: 70px; background-color: #222; position: relative;}.list{ width: 80%; height: 40px; margin: 0 auto; list-style-type: none;}.list li{ float: left;}.list li a{ padding: 0 30px; color: #aaa; line-height: 40px; display: block; transition: 0.3s;}.list b{ display: block;}.list li a:hover{ background:#333; color:#fff;}.list li a.on{ background:#333; color:#fff;}.list .down{ position: absolute; top: 40px; background-color: #222; /*display: none;*/}.list .down a{ color: #aaa; padding-left: 30px; display: block;}h1{ margin: 20px auto; text-align: center;} 画像の記録はあまり良くありません、実際にはすべて伸縮性のあるアニメーションです
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。