Cách tạo Ribbon Menu bằng CSS3

Menu CSS là xu hướng gần như là phải dùng cho dân design bởi có nhiều lợi ích cho việc load web, cũng như sự thích ứng với các trình duyệt. Lúc chiều lang thang gặp được bài tạo menu ribbon với CSS3 cũng khá hay và thú vị nên tham khảo viết lại cho các bạn xem, nguồn mình post ở cuối bài.

Là dân sử dụng blog wordpress CSS Ribbon Menu có lẻ sẽ không còn xa lạ với tất cả các bạn sử dụng WordPress Themes Premium, dạng menu ribbon này thích hợp cho một theme dạng nhà hàng khách sạn, hay cafe ẩm thực… Và bây giờ chúng ta sẽ đi vào chi tiết cách tạo Ribbon Menu bằng CSS3.

Trước đây nếu muốn tạo một menu dạng Ribbon thì bạn phải thiết kế hình ảnh rất khổ và sẽ khó khăn cho các bạn không rành về Đồ họa WEB, còn bây giờ chỉ mới vài dòng CSS3 bạn có thể có một Ribbon Menu như ý muốn. Điều này ngoài việc tiết kiệm công sức, mà còn giúp web chạy nhanh hơn rất nhiều vì không phải load mình ảnh. DEMO / DOWNLOAD FILE

Menu này hoạt động không được tốt trên IE7, IE8, tuy nhiên đã có cách khắc phục bằng việc thêm :before và :after lát nữa chúng ta sẽ đề cập đến nó và bây giờ làm theo bài hướng dẫn, các bạn tạo cấu trúc menu như sau:

<!--
<div class='ribbon'>
    <a href='#'><span>Home</span></a>
    <a href='#'><span>About</span></a>
    <a href='#'><span>Services</span></a>
    <a href='#'><span>Contact</span></a>
</div>
-->

Đây là cấu trúc menu bình thường mà các bạn đã quen sử dụng rồi đúng không nào, bây giờ chúng ta sẽ định dạng phần cơ bản cho Menu, tạo khung và các thuộc tính hover cho Ribbon Menu bằng CSS3.

<!--
* { 
	/* Basic CSS reset */
	margin:0; 
	padding:0;
}

body {
	/* These styles have nothing to do with the ribbon */
	background:url(dark_wood.png) 0 0 repeat;
	padding:100px 0 0;
	margin:auto;
	text-align:center;
}

.ribbon {
	display:inline-block;
}

.ribbon a:link, .ribbon a:visited { 
	color:#000;
	text-decoration:none;
	float:left;
	height:3.5em;
	overflow:hidden;
}

.ribbon span {
	background:#fff;
	display:inline-block;
	line-height:3em;
	padding:0 1em;
	margin-top:0.5em;
	position:relative;

	-webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */
	-moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
	-ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
	-o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */
	transition: background-color 0.2s, margin-top 0.2s;
}

.ribbon a:hover span {
	background:#FFD204;
	margin-top:0;
}
-->
Menu ribbon link CSS3

Menu ribbon link CSS3

Tiếp đến chúng ta tạo thuộc tính before, after cho phần hover của Ribbon Menu CSS3, công việc này là nét đặc trưng cũng như là phần quan trọng của menu chúng ta, khi giơ chuột và thì link sẽ được nổi lên kèm theo Ribbon.

<!--
.ribbon span:before {
	content: "";
	position:absolute;
	top:3em;
	left:0;
	border-right:0.5em solid #9B8651;
	border-bottom:0.5em solid #fff;
}

.ribbon span:after {
	content: "";
	position:absolute;
	top:3em;
	right:0;
	border-left:0.5em solid #9B8651;
	border-bottom:0.5em solid #fff;
}
-->
Ribbon before after span CSS menu

Ribbon before after span CSS menu

Tiếp theo chúng ta sẽ làm việc đơn giản là tạo đuôi cho menu ( hai đuôi cá ở đầu và cuối của Ribbon Menu CSS3 ). Bạn có hai giai đoạn là tạo viền và cắt viền.

<!--
.ribbon:after, .ribbon:before {
	margin-top:0.5em;
	content: "";
	float:left;
	border:1.5em solid #fff;
}

.ribbon:after {
	border-right-color:transparent;
}

.ribbon:before {
	border-left-color:transparent;
}
-->
Duoi menu ribbon CSS

Duoi menu ribbon CSS

Kết luận: Vậy coi như chúng ta đã tạo được Ribbon Menu bằng CSS3 mà không dùng bất kì hình ảnh nào, bạn có thể dễ dàng áp dụng nó vào trong các web, blog nhà hàng khách sạn, cafe spa… rất tuyệt vời. Chúc mọi người thành công!

Nguồn: http://www.jacklmoore.com/notes/css3-ribbon-menu

VN:F [1.9.22_1171]
Rating: 9.1/10 (8 votes cast)
Cách tạo Ribbon Menu bằng CSS3, 9.1 out of 10 based on 8 ratings
Share This