首頁 > 開發者 > CSS

用純CSS教您實現下拉導覽功能表及下拉容器等教程

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

首先我們以列表ul li 來開始我們菜單也可以說導航條的製作：

在頁面中我們首先構建以下XHTML結構：

 

 代碼如下 複製代碼
<body>
  <ul id="navWrapper">
    <li>
      <a href="#">Menu A</a>
      <ul>
        <li><a href="#">Menu A, Item 1</a></li>
        <li><a href="#">Menu A, Item 2</a></li>
        <li><a href="#">Menu A, Item 3</a></li>
        <li><a href="#">Menu A, Item 4</a></li>
        <li><a href="#">Menu A, Item 5</a></li>
        <li><a href="#">Menu A, Item 6</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Menu B</a>
      <div id="test"><a href="#">Menu B, Item 1</a></div>
    </li>
  </ul>
  <div id="banner"></div>
  <div id="content">
    <p>Page content here.</p>
  </div>
</body>

 

效果：

 

 

接著，我們來一步一步設計樣式及功能(先給每個元素加個邊框以便後續樣式設計區別)：

樣式代碼：

 

 代碼如下 複製代碼
<style>
    ul{
        border:1px solid red;
    }
    li{
        border:1px solid lightgreen;
    }
    div{
        border:1px solid black;
    }
</style>

 

效果：

 這樣我們就可以好區分，好設計了~~

下面去掉連結的下滑線和列表的“.”“。”，並且使父級的列表橫向排列，子級列表還是縱向排列，這樣才像下拉式功能表嘛~~(這裡是兩級列表嵌套，一個父級一個子級)

樣式代碼：

 

 代碼如下 複製代碼

<style>
    ul{
        border:1px solid red;
    }
    li{
        border:1px solid lightgreen;
    }
    div{
        border:1px solid black;
    }
   

    a{
        text-decoration:none;
    }
    ul#navWrapper li{
        float:left;
        list-style:none;
    }
    ul#navWrapper li ul li{
        float:none;
    }
    div#banner{
        clear:both;
    }
</style>

 

效果：

 

下面來隱藏子級列表和子級容器(這裡子級容器是指id為test的div容器)，當滑鼠移動到父級列表時相對應的子級列表顯現出來，通過 “ :hover ”實現，隱藏顯現通過display的“ none ”和“ block ”來實現，注意這裡不用visibility的“ hidden ”和“ visible ”來實現，至於區別大家可以把相應的屬性換成visibility來看看效果，這裡就不實現了

樣式代碼：

 

 代碼如下 複製代碼

<style>
    ul{
        border:1px solid red;
    }
    li{
        border:1px solid lightgreen;
    }
    div{
        border:1px solid black;
    }
   

    a{
        text-decoration:none;
    }
    ul#navWrapper li{
        float:left;
        list-style:none;
    }
    ul#navWrapper li ul li{
        float:none;
    }
    div#banner{
        clear:both;
    }
   

    ul#navWrapper ul,ul#navWrapper div#test{
        display:none;
        position:absolute;
    }
    ul#navWrapper li:hover ul,ul#navWrapper li:hover div#test{
        display:block;
    }
</style>

 

效果：

這裡有一點需要注意，當不設定子級的position為“ absolute ”時，滑鼠移動到父級，出現的子級會在頁面佔據一定的位置，那麼“ Page content here ”將會產生移動，這是十分不好的。所以我們設定子級“ position:absolute; ”，這樣便可以使它們脫離正常的流程，不影響後面的內容位置!

再將父級位置稍微位移下和將第一個父級下的自己列表向左位移與父級邊框對齊，並且給第二個父級下的div容器一定的“容積”

樣式代碼：

 

 代碼如下 複製代碼
<style>
    ul{
        border:1px solid red;
    }
    li{
        border:1px solid lightgreen;
    }
    div{
        border:1px solid black;
    }
   
    a{
        text-decoration:none;
    }
    ul#navWrapper li{
        float:left;
        list-style:none;
    }
    ul#navWrapper li ul li{
        float:none;
       
        margin-left:-41px;
    }
    div#banner{
        clear:both;
       
        height:50px;
        margin-top:30px;
    }
   
    ul#navWrapper ul,ul#navWrapper div#test{
        display:none;
        position:absolute;
    }
    ul#navWrapper li:hover ul,ul#navWrapper li:hover div#test{
        display:block;
    }
   
    ul#navWrapper{
        margin-left:-41px;
    }
    ul#navWrapper div#test{
        height:200px;
        width:600px;
        background:lightgray;
    }
</style>

 

效果：

 

 

將所有邊框去掉後這裡最基本的結構就設計好了，其他的樣式可以隨意調整啦~~

比如：

將所有邊框去掉後，並對整體進行下設計

樣式代碼：

 

 代碼如下 複製代碼
<style>
    body,div,ul,li{
        padding:0;
        margin:0;
    }
    a{
        text-decoration:none;
    }
    ul#navWrapper li{
        float:left;
        list-style:none;
       
        height:45px;
        line-height:45px;
    }
    ul#navWrapper li ul li{
        float:none;
    }
    div#banner{
        clear:both;
       
        height:50px;
        margin-top:50px;
        margin-left:50px;
    }
    div#content{
        margin-left:50px;
    }
    ul#navWrapper ul{
        display:none;
        position:absolute;
        background:#CCC;
    }
    ul#navWrapper div#test{
        display:none;
        position:absolute;
        height:200px;
        width:600px;
        background:#cde6c7;
    }
    ul#navWrapper li:hover ul,ul#navWrapper li:hover div#test{
        display:block;
    }
   
    ul#navWrapper{
        background:#CCC;
        height:45px;
        width:960px;
        margin:0 auto;
        margin-top:30px;
    }
   
    li a{
        font-size:24px;
        color:#333;
        display:block;
        height:45px;
        padding:0 20px;
    }
    li a:hover{
        color:#fff;
        background:#000;
    }
</style>

 

 

 

效果：

圖一：

 

 

圖二：

 

 

OK!這就是在以上基本結構上設計的一個例子了。如果還需要設計，只需要在以上最基本結構上設計就行了~~

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
css ellipsis css oblique css scheduler css selectors css alarms skin css lynda css
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More