RSSCSS

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 [...]

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

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin k��ch hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu