Cách làm menu dropdown responsive chỉ dùng css

February 19, 2020

Có rất nhiều cách để thiết kế một menu dropdown responsive cho webiste của bạn mà nhiều người đã chia sẽ trên mạng.

Tuy nhiên hầu hết các menu dropdown responsive đều liên quan đến javascript, jquery. Mà nếu bạn không rành mấy cái này thì nó hơi phiền phức khi ứng dụng vào website của bạn. Và thêm nữa mỗi lần đụng đến javascript hay jquery là website bạn sẽ bị ảnh hưởng đôi chút để quá trình tải trang, làm ảnh hưởng đến tốc độ lướt web của người dùng.

Chả ai muốn trang web của mình bị chậm cả và tôi cũng vậy. Tôi thích sự mượt mà và đặc biệt ghét dùng mấy cái jquery và javascript khi thật sự không cần thiết. Vậy nên sau thời gian mày mò tất cả các nguồn trên mạng tôi đã tìm ra một chia sẽ cách làm menu dropdown responsive chỉ với css mà thôi. Nay thôi xin chia sẽ lại để ai đó cần thì có thể sử dụng.

Phần html của menu

<nav class=”nav” role=”navigation”>
<label for=”drop” class=”toggle”><i class=”fas fa-bars”></i></label>
<input type=”checkbox” id=”drop”>
<ul class=”menu”><li><a href=”#”>Home</a></li>
<li><a href=”#”>Du lịch</a></li>
<li ><a href=”#”>Ẩm thực</a>
<ul class=”sub-menu”>
<li ><a href=”#”>Miền Nam</a></li>
<li ><a href=”#”>Miền Trung</a></li>
<li ><a href=”#”>Miền Bắc</a></li>
</ul>
</li>
</ul>
</nav>

Phần CSS cần để hiển thị được menu responsive

.toggle + a,.menu{display:none}
.toggle{display:block;background-color:#254441;padding:14px 20px;color:#FFF;font-size:17px;text-decoration:none;border:none}
.toggle:hover{background-color:#000000}
[id^=drop]:checked + ul{display:block}
nav ul ul .toggle,nav ul ul a{padding:0 40px}
nav ul ul ul a{padding:0 80px}
nav a:hover,nav ul ul ul a{background-color:#000000}
nav ul li ul li .toggle,nav ul ul a,nav ul ul ul a{padding:14px 20px;color:#FFF;font-size:17px}
nav ul li ul li .toggle,nav ul ul a{background-color:#212121}
nav ul ul li:hover > ul,nav ul li:hover > ul{display:none}
nav ul ul li{display:block;}
nav ul ul ul li{position:static}
[id^=drop]{display:none}
nav{margin:0;padding:0;background-color:#254441}
nav:after{content:””;display:table;clear:both}
nav a{display:block;padding:14px 20px;color:#FFF;font-size:17px;text-decoration:none}
nav a:hover{background-color:#000000}
nav ul ul{display:none;position:absolute;width:100%;z-index:999}
nav ul li ul li:hover{background:#000000}
nav ul li:hover > ul{display:inherit}
li > a:after{font-family: “Font Awesome 5 Free”;content: ‘ \f0dd’;font-weight: 600;}
li > a:only-child:after{content:”}
@media only screen and (min-width:768px) {
nav{padding:0 18px!important}
.toggle{display:none!important}
.toggle + a,.menu{display:block!important}
nav ul{float:right;padding:0;margin:0;list-style:none;position:relative}
nav ul li{margin:0;display:inline-block;float:left;background-color:#254441}
nav ul ul li{width:170px;float:none;display:list-item;position:relative;}
nav ul ul ul li{position:relative;top:-60px;left:170px;}
}

Chỉ đơn giản vậy là đã có một menu dropdown responsive cho website của mình rồi.

Lưu ý:

  • các icon của awesome font bên trong code sử dụng phiên bản 5.0 trở lên.
  • Nguồn: trên mạng nhưng đã qua chỉnh sửa lại và theo sở thích mobile trước desktop sau.

Nút Whatsapp chỉ hoạt động trên thiết bị di động

Leave a Reply

Your email address will not be published. Required fields are marked *