Tạo Menu Cơ Bản

Tạo menu ngang đơn giản

Để tạo menu ngang, chúng ta sẽ sử dụng thẻ <ul> để tạo khu vực menu và <li> để tạo từng mục trong menu đó. Do vậy, trước tiên chúng ta có đoạn cấu trúc menu bằng HTML như sau, mình sẽ đặt menu vào trong một cái thẻ <div> với id là #menu

 

       <div id="menu"> 
		<ul> 
			<li><a href="#">Trang chủ</a></li> 
			<li><a href="#">Diễn đàn</a></li> 
			<li><a href="#">Tin tức</a></li> 
			<li><a href="#">Hỏi đáp</a></li> 
			<li><a href="#">Liên hệ</a></li> 
		</ul> 
	</div>

Kế tiếp là ta có thêm một đoạn CSS sau để reset CSS cho dễ viết CSS về sau, và thêm một số style cho toàn trang web như dùng font chữ có chân chẳng hạn.

/*==Reset CSS==*/ 
* { 
        margin: 0; padding: 0; 
} 
/*==Style cơ bản cho website==*/ 
body { 
	font-family: sans-serif; color: #333; 
}

Được rồi, bây giờ chúng ta sẽ tiến hành xử lý cái menu.

Trước tiên là phần bao bọc menu (tức là thẻ <ul> trong #menu), chúng ta sẽ sử dụng thuộc tính list-style để xóa các dấu đầu dòng, thêm màu nền và đưa văn bản bên trong ra giữa cho đẹp nha.

/*==Style cho menu===*/ 
#menu ul { 
	background: #1F568B; 
        list-style: none; 
        text-align: center; 
}

Kết quả ta tạm có như sau:

css-menu-basic-01

Kế tiếp, chúng ta sẽ muốn cho các mục con nằm dàng ngang nên sẽ dùng gì nè? Vâng, bạn có thể sử dụng float: left cho tất cả thẻ <li> hoặc đưa về kiểu hiển thị inline-block.

 inline-block không thể set width và height. inline thì không thể

#menu li { 
	color: #f1f1f1; 
	display: inline-block;
	width: 120px; 
	height: 40px; 
	line-height: 40px; 
	margin-left: -5px; 
}

Sở dĩ kiểu float mình không có margin-left: -5px là vì cái 5px kia là kiểu display: inline-block nó tự sinh ra nên phải xóa nó đi bằng cách này

Kết quả:

css-menu-basic-02

Và cuối cùng là thêm style cho các thẻ <a> bên trong, quan trọng nhất là sẽ đưa kiểu hiển thị cho các thẻ này thành block để nó được phủ kín cái #menu ul.

#menu a { 
	text-decoration: none; 
	color: #fff; display: block; 
} 
#menu a:hover { 
	background: #F1F1F1; 
	color: #333; 
}

":hover" chọn các liên kết được hover (di chuyển chuột lên thành phần).

Kết quả

css-menu-basic-0

Tạo menu dọc đơn giản

Bây giờ giống như ở trên. Chúng ta sẽ sử dụng thẻ <ul> để tạo khu vực menu và <li> để tạo từng mục trong menu đó

<div id="menu">
		<ul>
			<li><a href="#">Thời trang</a></li>
			<li><a href="#">Giải trí</a></li>
			<li><a href="#">Bóng đá</a></li>
			<li><a href="#">Công nghệ</a></li>
			<li><a href="#">Kinh doanh</a></li>
		</ul>
</div>

chúng ta sẽ sử dụng thuộc tính list-style , để xóa các dấu đầu dòng, thêm màu nền và đưa văn bản bên trong ra giữa cho đẹp nha.

#menu ul{
	list-style: none;
	width: 150px;
	background: #1F568B;
	margin: 0;
	padding: 0;
        text-align: center;
}

Kết quả tạm có:

 

Kế tiếp chúng ta sẽ tạo kiểu cho thẻ <li>. Dùng height để thêm chiều cao, line-height để cho text ra giữa, border-bottom để thêm đường viền dưới

 

#menu ul li{
	border-bottom: 1px solid white;
        height: 40px;
	line-height: 40px;
}

Kết quả:

Và cuối cùng là thêm style cho các thẻ <a> bên trong, quan trọng nhất là sẽ đưa kiểu hiển thị cho các thẻ này thành block để nó được phủ kín cái #menu ul.   ":hover" chọn các liên kết được hover (di chuyển chuột lên thành phần).

#menu a{
	display: block;
	color: white;
	text-decoration: none;
}
#menu a:hover{
	background: white;
	color: black;
}

Kết quả:


BÀI TẬP

Bài 1

Code demo:

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
	<div id="menu">
		<ul>
			<li><a href="#">Trang chủ</a></li>
			<li><a href="#">Diễn đàn</a></li>
			<li><a href="#">Dịch Vụ</a></li>
			<li><a href="#">Giới thiệu</a></li>
			<li><a href="#">Liên hệ</a></li>
		</ul>
	</div>
</body>
</html>

style.css

 

/* CSS Document */
*{
	margin: 0;
	padding: 0;
}
body{
	background: #BADB00;
}
#menu{
/*	background: red;*/
	width: 100%;
	height: 1080px;
	background: url(banner1.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	margin: 0 auto;
}
#menu ul{
	list-style: none;
	height: 30px;
	width: 400px;
	margin: 0 auto;
	border-radius: 10px;
	background: #009BFF
}
#menu ul li{
	float: left;
/*	margin-left: 2px;*/
/*	background: #009BFF;*/
	width: 80px;
	height: 30px;
	text-align: center;
	line-height: 30px;
}
#menu ul li a{
	text-decoration: none;
	color: white;
	display: block;
	transition-duration: 2s;
	border-radius: 10px;
}
#menu ul li:hover a{
/*	border-radius: 10px;*/
	background: pink;
	color: black;
}

 

Bài 2

Bài 3

Hình ảnh: banner.jpg

Khang Xin

Bài 4

Hình ảnh: Banner, Logo.png, ava.png

Source code Bai 4: Sidebar Menu – Copy