JavaScript >> Javascript 文檔 >  >> Tags >> CSS

快速提示:使用 Checkbox Hack 的 CSS Only Dropdowns

在這個快速提示中,我們將看一下用於創建下拉菜單的純 CSS 技術。它圍繞著複選框 HTML 元素和 CSS 選擇器的一些巧妙使用而無需一行 JavaScript。

您可以在我們的編輯器中查看示例。點擊“編輯”按鈕查看代碼。您可以從上方的按鈕下載完整的源代碼。

<div class="dropdown">
    <input type="checkbox" id="checkbox-toggle">
    <label for="checkbox-toggle">Click to Expand</label>
    <ul>
        <li><a href="#">Link One</a></li>
        <li><a href="#">Link Two</a></li>
        <li><a href="#">Link Three</a></li>
        <li><a href="#">Link Four</a></li>
    </ul>
</div>
body{
    text-align: center;
    font: 16px/1.5 sans-serif;
    padding-top: 40px;
    background-color: #ECEFF1;
}

.dropdown{
    position: relative;
    display: inline-block;
    font-size: 16px;
    color: #FFF;
}

/**
    Hide the checkbox itself. Checking and unchecking 
    it we will be done via the label element.
*/

input[type=checkbox]{
    display: none;
}

/* Click to expand button */

label{
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    background-color: #57A0D4;
    padding: 15px 20px;

    cursor: pointer;
    text-align: center;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*  The ul will have display:none by default */

ul{
    position: absolute;
    list-style: none;
    text-align: left;
    width: 100%;
    z-index: 1;
    margin:0;
    padding:0;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);

    display: none;
}

ul li{
    padding: 15px;
    background-color: #fff;
    color: #4FB9A7;
    margin-bottom: 1px;
    cursor: pointer;
}

ul li:hover{
    background-color: #4FB9A7;
    color: #FFF;
}

ul li a{
    color: inherit;
    text-decoration: none;
}

/**

    By using the Following-sibling selector (~),
    we can target elements positioned after our checkbox in the DOM tree.

    With the state pseudo selector (:checked),
    we can make changes depending on the state of the checkbox.

    Using this combination of selectors
    allows to change the color of the label
    and show the list of items
    only when the checkbox is checked.

*/

input[type=checkbox]:checked ~ label {
    background-color: #3D88BD;
}

input[type=checkbox]:checked ~ ul {
    display: block;
}

標記

這就是我們的 HTML 結構的樣子。這裡需要注意的是,input 元素必須在 label 之前 在 ul 之前 .稍後,當我們檢查 CSS 時,您就會明白為什麼需要這樣做。

<div class="dropdown">
    <input type="checkbox" id="checkbox_toggle">
    <label for="checkbox_toggle">Click to Expand</label>
    <ul>
        <li><a href="#">Link One</a></li>
        <li><a href="#">Link Two</a></li>
        <li><a href="#">Link Three</a></li>
        <li><a href="#">Link Four</a></li>
    </ul>
</div>

如您所見,這裡並沒有什麼特別之處,所有元素都是標準的、常用的 HTML:

  • div 將作為整個事物的容器。
  • 輸入類型=複選框 是必需的,因為它是選中/未選中的屬性。它會一直隱藏起來
  • 標籤 將用於切換輸入,也將用作下拉菜單的觸發器。
  • ul 只是一個我們希望在擴展下拉列表時可見的列表。可以是任何其他元素。

複選框黑客

我們只需要複選框 checked 的元素 狀態,我們可以使用 :checked CSS 偽選擇器。通過單擊標籤來檢查和取消選中它,這是一個基本的瀏覽器功能。我們先隱藏複選框:

input[type=checkbox]{
    display: none;
}

我們還默認隱藏了 UL - 它是下拉菜單,只有在下拉菜單展開時才可見。

ul{
    display: none;
}

這是黑客。如果我們結合 :checked 帶有通用兄弟選擇器的選擇器 (~ ) 我們可以更改複選框後面元素的 CSS 屬性。這就是我們需要復選框在 ul 之前首先出現的原因 在 DOM 樹中。

input[type=checkbox]:checked ~ ul {
    display: block
}

僅當選中復選框時,上面的 CSS 片段才會顯示無序列表。由於復選框類型輸入的可能狀態是二進制的,因此非常適合在展開和隱藏狀態之間切換項目。

希望您喜歡我們的快速提示!


Tutorial JavaScript 教程
  1. 使用 Kendo UI 和 Vue 創建音樂播放器應用程序

  2. 學習 JavaScript 免費課程

  3. 在 JavaScript (.js) 文件中包含 PHP

  4. 值是對象嗎

  5. 5 分鐘學會 Vuex。

  6. 如何從 Nodejs 的循環中添加 MySQL 查詢結果?

  7. 如何在 Ionic 中對圖像和其他靜態資產進行指紋識別以進行緩存破壞?

  1. 您是對機器學習感興趣的網絡開發人員嗎?這是關於 Brain.js 的免費課程!

  2. 🔑 使用 Next.js、Prisma 和 next-auth 進行無密碼身份驗證

  3. 2021 年開發者必備技能

  4. 如何使用 React、Hardhat 和 ethers.js 製作全棧 dapp,並附上示例

  5. JavaScript 是否保證是單線程的?

  6. JavaScript 中的打字機效果(視頻)

  7. 避免 react-hooks/exhaustive-deps 的最佳方法是什麼?

  1. 為什麼我從 Gatsby 搬到 Astro

  2. 將您的 dev.to 帖子添加到您的網站

  3. 多用途表作為 CRM 和待辦事項列表

  4. 使用 React 和 Stripe 構建支付系統