0

これは私の最初の投稿です。私が何か間違ったことをしている場合は、遠慮なく教えてください。

かなり見栄えの良いナビゲーションバーを作成しました：

私のHTML：

<div style="width: 864px; margin: 0 auto;"> 
    <nav id="main-navigation">
        <ul>
                <li id="nav1"><a href="#">Lorem ipsum dolor sit ametzu</a></li>
                <li id="nav2"><a href="#">Lorem ipsum dolor sit am</a></li>
                <li id="nav3"><a href="#">Lorem ipsum dolor sitd</a></li>
                <li id="nav4"><a href="#">Lorem ipsum dolo</a></li>
                <li id="nav5"><a href="#">Lorem ipsum do</a></li>
        </ul>
    </nav>
</div>

そして、これが現在の様子です。

ここに画像の説明を入力

各ナビゲーション アイテムの幅は、そのコンテンツに対して相対的である必要があることに注意してください。次の css のように、静的な幅の値 (マジック ナンバー) を使用してこれを構築することができました。

body{background-color: gray;}

ul{
    margin: 0;
    padding: 0;
}

nav#main-navigation li{
    float: left;
    padding: 15px 0;
    text-align: center;
    margin: 0;
    background-color: white;
    border-right: 1px dotted #222;
    color: #222;
}

nav#main-navigation li:last-child  { border: 0; }

nav#main-navigation li a{
    font: 11px/12px sans-serif;
    text-transform: uppercase;
    text-decoration: none;

}

#nav1{width: 218px;}
#nav2 {width: 198px;}
#nav3 {width: 178px;}
#nav4 {width: 138px;}
#nav5 {width: 128px;}

私はそれについて2つの質問があります:

  1. li-tag 全体を link-tag で埋めることは可能ですか? その方法を教えてください。解決しました!!!
  2. これをレスポンシブにしたい。幅のパーセンテージを計算するのがベストプラクティスですか? そして、それらをメディアクエリに入れますか? または、li 要素をそのコンテンツに関連付けることさえ可能ですか (display:inline; が通常行うべきことのように)?

より経験豊富な人が助けてくれたら本当にうれしいです:-) 乾杯

編集：

リクエストどおり、これが現在の状態です (Roddy of the Frozen Pea に感謝):

http://jsfiddle.net/0xsven/rbz72/

960px (私の最大値) よりも小さなディスプレイに表示するために、これをレスポンシブにしたいと考えています。ナビゲーション バーを、それを含む div の長さ全体に伸ばしたいと思います。助けてくれてありがとう。

4

5 に答える 5

4

2 番目の質問への答えは、<li>要素を表示inline-blockしてフロートを削除することです。このようにして、メニュー項目は項目のようなコンテンツ サイズに応答しinlineます。

nav#main-navigation li{
    display:inline-block;
    padding:15px 10px;
    margin-right: -4px;
}

負の右マージンは、インライン ブロック要素間の本来のギャップを克服するためのトリックです。

クリック可能な領域を大きくするには、ソリューションは次のようになります。基本的に必要なことはdisplay: block、li a要素を配置して、使用可能なすべてのスペースを占有するように指示することです。ただし、これは li のパディングを に転送することを意味しますa。

これは、このコードのJSFiddle デモです。効果を確認できるように、グレーの:hover背景色をに追加しました。<a>

于 2012-09-04T14:53:11.463 に答える
0

質問1の場合、1つの方法はJQueryを使用することです。何かのようなもの：

$("#main-navigation li").click(function () {
    window.location = $(this).find("a").attr("href");
});

$("#main-navigation a").click(function (e) {
    e.preventDefault();
});

それをします。

于 2012-09-04T14:46:06.093 に答える
0

＃2

私がやっていることは、ULのLIをdisplay：blockに設定して、画面の幅がメニューのルックアンドフィールを妨げ始めたときにブロックすることです。

例えば：

@media only screen and (min-width:0px) and (max-width:960px)
{
    nav#main-navigation li { display:block; width:100%; }
}

最終的な効果は、メニュー項目の垂直リストになるはずです。ほとんどの場合、メニュー項目のルックアンドフィールをボタンに変更します。

于 2012-09-04T14:48:38.467 に答える
0

部分的な回答：

  1. クリック可能な領域を大きくするには、

    nav＃main-navigation ul li a {display：block; テキスト装飾：なし; パディング：10px、20px; }

タグの表示プロパティを「ブロック」に設定すると、リンクが展開されてコンテナがいっぱいになります。パディングはクリック可能な領域のサイズを大きくするので、必要に応じて値を調整します。

于 2012-09-04T14:49:43.900 に答える
0

1.ここであなたを完全に理解しているわけではありませんが（<li>'sを要素にすることはできません）、 'sのスタイルをタグと同じにすること<a>が必要だと思います。sの：hover状態を'sと同じになる<li>ようにスタイリングするなど、これを行うにはいくつかの方法があります。ポインタをカーソルに設定することは良いスタートかもしれません。<li><a>

2.デザインをveiwportの幅に適合させたい場合は、必ずしも@mediaを使用する必要はありません。@mediaは、要素がそれらのポイントの上下でリフローできるデザインのブレークポイントを設定するために使用され、パーセンテージが残りを実行できます。ここではリキッドデザインを使用しました：http：//jsfiddle.net/ucbEe/すべての固定幅を削除し、liに20％の幅（5/100 = 20％の幅）を配置しました。

それは十分に理にかなっていますか？

于 2012-09-04T14:50:39.067 に答える