0

したがって、現在CSSのコードにもかかわらず、このナビゲーションメニューをセットアップしています。背景色は、現時点では主に修行者向けです。このセットアップには背景画像が必要です。残念ながら、設計仕様が定められているため、実際には流動的な背景ではありません。それでそれで。

ウィンドウ全体のサイズに応じてサイズを変更したい方法でナビゲーションを機能させるには、この背景とそれを含む要素を作成する必要があります。デスクトップ ブラウザからモバイル デバイスへ。

CSSだけで、またはjQueryのようなものと組み合わせてこれを達成することを知っている人はいますか? 一部のプラットフォームで同様のことが行われているのを見たことがありますが、彼らがどのようにソリューションに取り組んだかわかりません

/* wrapper and master settings for over all containers */
#menu_bottom{position:absolute;bottom:0;left:0;z-index:999999;background-color:#F00;width:320px;height:172px;}
#menu_bottom > ul{list-style:none;margin:0;padding:0;}
#menu_bottom > ul > li{list-style:none;margin:0;padding:0;float:left;width:50px;height:172px;background-color:#000;}
/* inactive state (position) */
#menu_bottom > ul > li.fans{background-color:#0F0;}
#menu_bottom > ul > li.gameplan{background-color:#0F0;}
#menu_bottom > ul > li.dashboard{background-color:#0F0;}
#menu_bottom > ul > li.myteams{background-color:#0F0;}
#menu_bottom > ul > li.settings{background-color:#0F0;}

/* active state (position) */
#menu_bottom > ul > li.fans.active{background-color:#00F;}
#menu_bottom > ul > li.gameplan.active{background-color:#00F;}
#menu_bottom > ul > li.dashboard.active{background-color:#00F;}
#menu_bottom > ul > li.myteams.active{background-color:#00F;}
#menu_bottom > ul > li.settings.active{background-color:#00F;}

<div id="menu_bottom">
    <ul>
        <li rel="/" class="f<?php if($activeNav == "c"){echo ' active';} ?>"></li>
        <li rel="/" class="g<?php if($activeNav == "n"){echo ' active';} ?>"></li>
        <li rel="/" class="d<?php if($activeNav == "d"){echo ' active';} ?>"></li>
        <li rel="/" class="m<?php if($activeNav == "f"){echo ' active';} ?>"></li>
        <li rel="/" class="s<?php if($activeNav == "s"){echo ' active';} ?>"></li>
    </ul>
</div>
4

1 に答える 1

0

すべてのコンテンツに全体的なラッパーを設定し、CSS で幅 100% に設定する必要があります

于 2013-04-19T05:46:36.473 に答える