Cách tạo menu dropdown bằng CSS

Menu dropdown là một giải pháp không thể thiếu cho các trang web, blog đặc biệt là các trang có số lượng chỉ mục thể loại nhiều không có thể sắp xếp. Dropdown menu có nhiều dạng, có thể sử dụng jQuery, Java … tuy nhiên trong bài hôm nay mình chỉ giới thiệu với các bạn cách tạo menu dropdown bằng CSS.

Thông thường menu dropdown chúng ta sẽ sử dụng với file javascript cũng khá là khó để hiểu được nó bạn có thể xem lại bài hướng dẫn dùng một số javascript có đề cập về tạo ra menu sử dụng js. Cách này tuy khó hiểu nhưng bù lại bạn sẽ có các chuyển động hiệu ứng menu đẹp.

mau dropdown menu bang css

Mẫu dropdown menu bằng CSS


Cách làm menu dropdown bcdonline.net sẽ giới thiệu sau đây sẽ dành cho những bạn thích tự code, tự tạo ra và quản lý chúng. Menu tạo ra từ cách làm này đơn giản, chạy nhanh, tối ưu SEO và cấu trúc đơn giản, mình dễ dàng kiểm soát code trong đó.

XEMO DEMO DROPDOWN MENU BẰNG CSS

Đầu tiên bạn sẽ phải tạo ra một file HTML với nội dung là các thẻ UL LI để tạo ra dạng LIST trước, sau đó mình sẽ xử lý nó bằng CSS sau.

<!--
<div class="main">
	<ul>
		<li><a href="http://bcdonline.net/">bcdonline.net</a></li>
		<li><a href="http://bcdonline.net/category/lap-trinh/">Lập Trình</a>
			<ul>
				<li><a href="http://bcdonline.net/category/lap-trinh/html-css/">HTML & CSS</a></li>
				<li><a href="http://bcdonline.net/category/lap-trinh/asp-net-sql/">ASP.Net & SQL Server</a></li>
				<li><a href="http://bcdonline.net/category/lap-trinh/php-mysql/">PHP & MySQL</a></li>
			</ul>	
		</li>
		<li><a href="http://bcdonline.net/category/wordpress/">WordPress</a></li>
		<li><a href="http://bcdonline.net/category/joomla/">Joomla</a></li>
		<li><a href="http://bcdonline.net/lien-he/">Liên Hệ</a></li>
	</ul>
</div>	

-->

Bạn dễ dàng hình dung ra được giao diện qua đoạn code HTML trên, tiếp đến bạn vào thẻ HEAD của file HTML vừa tạo sau import một file CSS vào và hiển nhiên file css.css bạn sẽ tạo ra cùng thư mục của file MENU đó.

<!--
     <link href="css.css" rel="stylesheet" type="text/css" />
-->

Bạn vào trong file css.css copy đoạn code sau vào:

	*{
		margin:0; 
		padding: 0
	}
	.main {
		margin: 30px 100px;
		background: #367AEB;
		float: left;
	}

	.main ul {
		float: left;
		list-style: none;
	}

	.main ul li {
		position: relative;
		float: left;
	}

	.main li a {
		display: block;
		color: #ffffff;
		font-weight: bold;
		text-decoration: none;
		text-transform: uppercase; 
		padding: 10px 15px;
	}

	.main li a:hover {
		background: #70A0F1;
	}

	.main li ul{
		background: #70A0F1;
		position: absolute;
		display: none;
		width: 230px;
	}
	.main li ul a:hover{
		color: #FF0000;
	}

	.main li:hover ul{
		display: block;
	}

	.main ul li ul li {
		width: 100%;
	}

	.main li:hover > a{
		background: #70A0F1;
	}

Kết quả chúng ta sẽ được giao diện như sau, các bạn chỉ việc chỉnh sửa lại viền, màu sắc, background, hover…. để có được menu dropdown như ý muốn.

Dropdown menu bằng css

Dropdown menu bằng css

Nói về “hover > a” trong CSS

Đoạn code trên có lẻ các bạn đọc và hiểu được, mình muốn nhắt đến một điều ở phần design CSS trên đó là “hover > a” trong menu dropdown người ta hay sử dụng. Tùy chỉnh này sẽ áp dụng cho link hover ở cấp chứa con được hover chuột vào.

Dùng hover a trong dropdown menu

Dùng hover > a trong dropdown menu

     ul li:hover > a{
        //Định dạng các thuộc tính. 
     }

Ngoài ra trong menu dropdown người ta hay dùng các thuộc tính khác như bên dưới bạn có thể tìm hiểu và ngâm cứu thêm nha!

   ul a:active{
   }

   ul a:focus{
   }

Kết luận: OK, vậy là đã có một Dropdown menu ngon lành mà không cần dùng một chút JavaScript nào, ưu điểm rất nhẹ nhàng load nhanh cấu trúc đơn giản dể lập trình. Mong là bài viết của bcdonline.net lần này sẽ giúp ít được cho các bạn. Quên nữa, lưu ý với các bạn là làm bằng cách này chỉ hỗ trợ trình duyệt hiện đại như IE7 trở lên. Chúc thành công!

DOWNLOAD FILE MENU BẰNG CSS CỦA BÀI NÀY

VN:F [1.9.22_1171]
Rating: 9.8/10 (9 votes cast)
Cách tạo menu dropdown bằng CSS, 9.8 out of 10 based on 9 ratings
Share This