Cách tạo css responsive menu đơn giản

Chào mọi người, responsive là một công nghệ layout mới và rất hay, được đánh giá là một sự bức phá sáng tạo và đáng để các web design quan tâm. Ở bài trước mình đã chia sẻ bài web responsive cơ bản và để tiếp tục hôm nay mình sẽ đến với cách tạo css responsive menu.

menu responsive css html bcdonline net

Menu responsive css

Menu là một điều không thể thiếu trong một website, nó đóng vai trong là một bản chỉ dẫn, điều hướng người dùng đến mọi nơi trong website để khai thác thông tin, đối với một web responsive thì việc bố trí menu theo hướng responsive cũng quan trọng.

Nhận xét theo layout menu là thành phần nhiều mãnh ghép lại, nếu không xử lý css responsive menu cẩn thận sẽ dễ vỡ giao diện và làm cho website mình mất đi tính thẩm mỹ, cảm giác khó chịu và gây khó khăn cho người dùng khi duyệt web. Bây giờ bcdonline.net chia sẻ cách mà cách bạn tạo css responsive menu đơn giản nhưng rất hiệu quả.

Cách tạo css responsive menu

Cấu trúc menu chúng tao bao gồm nhiều link bao quanh cấu trúc ul li quan thuộc, và css responsive menu sẽ được tạo và tối ưu ở các tuy chỉnh màn hình như: 1024px, 930px, 580px, 320px. Đương nhiên là ở mỗi chế độ là lơn hơn hoặc bằng rồi 🙂 Đầu tiên bạn thực hiện DOWNLOAD RESPONSIVE MENU hoặc xem DEMO MENU (Links gốc menu responsive). Sau đó mở thử mục lên và xem cấu trúc menu được viết như sau:

<!--
<nav>	
	<ul>
		<li><a href="#" title="Lập Trình">Lập Trình</a></li>
		<li><a href="#" title="HTML & CSS">HTML & CSS</a></li>
		<li><a href="#" title="PHP & MySQL">PHP & MySQL</a></li>
		<li><a href="#" title="Lập Trình C/C++">Lập Trình C/ C++</a></li>
		<li><a href="#" title="WordPress">WordPress</a></li>
		<li><a href="#" title="Joomla">Joomla</a></li>
		<li><a href="#" title="Phát Triển WEB">Phát Triển WEB</a></li>
		<li><a href="#" title="Đồ Họa">Đồ Họa</a></li>
	</ul>
</nav>
-->

Quên một điều quan trong khác nữa, ở bài trước mình đã giới thiệu cách mà chúng ta dùng responsive, trong việc tạo css responsive menu cũng thế, phải thêm đoạn javascript của google vào trong thẻ head, bạn làm như sau:

<!--
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
-->

Tiếp theo mình sẽ đinh dạng CSS cho menu của mình, thì tùy vào cách của mỗi người định dạng như thế nào cho đẹp, không thì bạn làm như trong file của mình đã chia sẻ, thay đổi màu sắc, font chữ, kích thước các item … là được như ý muốn.


body{
     // Định dạng tag body
}	
h1{
     // CSS cho thẻ H1
}	
nav {
    // Khung menu nav
}
nav ul {
    // Định dạng CSS cho thẻ UL
}
nav li a {
     // CSS cho thẻ a trong menu
}
nav li a:hover {
     // CSS thuộc tính hover cho thẻ a trong menu
}
nav li:last-child a {
    // định dạng thẻ a cuối cùng của menu
}

Xem như xong phần CSS cơ bản cho responsive menu của chúng ta, bây giờ mới là công việc chính, tạo css responsive cho menu như đã giới thiệu ở trên, chủ yếu là định dạng theo kích cở màn hình 1024px, 930px, 580px, 320px

@media only screen and (max-width : 1024px)
{
	nav li a {
		font-size:10px;}
}

@media only screen and (max-width : 930px){
	nav li a {
		width: 25%;
		border-bottom: 1px solid #fff;
		font-size:11px;}	
		
	nav li:last-child a, nav li:nth-child(4) a {
		border-right: none;}
	
	nav li:nth-child(5) a, nav li:nth-child(6) a, nav li:nth-child(7) a, nav li:nth-child(8) a {
		border-bottom: none;}
}

@media only screen and (max-width : 580px){
	nav li a {
		width: 100%;
		font-size:12px;
		border-right: none;}
	
	nav li:nth-child(5) a, nav li:nth-child(6) a, nav li:nth-child(7) a {
		border-bottom: 1px solid #fff;}
}

@media only screen and (max-width : 320px){
	nav li a {
		font-size:11px;}
}

Sau khi hoàn tất các bước, demo ở cách dạng màn hình ta được 3 dạng css responsive menu như sau:

demo responsive css menu

Demo Responsive Menu CSS

Kết luận: Cách tạo css responsive menu đơn giản, đúng như bản chất của nó hii cũng khá đơn giản, bạn có thể chế biến thêm nhiều hơn trong nó, bcdonline.net mong là sẽ giúp được các bạn. Chúc thành công!

VN:F [1.9.22_1171]
Rating: 9.0/10 (8 votes cast)
Cách tạo css responsive menu đơn giản, 9.0 out of 10 based on 8 ratings
Share This