純CSS的下拉式選單

By Ellen 3 years ago19 Comments
首頁  /  網站設計與開發  /  純CSS的下拉式選單

CSS下拉式選單

以往我們要實現下拉式選單大多會使用Javascript或者是Flash,不過現在我們有更簡單的選擇。今天我們要跟大家分享如何單純使用CSS及HTML製作互動式的下拉選單。底下就是我們完成的選單效果截圖。

CSS下拉式選單

首先我們先把第一層的按鈕做出來。

HTML

 <ul class="drop-down-menu">
        <li><a href="#">關於我們</a>
        </li>
        <li><a href="#">Magento</a>
        </li>
        <li><a href="#">服務項目</a>
        </li>
        <li><a href="#">專案介紹</a>
        </li>
        <li><a href="#">資訊分享</a>
        </li>
        <li><a href="#">聯絡我們</a>
        </li>
    </ul>

接下來我們準備第一層的CSS表。要注意的是:在這個選單中,只有第一層的按鈕是水平排列,其餘都是垂直排列。

CSS

 ul { /* 取消ul預設的內縮及樣式 */
        margin: 0;
        padding: 0;
        list-style: none;
    }

    ul.drop-down-menu {
        border: #ccc 1px solid;
        display: inline-block;
        font-family: 'Open Sans', Arial, sans-serif;
        font-size: 13px;
    }

    ul.drop-down-menu li {
        position: relative;
        white-space: nowrap;
        border-right: #ccc 1px solid;
    }

    ul.drop-down-menu > li:last-child {
        border-right: none;
    }

    ul.drop-down-menu > li {
        float: left; /* 只有第一層是靠左對齊*/
    }

     ul.drop-down-menu a {
        background-color: #fff;
        color: #333;
        display: block;
        padding: 0 30px;
        text-decoration: none;
        line-height: 40px;

    }
    ul.drop-down-menu a:hover { /* 滑鼠滑入按鈕變色*/
        background-color: #ef5c28;
        color: #fff;
    }
    ul.drop-down-menu li:hover > a { /* 滑鼠移入次選單上層按鈕保持變色*/
        background-color: #ef5c28;
        color: #fff;
    }

 

接著我們要加入第二層的選單。我們必須要注意:當滑鼠滑入按鈕時,次選單要展開;當滑鼠移入次選單時,次選單依舊要保持開啟。因此我們要把次選單放在按鈕<li>的標籤結束之前,再利用li:hover 開啟次選單。這樣當滑鼠移入次選單時,仍舊沒有離開上層按鈕<li> 的範圍,因此次選單會保持開啟的狀態。

HTML

  <li><a href="#">關於我們</a>
            <ul>
                <li><a href="#">服務據點</a>
                </li>
                <li><a href="#">服務客戶</a>
                </li>
                <li><a href="#">服務地區</a>
                </li>
                <li><a href="#">徵才資訊</a>
                </li>
            </ul>
        </li>

 

整段完整的HTML

HTML

  <ul class="drop-down-menu">
        <li><a href="#">關於我們</a>
            <ul>
                <li><a href="#">服務據點</a>
                </li>
                <li><a href="#">服務客戶</a>
                </li>
                <li><a href="#">服務地區</a>
                </li>
                <li><a href="#">徵才資訊</a>
                </li>
            </ul>
        </li>
        <li><a href="#">Magento</a>
        </li>
        <li><a href="#">服務項目</a>
            <ul>
                <li><a href="#">系統整合</a>
                    <ul>
                        <li><a href="#">Magento與POS訂單系統整合</a>
                        </li>
                        <li><a href="#">Magento與CRM客戶管理系統整合</a>
                        </li>
                        <li><a href="#">Magento與ERP管理系統整合</a>
                        </li>
                        <li><a href="#">Magento金流串接服務</a>
                        </li>
                    </ul>

                </li>
                <li><a href="#">專業網頁設計</a>
                    <ul>
                        <li><a href="#">響應式網頁設計 (Responsive Web Design)</a>
                        </li>
                        <li><a href="#">手機網站設計</a>
                        </li>
                        <li><a href="#">WordPress 網頁設計</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#">網路行銷服務</a>
                    <ul>
                        <li><a href="#">Amazon亞馬遜網路商城</a>
                        </li>
                        <li><a href="#">社群媒體行銷</a>
                        </li>
                        <li><a href="#">SEO 搜尋引擎優化</a>
                            <ul>
                                <li><a href="#">在地SEO</a>
                                </li>
                                <li><a href="#">SEO 搜尋引擎優化</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">網站客製開發</a>
                </li>
            </ul>
        </li>
        <li><a href="#">專案介紹</a>
        </li>
        <li><a href="#">資訊分享</a>
        </li>
        <li><a href="#">聯絡我們</a>
        </li>
    </ul>

