ナビゲーションバーを作ろう！

CSSを使ってブログとウェブサイトにナビゲーションバーを作ろう！

bannerやheaderの後にナビゲーションのクラスやIDを作りリストで指定します。 たとえば私のところはこんな感じ・・・

<div class="none"><a href="#main">メニューを読み飛ばす</a></div>
<map id="Navigation" name="Navigation" title="Navigation">
        <ul>
                <li><a href="/" title="Web標準 Webサイト制作  アットスタイル ホーム">ホーム</a></li>
                <li><a href="service.php" title="Web制作">Web制作</a></li>
                <li><a href="blogtemptop.php" title="テンプレート">テンプレート</a></li>
                <li><a href="form.php" title="お問い合わせ">お問い合わせ</a></li>
                <li><a href="http://s36ph.s72.xrea.com/" title="ブログ">ブログ</a></li>
                <li><a href="http://style.jp.land.to/phpbb/index.php" title="フォーラム">フォーラム</a></li>
        </ul>
</map>
<div class="none">ナビゲーション閉じる</div>

スタイルシートで整形すればOK！

#navi  {
        float: left;
        margin: 0;
        padding: 0px;
        width: 100%;
}
#navi ul {
        font-size: 0.7em;
        margin: 0;
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: #333333;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #333333;
        padding: 0;
        width: 100%;
        float: left;
        list-style: none;
        background: #D2D2D2 url("webimg/background.png") 0% 40% repeat-x;
}
#navi ul li {
        float: left;
        margin: 0;
        padding: 0;
}
#navi a, #navi a:visited {
        display: block;
        padding: 2px 10px;
        margin: 0;
        color: #000;
        text-decoration: none;
        font-weight: normal;
        border: 0;
        border-top: 1px solid #EEEEEE;
        border-left: 1px solid #EEEEEE;
        border-right: 1px solid #333333;
}
#navi a:hover {
        background: url("webimg/over.png") 0% 40% repeat-x;
        border-top: 1px solid #FFFFFF;
        border-left: 1px solid #FFFFFF;
}

css.maxdesign.com.au - CSS resources and tutorials for web designers and web developersに迷ってしまうほどたくさんのリストナビゲーションが紹介されています。

お気に入りが見つかるかも・・・

Posted

Tags