不使用JavaScript實現(xiàn)菜單的打開和關閉效果demo
我在寫有菜單欄的網(wǎng)頁時，基本都會用響應式設計來適配移動端，例如把不重要的菜單選項隱藏，或者創(chuàng)建一個菜單按鈕來控制的菜單的打開和關閉之類的。而我之前一直是使用JavaScript來實現(xiàn)菜單的打開和關閉的，但最近在網(wǎng)上看到有人使用CSS和HTML來實現(xiàn)這一功能，讓我真正的感受到手里只要有一把錘，什么都可以做釘子。
實現(xiàn)之前先來看一下HTML標簽和輸入類型：
label
<label> 標簽為 input 元素定義標注（標記）。
label 元素不會向用戶呈現(xiàn)任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發(fā)此控件。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。
<label> 標簽的 for 屬性應當與相關元素的 id 屬性相同。
Input Type: checkbox
<input type="checkbox"> 定義復選框。
復選框允許用戶在有限數(shù)量的選項中選擇零個或多個選項。
下面是demo的代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>menu demo</title>
<link rel="stylesheet" rel="external nofollow" >
<style>
.demo {
text-align: center;
}
/* 點擊checkbox時，菜單打開或顯示 */
#menu-checkbox:checked ~ .nav {
display: none;
}
/* 隱藏checkbox的復選框 */
#menu-checkbox {
display: none;
}
.nav ul{
list-style: none;
margin: 0;
padding: 0;
font-size: 20px;
}
.glyphicon-menu-hamburger {
font-size: 30px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="demo">
<!-- label綁定checkbox -->
<label for="menu-checkbox"><span class="glyphicon glyphicon-menu-hamburger"></label>
<input id="menu-checkbox" type="checkbox">
<div class="nav">
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>
</div>
</div>
</body>
</html>
效果：
點擊上面的hamburger圖標，菜單就會顯示和隱藏。
雖然是很簡單的一個東西，不過它對于我而言更多的是一種啟發(fā)。
以上所述是小編給大家介紹的不使用JavaScript實現(xiàn)菜單的打開和關閉效果，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
相關文章
使用Axios攔截器優(yōu)化HTTP請求與響應的實踐案例
在前端開發(fā)中,HTTP 請求是與后端交互的重要方式,為了提高代碼的可維護性、復用性以及用戶體驗,使用 Axios 攔截器是非常常見的做法,本文將詳細介紹如何使用 Axios 的請求攔截器和響應攔截器,需要的朋友可以參考下2024-11-11
JavaScript實現(xiàn)html轉pdf的三種方法詳解
近期項目需要實現(xiàn)將?html?頁面轉換成?pdf?報告的需求,經(jīng)過一番調研以及結合過往經(jīng)驗,發(fā)現(xiàn)了三種技術方案,下面我們就來看看它們的具體實現(xiàn)步驟吧2024-02-02
Bootstrap datepicker日期選擇器插件使用詳解
這篇文章主要為大家詳細介紹了Bootstrap datepicker日期選擇器插件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
聲明一個數(shù)值類型的變量我看到三種;我嘴角微微一笑：少年你還嫩了點，哪止三種，我知道的至少有五種,好奇的你可以參考下哈，希望本文可以幫助到你2013-02-02
今天讀John Resig的Pro Javascript Techniques時候看到他書上給的一個關于drag and drop的例子，我做的第二件事就是js模擬用鼠標拖出矩形框，代碼很簡單2009-04-04
js實現(xiàn)點擊切換checkbox背景圖片的簡單實例
下面小編就為大家?guī)硪黄猨s實現(xiàn)點擊切換checkbox背景圖片的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
今天在編碼時，遇到一個問題，特記錄下。希望對朋友有所幫助。2010-12-12
使用frame頁面嵌套，重啟了服務器的時候會出現(xiàn)登錄頁面在frame頁面中出現(xiàn)，解決方法是在登錄頁面里面用js判斷下當前的地址信息2014-07-07
最近做項目的時候碰到一個問題： 在js里面使用window.close()，IE下工作正常，但是FireFox下有時可以，有時不行。2008-12-12
下面小編就為大家?guī)硪黄W(wǎng)頁中的圖片查看器viewjs使用方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07