Thiết Kế Web

Xây dựng menu dọc một cấp đơn giản

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 và Tạo menu ngang hai cấp bằ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 Tạo menu ngang hai cấp bằng CSS và HTML cơ bản bằng HTML và CSS, tiếp bài viết hôm nay mình sẽ hướng dẫn các ban 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.

Untitled-1_03

Để 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 (Tìm hiểu về các thẻ định dạnh danh sách).

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ứ 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ể theo 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 như 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é. Mong nhận được phản hồi và góp ý của các bạn. Bài sau mình sẽ hướng dẫn các bạn xây dựng dạng menu dọc thứ hai đó là dạng menu đa cấp.

Thẻ:, , , ,
comments powered by Disqus
Powered by HTH Company