CSS

  ul.drop-down-menu ul {
        border: #ccc 1px solid;
        position: absolute;
        z-index: 99;
        left: -1px;
        top: 100%;
       min-width: 180px;
    }

    ul.drop-down-menu ul li {
        border-bottom: #ccc 1px solid;
    }

    ul.drop-down-menu ul li:last-child {
        border-bottom: none;
    }

    ul.drop-down-menu ul ul { /*第三層以後的選單出現位置與第二層不同*/
        z-index: 999;
        top: 10px;
        left: 90%;
    }

 

到這裡已經完成了初步的樣式設定。

接下來我們要先將次選單隱藏起來。當滑鼠滑入時再顯示出來。

CSS

  ul.drop-down-menu ul { /*隱藏次選單*/
        display: none;
    }

    ul.drop-down-menu li:hover > ul { /* 滑鼠滑入展開次選單*/
        display: block;
    }

到這裡已經完成了下拉式的選單。

CSS下拉式選單

 

接下來我們來加點效果

將剛剛前一段的CSS修改一下

  ul.drop-down-menu ul { /*隱藏次選單*/
        left: 99999px;
        opacity: 0;
        -webkit-transition: opacity 0.3s;
        transition: opacity 0.3s;
    }

    ul.drop-down-menu li:hover > ul { /* 滑鼠滑入展開次選單*/
        opacity: 1;
        -webkit-transition: opacity 0.3s;
        transition: opacity 0.3s;
        left: -1px;
        border-right: 5px;
    }

    ul.drop-down-menu li:hover > ul ul { /* 滑鼠滑入之後、次選單之後的選單依舊隱藏*/
        left: 99999px;
    }

    ul.drop-down-menu ul li:hover > ul { /* 第二層之後的選單展開位置*/
        left: 90%;
    }

加上這段CSS之後,我們的選單就有淡入淡出的效果了哦。

image00

 

以上內容由Astralweb 歐斯瑞編寫製作

 500

推薦文章

Category:
  網站設計與開發

19 Comments

  • 高晟睿 says:

    讚讚讚!!!
    找這個找了好久

  • chi says:

    請問為什麼我照你的CSS打只會出現一個子層,
    無法顯示下一個子層??

  • elson says:

    這個使用後左右拉bar多出了超多的~是那裡出問題???

    • Astral Web Astral Web says:

      有可能是html的結構弄錯了、建議複製範例下去修改

    • Fong says:

      兩個 left: 99999px; 的問題,我直接註解掉好像也沒影響

      • Astral Web Astral Web says:

        當opacity為0的時候、雖然畫面上看不到物件、但是實際上存在、所以有可以會壓到底下的物件、造成明明看得到底下的物件、滑鼠卻怎麼都選不到的情況。當加上淡入淡出效果的時候、我們是用opacity來控制次選單的顯示與否、為了避免讓再下一層的東西壓到畫面上的物件、所以才以 left: 99999px; 的設定,將他的位置拉去畫面以外的地方去。

  • Alfred says:

    如果要加「淡入淡出的效果」
    必須先把
    ul.drop-down-menu ul { /*隱藏次選單*/
    ul.drop-down-menu li:hover > ul { /* 滑鼠滑入展開次選單*/
    display 的部份拿掉
    不然效果不會出來

  • ipad says:

    ipad iphone 不支援

  • Banana says:

    請問如果需要改成滑鼠點擊後出現次選單的效果,
    把:hover改成:active辦的到嗎?
    還是有其他方法用純CSS可以達成呢?

  • candy says:

    我可以拿來使用嗎??

  • MATTAMAX says:

    相當感謝…我試出來了..而且以同樣方法用在自己的作品

  • 溫柏叡 says:

    請問如果項目太多拉的畫面很長
    想要限制畫面上只有5個項目
    併用scrollbar拉動
    該如何實現呢?

  • 衣絜 says:

    依您教的方式,已經成功做出一個下拉式選單,但是呈現有方式有問題,
    我想標題和選單固定在上方,下拉選單點選後直接就呈現到下方,
    就像是以前DW所使用的頁框呈現方式,能指定頁框內容在某框架中顯示。

    自己有試著以表格的方式呈現,下拉式選單是沒什麼問題,
    但不知道怎麼樣讓該內容呈現在下方?!

    還有用頁框方式試過,但是下拉選單會受框架限制,把選單遮住了。
    呈現有方式應該怎麼設定才對呢?!

    謝謝!

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。