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

WBOY

リリース： 2016-06-21 08:57:50

オリジナル

1930 人が閲覧しました

著者からの言葉

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

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

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

タスクの概要

達成すべき結果

タスク目標_1

タスク目標_2

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

基本構造

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

順序なしリスト: < ul>、

はナビゲーションバーに意味的に適切なタグであり、の中にナビゲーションバーの 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>

ログイン後にコピー

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