- Tham gia
- 28/02/2015
- Bài viết
- 17,142
- Được Like
- 12,745
Hướng dẫn tạo menu dọc đơn giản cho website
Trong thiết kế web có hai dạng menu cơ bản là menu ngang và menu dọc. Ở bài trước mình đã hướng dẫn các bạn Tạo menu ngang đơn giản bằng CSS và HTML, tiếp bài viết hôm nay mình sẽ hướng dẫn các bạn xây dựng và hoàn thiện dạng menu thứ hai là menu dọc. Cũng tương tự như menu ngang thì menu dọc cũng có menu một cấp và menu đa cấp.
Trong nội dung bài này thì mình sẽ hướng dẫn các bạn xây dựng dạng menu dọc một cấp đơn giản từ HTML và CSS nhé.
Dưới đây là hình ảnh menu dọc một cấp sau khi chúng ta hoàn thành. Ở đây mình sẽ xây dựng một list danh mục tin tức.
Để làm được điều đó trước tiên chúng ta tạo một file menu.html để chứa các thẻ HTML. Sau đó các bạn mở file lên mà viết xây dựng các thẻ HTML như sau:
Trên đây là mình dùng một thẻ <div> để bao bọc các nội dung bên trong. Dùng thẻ <h1> để làm tiêu đề danh mục menu và dùng định dạnh danh sách không sắp xếp để tạo một list danh mục tin tức.
Tiếp theo để định dạng và xây dựng một menu dọc như chúng ta muốn thì mình sẽ dùng các lệnh CSS để điều chỉnh nó. Ở phần CSS này các bạn có thể viết trực tiếp trong phần <head> hoặc tạo một file CSS bên ngoài rồi sau đó dẫn nó vào file chứa menu.html chứa các thẻ HTML. Ở đây mình sẽ tạo một file CSS style.css bên ngoài và sau đó dẫn file đó vào file chứa HTML.
Đầu tiên mình sẽ định dạnh cho thẻ <div> bên ngoài như sau:
Vì phần menu chúng ta có thể thêm bớt tùy ý nên mình sẽ không định dạng chiều cao của nó. Nhằm mục đích sẽ để nó tự căn chiều cao cho phù hợp khi ngắn khi dài.
Tiếp theo chúng ta sẽ dùng CSS định dạng cho thẻ <h1> tiêu đề danh mục menu.
Bước kế tiếp chúng ta sẽ định dạng cho thẻ <ul>.
Sau đó bước tiếp theo chúng ta sẽ định dạng cho thẻ <a> nhé.
Nếu muốn cho nó đẹp hấp dẫn một chút khi chúng ta đưa chuột vào menu thì các bạn có thể thêm lệnh hover cho thẻ <a>.
Và đây là code hoàn chỉnh để xây dựng một menu dọc một cấp đơn giản.
HTML
CSS
Như vậy là mình vừa hướng dẫn các bạn xây dụng một menu dọc một cấp đơn giản bằng HTML và CSS. Hy vọng sẽ giúp ích cho những bạn mới bắt đầu với việc layout website nhé.
Chúc các bạn thành công.
Trong thiết kế web có hai dạng menu cơ bản là menu ngang và menu dọc. Ở bài trước mình đã hướng dẫn các bạn Tạo menu ngang đơn giản bằng CSS và HTML, tiếp bài viết hôm nay mình sẽ hướng dẫn các bạn xây dựng và hoàn thiện dạng menu thứ hai là menu dọc. Cũng tương tự như menu ngang thì menu dọc cũng có menu một cấp và menu đa cấp.
Trong nội dung bài này thì mình sẽ hướng dẫn các bạn xây dựng dạng menu dọc một cấp đơn giản từ HTML và CSS nhé.
Dưới đây là hình ảnh menu dọc một cấp sau khi chúng ta hoàn thành. Ở đây mình sẽ xây dựng một list danh mục tin tức.
Mã:
<div id="left">
<h1>DANH MỤC</h1>
<ul>
<li><a href="#">Tin Tức Kinh Tế</a></li>
<li><a href="#">Tin Tức Xã Hội</a></li>
<li><a href="#">Tin Tức Thể Thao</a></li>
<li><a href="#">Tin Tức Pháp Luật</a></li>
<li><a href="#">Tin Tức Giáo Dục</a></li>
<li><a href="#">Tin Tức Âm Nhạc</a></li>
<li><a href="#">Tin Tức Văn Hóa</a></li>
<li><a href="#">Tin Tức Phim Ảnh</a></li>
<li><a href="#">Tin Tức Thời Trang</a></li>
<li><a href="#">Tin Tức Thị Trường</a></li>
<li><a href="#">Tin Tức Thế Giới</a></li>
</ul>
</div>Trên đây là mình dùng một thẻ <div> để bao bọc các nội dung bên trong. Dùng thẻ <h1> để làm tiêu đề danh mục menu và dùng định dạnh danh sách không sắp xếp để tạo một list danh mục tin tức.
Tiếp theo để định dạng và xây dựng một menu dọc như chúng ta muốn thì mình sẽ dùng các lệnh CSS để điều chỉnh nó. Ở phần CSS này các bạn có thể viết trực tiếp trong phần <head> hoặc tạo một file CSS bên ngoài rồi sau đó dẫn nó vào file chứa menu.html chứa các thẻ HTML. Ở đây mình sẽ tạo một file CSS style.css bên ngoài và sau đó dẫn file đó vào file chứa HTML.
Đầu tiên mình sẽ định dạnh cho thẻ <div> bên ngoài như sau:
Mã:
#left{
width:165px;
}Vì phần menu chúng ta có thể thêm bớt tùy ý nên mình sẽ không định dạng chiều cao của nó. Nhằm mục đích sẽ để nó tự căn chiều cao cho phù hợp khi ngắn khi dài.
Tiếp theo chúng ta sẽ dùng CSS định dạng cho thẻ <h1> tiêu đề danh mục menu.
Mã:
#left h1{
background:#99CC00;
color:#FFFFFF;
font-size:14px;
text-align:center;
}Bước kế tiếp chúng ta sẽ định dạng cho thẻ <ul>.
Mã:
#left ul{
list-style-type:none;
margin:0px;
padding:0px;
}Sau đó bước tiếp theo chúng ta sẽ định dạng cho thẻ <a> nhé.
Mã:
#left ul a{
text-decoration:none;
line-height:25px;
color:#333333;
background:#EEEEEE;
display:block;
width:150px;
border-top:1px solid #FFFFFF;
border-bottom:1px solid #CCCCCC;
padding-left:15px;
}Nếu muốn cho nó đẹp hấp dẫn một chút khi chúng ta đưa chuột vào menu thì các bạn có thể thêm lệnh hover cho thẻ <a>.
Mã:
#left ul a:hover{
background:#FFCC99;
}Và đây là code hoàn chỉnh để xây dựng một menu dọc một cấp đơn giản.
HTML
Mã:
<div id="left">
<h1>DANH MỤC</h1>
<ul>
<li><a href="#">Tin Tức Kinh Tế</a></li>
<li><a href="#">Tin Tức Xã Hội</a></li>
<li><a href="#">Tin Tức Thể Thao</a></li>
<li><a href="#">Tin Tức Pháp Luật</a></li>
<li><a href="#">Tin Tức Giáo Dục</a></li>
<li><a href="#">Tin Tức Âm Nhạc</a></li>
<li><a href="#">Tin Tức Văn Hóa</a></li>
<li><a href="#">Tin Tức Phim Ảnh</a></li>
<li><a href="#">Tin Tức Thời Trang</a></li>
<li><a href="#">Tin Tức Thị Trường</a></li>
<li><a href="#">Tin Tức Thế Giới</a></li>
</ul>
</div>CSS
Mã:
#left{
width:165px;
}
#left h1{
background:#99CC00;
color:#FFFFFF;
font-size:14px;
text-align:center;
}
#left ul{
list-style-type:none;
margin:0px;
padding:0px;
}
#left ul a{
text-decoration:none;
line-height:25px;
color:#333333;
background:#EEEEEE;
display:block;
width:150px;
border-top:1px solid #FFFFFF;
border-bottom:1px solid #CCCCCC;
padding-left:15px;
}
#left ul a:hover{
background:#FFCC99;
}Như vậy là mình vừa hướng dẫn các bạn xây dụng một menu dọc một cấp đơn giản bằng HTML và CSS. Hy vọng sẽ giúp ích cho những bạn mới bắt đầu với việc layout website nhé.
Chúc các bạn thành công.
Nguồn: tuhocphp.com
Bài viết liên quan
Bài viết mới
