教你玩轉CSS 導航欄

CSS 導航欄

垂直

 

水平

 

1、導航欄

熟練使用導航欄，對於任何網站都很是重要。

使用CSS你能夠轉換成好看的導航欄而不是枯燥的HTML菜單。

導航欄=連接列表

做爲標準的HTML基礎一個導航欄是必須的

。在咱們的例子中咱們將創建一個標準的HTML列表導航欄。

導航條基本上是一個連接列表，因此使用 <ul> 和 <li>元素很是有意義：

    <ul>
      <li><a href="#home">主頁</a></li>
      <li><a href="#news">新聞</a></li>
      <li><a href="#contact">聯繫</a></li>
      <li><a href="#about">關於</a></li>
    </ul>

如今，讓咱們從列表中刪除邊距和填充：

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

例子解析：

• list-style-type:none - 移除列表前小標誌。一個導航欄並不須要列表標記
• 移除瀏覽器的默認設置將邊距和填充設置爲0

上面的例子中的代碼是垂直和水平導航欄使用的標準代碼。

2、垂直導航欄

上面的代碼，咱們只須要 元素的樣式，創建一個垂直的導航欄：

 a
    {
        display:block;
        width:60px;
    }

示例說明：

• display:block - 顯示塊元素的連接，讓總體變爲可點擊連接區域（不僅是文本），它容許咱們指定寬度
• width:60px - 塊元素默認狀況下是最大寬度。咱們要指定一個60像素的寬度

注意： 請務必指定 元素在垂直導航欄的的寬度。若是省略寬度，IE6可能產生意想不到的效果。

1.垂直導航條實例

建立一個簡單的垂直導航條實例，在鼠標移動到選項時，修改背景顏色：

 

 ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 200px;
        background-color: #f1f1f1;
    }
     
    li a {
        display: block;
        color: #000;
        padding: 8px 16px;
        text-decoration: none;
    }
     
    /* 鼠標移動到選項上修改背景顏色 */
    li a:hover {
        background-color: #555;
        color: white;
    }

 

2.激活/當前導航條實例

在點擊了選項後，咱們能夠添加 「active」 類來標準哪一個選項被選中：

  .active {
        background-color: #4CAF50;
        color: white;
    }

3.建立連接並添加邊框

能夠在 <li> or <a> 上添加text-align:center 樣式來讓連接居中。

能夠在 border <ul> 上添加 border 屬性來讓導航欄有邊框。若是要在每一個選項上添加邊框，能夠在每一個 <li> 元素上添加border-bottom :

ul {
        border: 1px solid #555;
    }
     
    li {
        text-align: center;
        border-bottom: 1px solid #555;
    }
     
    li:last-child {
        border-bottom: none;
    }

 

4.全屏高度的固定導航條

接下來咱們建立一個左邊是全屏高度的固定導航條，右邊是可滾動的內容。

 ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 25%;
        background-color: #f1f1f1;
        height: 100%; /* 全屏高度 */
        position: fixed; 
        overflow: auto; /* 若是導航欄選項多，容許滾動 */
    }

 

 

注意: 該實例能夠在移動設備上使用。

3、水平導航欄

有兩種方法建立橫向導航欄。使用內聯(inline)或浮動(float)的列表項。

這兩種方法都很好，但若是你想連接到具備相同的大小，你必須使用浮動的方法。

1.內聯列表項

創建一個橫向導航欄的方法之一是指定元素， 上述代碼是標準的內聯:

li {
        display:inline;
    }

 

實例解析：

• display:inline; -默認狀況下，
• 元素是塊元素。在這裏，咱們刪除換行符以前和以後每一個列表項，以顯示一行。

2.浮動列表項

在上面的例子中連接有不一樣的寬度。

對於全部的連接寬度相等，浮動 <li>元素，並指定爲 <a>元素的寬度：

 li
    {
        float:left;
    }
    a
    {
        display:block;
        width:60px;
    }

 

實例解析：

• float:left - 使用浮動塊元素的幻燈片彼此相鄰
• display:block - 顯示塊元素的連接，讓總體變爲可點擊連接區域（不僅是文本），它容許咱們指定寬度
• width:60px - 塊元素默認狀況下是最大寬度。咱們要指定一個60像素的寬度

水平導航條實例

建立一個水平導航條，在鼠標移動到選項後修改背景顏色。

 ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }
     
    li {
        float: left;
    }
     
    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
     
    /*鼠標移動到選項上修改背景顏色 */
    li a:hover {
        background-color: #111;
    }

 

激活/當前導航條實例

在點擊了選項後，咱們能夠添加 「active」 類來標準哪一個選項被選中：

.active {
        background-color: #4CAF50;
    }

 

連接右對齊

將導航條最右邊的選項設置右對齊 (float:right;)：

<ul>
      <li><a href="#home">主頁</a></li>
      <li><a href="#news">新聞</a></li>
      <li><a href="#contact">聯繫</a></li>
      <li style="float:right"><a class="active" href="#about">關於</a></li>
    </ul>

添加分割線

<li> 經過 border-right 樣式來添加分割線:

 /* 除了最後一個選項(last-child) 其餘的都添加分割線 */
    li {
        border-right: 1px solid #bbb;
    }
     
    li:last-child {
        border-right: none;
    }

 

固定導航條

能夠設置頁面的導航條固定在頭部或者底部：

固定在頭部

ul {
        position: fixed;
        top: 0;
        width: 100%;
    }

 

固定在底部

    ul {
        position: fixed;
        bottom: 0;
        width: 100%;
    }

灰色水平導航條

固定在底部

    ul {
        border: 1px solid #e7e7e7;
        background-color: #f3f3f3;
    }
     
    li a {
        color: #666;
    }