htmlチュートリアル

css+jsを使って自動スケーリングナビゲーションを実現 bar_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:57 AM

著者からの言葉

たまたまインターネットでTEDの公開講座【子供たちにプログラミングを教えよう】を見て、小さな男の子が作ったという例がありました。彼は小さな魚を食べるゲームのスコアボードを作りたかったので、オンラインでアドバイスを求めました。その後、ウェブサイトの作成者に発見されたとき、彼は答えを教えてくれました。変数。この少年は、この [変数] を通じて学んだ知識を決して忘れないかもしれません。

需要に応じてプログラミングを学習することは、多くの場合、プログラミングを学習するためにプログラミングを学習するよりも手間がかかり、価値があることがわかります。これは、その後の私の勉強と執筆にも変化をもたらしました。

追伸: 以下のコードは変更部分のみを毎回記述し、変更していない部分については再度記述しません。各パートの形式は、レンダリング - アイデア - コード です。その目的は、初心者がレンダリングに基づいて自分でコードを作成し、アイデアを補足して、最終的に作者の By とコミュニケーションできるようにすることです。コードを比較することで、この方法を通じて、効果を達成するためのさまざまな方法があることを理解できればと思います。もちろん、最も重要なことは、コードを書く能力を発揮することです。

タスクの概要

達成すべき結果

タスク目標_1

タスク目標_2

