卡卡網(wǎng)

說到CSS導(dǎo)航欄，各種漂亮炫酷的樣式都應(yīng)有盡有，不過本文要介紹的是簡單卻又很實(shí)用的導(dǎo)航欄，分為水平導(dǎo)航欄和垂直導(dǎo)航欄兩種樣式。適合初學(xué)者學(xué)習(xí)使用，以及一些對(duì)設(shè)計(jì)要求不高的網(wǎng)頁使用。

簡單卻實(shí)用的CSS水平和垂直導(dǎo)航欄

demodownload

概述

這個(gè)簡單的教程將教你如何通過CSS腳本在水平和垂直位置制作導(dǎo)航欄。導(dǎo)航欄是網(wǎng)頁中的一個(gè)用戶界面元素，其中包含指向網(wǎng)站其他部分的鏈接。在大多數(shù)情況下，導(dǎo)航欄是主網(wǎng)站模板的一部分，這意味著它會(huì)顯示在網(wǎng)站上的大多數(shù)（如果不是全部）頁面上。這意味著無論你正在查看哪個(gè)頁面，都可以使用導(dǎo)航欄訪問網(wǎng)站的其他部分。

樣例代碼

創(chuàng)建水平導(dǎo)航欄

HTML：

<h1>水平導(dǎo)航欄</h1>
<nav class="navbar navbar-default " role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
   <div class="horizontal-menu">
        <ul>
            <li><a href="#" class="active">首頁</a></li>
            <li><a href="#">關(guān)于我們</a></li>
            <li><a href="#">登陸</a></li>
        </ul>
    </div>
    </div>
  </div>
</nav>

CSS腳本：

.horizontal-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #0018c3;
}

.horizontal-menu li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.horizontal-menu .active {
    background-color: #1cbb09;
    color: white;
}

.horizontal-menu li {
    float: left;
    border-right: 1px solid #bbb;
}

.horizontal-menu li:last-child {
    border-right: none;
}

.horizontal-menu li a:hover {
    background-color: #111;
}

結(jié)果：

execcodegetcode

創(chuàng)建垂直導(dǎo)航欄

HTML：

<h1>垂直導(dǎo)航欄</h1>
<nav class="navbar navbar-default " role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
   <div class="vertical-menu">
        <ul>
            <li><a href="#">首頁</a></li>
            <li><a href="#" class="active">關(guān)于我們</a></li>
            <li><a href="#">登陸</a></li>
        </ul>
    </div>
    </div>
  </div>
</nav>

CSS腳本：

.vertical-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #0018c3;
    border: 1px solid #555;
}

.vertical-menu li a {
    display: block;
    color: #fff;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}

.vertical-menu li a:hover {
    background-color: #111;
}

.vertical-menu li {
    text-align: center;
    border-bottom: 1px solid #555;
}

.vertical-menu li:last-child {
    border-bottom: none;
}

.vertical-menu .active {
    background-color: #1cbb09;
}

結(jié)果：

execcodegetcode

總結(jié)

本文介紹了如何使用CSS來制作簡單的導(dǎo)航欄，代碼不多，樣式設(shè)計(jì)不復(fù)雜，適合初學(xué)者學(xué)習(xí)。本實(shí)例導(dǎo)航欄也適合在對(duì)設(shè)計(jì)要求不高的網(wǎng)頁上使用。

相關(guān)文章推薦

• CSS3+JQuery實(shí)現(xiàn)的三級(jí)下拉導(dǎo)航菜單

標(biāo)簽: 導(dǎo)航欄  導(dǎo)航菜單