Làm menu cấp 3 phần 2 Hover effect

20/05/2019

Bài sau » « Bài trước

Chào các bạn, Ở phần 1 chúng ta đã làm được menu cấp 3 đơn giản. Hover vào menu cha thì show menu con. Hôm nay, Chúng ta làm nâng cao hơn xíu là sử dụng một số hiệu ứng cho mượt hơn nhé.

Đầu tiên, Xem lại phần menu cấp 3 đã làm ở bài trước hoặc link Demo menu.

Tiếp theo, Ý tưởng như sau:
- Khi hover vào menu cấp 1, thì menu cấp 2 từ dưới bay lên trên.
- Khi hover menu cấp 2, thì menu cấp 3 từ phải bay sang trái.

Để làm hiệu ứng như vậy thì ở menu con ta bỏ dòng css display: none; và code thêm như sau: opacity: 0; visibility: hidden; top: 150%; transition: all 0.5s ease-in-out;. Bộ đôi opacityvisibility nên đi cùng nhau, nếu không menu sẽ bị lỗi khi chỉ sử dụng opacity, lúc hiển thị không được mượt nếu chỉ sửa dụng visibility.

Khi hover chuột vào menu cấp 1 thì ta change thuộc tính trên thành : opacity: 1; visibility: visible; top: 100%; . Khi này menu cấp 2 sẽ chạy từ vị trí cách top 150% về top 100% trong 0.5s, đồng thời cũng thay đổi trạng thái của opacity và visible.

Và menu con cấp 3 thì bay từ phải qua trái nên ta sửa css tthành left: 150%; . Khi hover vào thì left: 100%;

.menu-cap3 li .menu-sub{ list-style: none; position: absolute; top: 100%; left: 0; width: 200px; box-shadow: 0px 1px 8px -4px #333; background-color: #e89e51; /*display: none;*/ opacity: 0; visibility: hidden; top: 150%; transition: all 0.5s ease-in-out; } .menu-cap3 li .menu-sub ul{ top: 0; /*left: 100%;*/ left: 150%; } .menu-cap3 li:hover > .menu-sub{ /*display: block;*/ opacity: 1; visibility: visible; top: 100%; } .menu-cap3 li .menu-sub li:hover > ul{ top: 0; left: 100%; }

Xem lại code HTML của menu:

<ul class="menu-cap3 clearfix" > <li><a href="#" >Trang chủ</a> </li> <li> <a href="#" >Sản phẩm</a> <ul class="menu-sub" > <li><a href="#" >Sản phẩm A</a> </li> <li> <a href="#" >Sản phẩm B</a> <ul class="menu-sub" > <li><a href="#" >Sản phẩm B - 1</a> </li> <li><a href="#" >Sản phẩm B - 2</a> </li> <li><a href="#" >Sản phẩm B - 3</a> </li> <li><a href="#" >Sản phẩm B - 4</a> </li> </ul> </li> <li><a href="#" >Sản phẩm C</a> </li> <li><a href="#" >Sản phẩm D</a> </li> </ul> </li> <li> <a href="#" >Về chúng tôi</a> <ul class="menu-sub" > <li><a href="#" >Lịch sử hình thành</a> </li> <li><a href="#" >Mục tiêu và sứ mệnh</a> </li> <li><a href="#" >Đối tác</a> </li> </ul> </li> <li><a href="#" >Chính sách</a> </li> <li><a href="#" >Liên hệ</a> </li> </ul>

Và đây là CSS hoàn chỉnh cho menu cấp 3 có hover effect.

*{margin:0;padding:0;} .clearfix:before,.clearfix:after{ content: ''; display: table; clear: both; } .menu-cap3{ width: 1200px; margin: 0 auto; list-style: none; background-color: #e89e52; } .menu-cap3 > li{ float: left; } .menu-cap3 > li a{ font-size: 16px; display: block; padding: 10px 15px; text-decoration: none; border-right: 1px solid #e0caca; color: #fff; } .menu-cap3 > li:last-child a{ border-right: 0; } .menu-cap3 li{ position: relative; } .menu-cap3 li .menu-sub{ list-style: none; position: absolute; top: 100%; left: 0; width: 200px; box-shadow: 0px 1px 8px -4px #333; background-color: #e89e51; /*display: none;*/ opacity: 0; visibility: hidden; top: 150%; transition: all 0.5s ease-in-out; } .menu-cap3 li .menu-sub ul{ top: 0; /*left: 100%;*/ left: 150%; } .menu-cap3 li:hover > .menu-sub{ /*display: block;*/ opacity: 1; visibility: visible; top: 100%; } .menu-cap3 li .menu-sub li:hover > ul{ top: 0; left: 100%; } .menu-cap3 li:hover > a { background: #b36c22; }

Chúc các bạn thành công. Nếu có chỗ nào thắc mắc thì hãy comment để thảo luận nhé!

Bài sau » « Bài trước
Back to top