デフォルトのホームページ選択スタイル;
マウスオーバー効果を設定します: 色の変更 (#f60)、幅の変更、フォントの変更。

基本構造

これは CSS を変更していない HTML コードです

順序なしリスト: 、

はナビゲーションバーに意味的に適切なタグであり、の中にナビゲーションバーの HTML 部分を配置します。

<ul class="nav" >        <li><a href="#">首    页</a></li>        <li><a href="#">新闻快讯</a></li>        <li><a href="#">产品展示</a></li>        <li><a href="#">售后服务</a></li>        <li><a href="#">联系我们</a></li>    </ul>

これはナビゲーションバーのデフォルトのスタイルです。css を使用して予備的な変更を行います

スタイルの変更

デフォルトのスタイルをキャンセルします

デフォルトのブラウザボックスのモデル値、リストスタイル、リンクスタイルをキャンセルし、フォントの色を黒に変更します。

    *{margin: 0;padding: 0;          font-size: 14px;}    li{list-style: none;}    a{text-decoration: none;           color: #000;}

スケルトンを設定します

幅を設定する目的とheight;
ナビゲーションバーを垂直配置から水平配置に変更するには、float: left を使用します。
列のテキストを垂直方向に中央揃えに設定してナビゲーションを実装します。
text-aligin を使用して、ナビゲーションバーのテキストを水平方向に中央揃えにします。

li{list-style: none;float:left;}li a{display:block;width: 100px;     height: 30px;line-height: 30px;     text-aligin:center;    }

色と詳細の変更

ナビゲーションバーのデフォルトの色を設定し、ナビゲートするマージン属性タグによりギャップが生成されます。

border-radius によってナビゲーションバーの四隅を丸い角に設定します。

属性に class=on を設定し、擬似クラスセレクタ a:hover を設定することで、[Homepage] と [Mouseover] のスタイルカラーを #f60 に設定し、フォントカラーを設定します白に。

li a{display:block;width: 100px;      height: 30px;line-height: 30px;      background-color: #efefef;      margin-left:1px;}.on,.nav li a:hover{    background-color: #f60;     color: #fff;}

ナビゲーションバーの「足元」を設定します

1. ナビゲーションバーの「足元」を作成します。

ul{height:50px;    border-bottom:5px solid #f60;    padding-left:20px;}li{margin-top:20px;}

これはテキストファイルから分離されているため、デフォルトの高さの値はその親要素も 0 なので、自分で設定する必要があります。定義済み。 3. ナビゲーションバーの主要部分を margin 属性とpadding 属性に移動します。

マウスオーバーして行の高さを変更します

.on,.nav li a:hover{   height: 40px;   line-height: 40px;   margin-top: -10px;}

マウスオーバー後の行の高さを設定します 2 .Atこの時点で、マージンを負の値に設定すると、ナビゲーションバーが下に移動していることがわかります。

上記は CSS 部分です。以下では JavaScript について説明します。

マウスオーバー時の自動拡大・縮小

自動拡大・自動縮小の2つに分けて記述しますマウスオーバー時の自動拡大・縮小 9 効果: ナビゲーションバーの上にマウスを移動すると、ナビゲーションバーが自動的に拡張されます。

首先要获得标签元素，可以通过getElementsByTag；
要给每一个标签设置，可以通过for循环遍历；
鼠标划过事件通过 onmouseover设置；
在方法里通过var变量获得当前标签元素。
设置自动延伸，可以通过setInterval方法，让方法以固定的时间为间隔，反复执行；
此时导航栏会无限延伸，通过if设置条件，设置导航栏延伸停止时机。

window.onload=function(){    var aA=document.getElementsByTagName("a");    for(var i=0;i<aA.length;i++){        aA[i].onmouseover=function(){            var This=this;            clearInterval(This.time);//初始化            This.time=setInterval(function(){                This.style.width=This.offsetWidth+8+"px";                    if(This.offsetWidth>=150){                    clearInterval(This.time)                    }                },30);            }        }    }

鼠标离开自动缩

最终图片，与文章开头图片相同效果：鼠标离开导航栏自动缩到原始状态。

思路同上，只是数值相反。

aA[i].onmouseout=function(){    var This = this;    clearInterval(This.time);//初始化        This.time=setInterval(function(){        This.style.width=This.offsetWidth-8+"px";            if(This.offsetWidth<=100){                clearInterval(This.time);            }        },30);    }}

最终代码

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">    <title>导航栏v1.0</title>    <style type="text/css">        /*@group general style*/        *{margin: 0;padding: 0;font-size: 14px;}        a{color: #333;text-decoration: none;}        ul{            list-style: none;border-bottom: 5px solid #f60;height: 50px;            padding-left: 30px;        }        li{            margin-top:20px;            float: left;}        /*@group overrides*/        .nav li a{            display: block;            text-align: center;            height: 30px;            line-height:30px;            width: 120px;            background-color: #efefef;                        border-radius: 5px;        }        .nav .on,.nav li a:hover{            color: #fff;            background-color: #f60;            height: 40px;            line-height: 40px;            margin-top: -10px;        }    </style></head><body>    <ul class="nav" >        <li><a class="on" href="#">首    页</a></li>        <li><a href="#">新闻快讯</a></li>        <li><a href="#">产品展示</a></li>        <li><a href="#">售后服务</a></li>        <li><a href="#">联系我们</a></li>    </ul>    <script type="text/javascript">    window.onload=function(){        var aA=document.getElementsByTagName("a");        for(var i=0;i<aA.length;i++){            aA[i].onmouseover=function(){                // 设置方法停止的时机                clearInterval(this.time);                // 此处this为当前a标签                var This=this;                // 设置方法每30毫秒运行一次                // 其中offsetWidth:对象的可见宽度，包括本身width+padding-border                // 当offsetWidth>=120时，程序停止。                This.time=setInterval(function(){                    This.style.width=This.offsetWidth+8+"px";                    if(This.offsetWidth>=160){                    clearInterval(This.time);                }                },30);            }            aA[i].onmouseout=function(){                clearInterval(this.time);//初始清理                var This=this;                This.time=setInterval(function(){                    This.style.width=This.offsetWidth-8+"px";                    if(This.offsetWidth<=120){                        clearInterval(This.time);                    }                },30);            }            }    }    </script></body></html>

注：此项目灵感来自慕课网

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SublimeText3 中国語版

中国語版、とても使いやすい

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。