RSSCSS

Hướng dẫn tạo Dropdown Menu với CSS3

Dropdown menu là dạng menu rất phổ biến trên nhiều trang web đặc biệt là những trang web có cấu trúc phức tạp và cần nhiều mục để hiển thị hết nội dung của trang. Hôm nay, mình sẽ giới thiệu với các bạn bài hướng dẫn nhanh cách tạo Dropdown Menu với CSS3 kèm theo việc chèn icon vào website không cần hình ảnh, không cần đến jQuery.

HTML

Đầu tiên là chúng ta tạo menu cha

  
   	<nav> 
        <ul class="menu">
            <li><a href="#">Trang chủ</a></li>
            <li><a href="#">Giới thiệu</a></li>
            <li><a href="#">Dịch vụ</a></li>
            <li><a href="#">Liên hệ</a></li>
        </ul>
    </nav>

CSS3

CSS dành cho menu cha

 
nav {
	position: relative;
	color: #fff;
	border: 1px solid #222;
	position: relative;
	z-index: 1;
	background: #395775;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;}

.menu li {
	float: left;
	position: relative;}

.menu li a {
	color: #fff;
	display: block;
	font-size: 14px;
	line-height: 20px;
	padding: 15px 25px;
	text-decoration: none;
	-webkit-transition: background 0.5s ease;
	-moz-transition: background 0.5s ease;
	-o-transition: background 0.5s ease;
	-ms-transition: background 0.5s ease;
	transition: background 0.5s ease;}

.menu li a:hover {
	background: #222;}

HTML Dropdown Menu

 
	<nav>
		<ul class="menu">
			<li>....</li>
			<li><a href="#">Giới thiệu</a>
				<ul>
					<li><a href="#">Sứ mệnh công ty</a></li>
					<li><a href="#">Quy mô công ty</a></li>
				</ul>
			</li>
			<li><a href="#">Dịch vụ</a>
				<ul>
					<li><a href="#">Lập trình Website</a></li>
					<li><a href="#">Thiết kế và in ấn</a></li>
					<li><a href="#">Dịch vụ đẩy PageRank</a></li>
					<li><a href="#">Dịch vụ SEO</a></li>
				</ul>
			</li>
			<li>...</li>
		</ul>

CSS Dropdown Menu

 
.menu ul {
	position: absolute;
	left: -9999px;
	list-style: none;
	opacity: 0;
	transition: opacity 1s ease;}

.menu ul li {
	float: none;}

.menu ul a {
	white-space: nowrap;}

.menu li:hover ul {
	border-radius: 0 0 4px 4px;
	box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4);
	left: 0px;
	opacity: 1;
	background: #333;}

.menu li:hover ul a {
	background: none;
	border-radius: 0;
	box-shadow: none;}

.menu li:hover ul li a:hover {
	background: #222;
	border-radius: 0 0 4px 4px;}

Các bạn chú ý khi rê chuột vào menu con, menu cha mất đi màu background. Nên chúng ta sẽ bổ sung thêm một đoạn CSS để fix lỗi này.

.menu li:hover a {
	background: #222;} 


Hướng dẫn tạo Dropdown Menu với CSS3

Icon

Lúc trước khi muốn chèn icon vào menu thì chúng ta thường chèn theo kiểu hình ảnh. Nay mình giới thiệu một cách chèn hiệu quả, nhẹ và nhanh hơn nhiều.

Các bạn vào trang genericons.com, download bộ source về. Giải nén và copy thư mục font và file genericons.css vào trong thư mục gốc của bài hướng dẫn này.

Hướng dẫn tạo Dropdown Menu với CSS3

Tiếp theo ta khai báo để đưa file genericons.css vào trong web.

 <link href="/genericons.css" media="screen" rel="stylesheet" type="text/css" />

Sau đó đưa icon vào website thông qua đoạn mã HTML dưới đây, đặt trong thẻ <head>

	<ul class="menu">
		<li><a href="#"><span class="genericon genericon-home"></span>Trang chủ</a></li>
	</ul>

Các bạn thắc mắc dòng genericon genericon-home ở đâu ra. Các bạn tiếp tục vào trang genericons.com, chọn một icon, sau đó để ý đoạn Copy HTML, click vào đó, ta sẽ được một đoạn mã để nhúng icon vào website.

Hướng dẫn tạo Dropdown Menu với CSS3

Bạn làm tương tự với những menu còn lại. Bạn sẽ nhanh chóng tạo ra những icon đặt trong menu nhưng nhược điểm là số lượng icon chưa nhiều, chưa đa dạng và không có nhiều màu sắc như những icon thông thường.

Hướng dẫn tạo Dropdown Menu với CSS3

 

Nguồn: Y2Graphic
Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu