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

Ở bài này tôi muốn giới thiệu đến các bạn một menu css3 khá đẹp mắt đó là Ribbon Menu, đặc biệt nó chỉ sử dụng html & css3 nhưng đem lại hiểu quả khá đẹp mắt và được sử dụng khá rộng rãi trong các website như nhà hàng, quán cafe.... Nó cũng hoạt động khá tốt trên hầu hết các trình duyệt.

1. HTML

- Cấu trúc HTML của menu khá đơn giản

<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>

2. CSS

- Tiếp theo ta định dạng các cấu trúc cơ bản của menu bao gồm khung, hiệu ứng background-color khi hover...

<!--
* { 
    /* 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;
}
-->

- Điểm nổi bật của ribbon menu là hiệu ứng nổi & đổ bóng của các item khi được hover qua. Đoạn css thực hiện công việc này như sau

<!--
.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;
}
-->

- Tiếp theo chúng ta cần cắt đuôi cá cho menu, cả bên trái và bên phải

<!--
.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;
}
-->

3. Kết luận.

Ribbon menu theo tôi thấy là một menu nhẹ, không cần phải sử dụng hình ảnh, script nào. Và nó khá đẹp để áp dụng vào các website nhà hàng, quán cafe... 

- Các bạn tham khảo cụ thể hơn tại đây

- Xem demo tại đây

Chúc các bạn thành công!

Related Post


50 Thủ thuật CSS không thể bỏ qua – Part 3
Sunday, April 6, 2014
Tiếp theo những phần trước, hôm nay chúng ta tìm hiểu thêm một số thủ thuật CSS hay sử dụng trong quá trình thiết kế website.
50 Thủ thuật CSS không thể bỏ qua – Part 2
Sunday, March 30, 2014
Tiếp theo bài trước, hôm nay chúng ta sẽ nghiên cứu thêm một số thủ thuật css nhỏ nữa. Nó đơn giản nhưng lại dễ quên nếu không hay dùng, vì vậy mình tổng hợp lại để một ngày nào quên thì lôi ra đọc...
Search

Đăng ký nhận bài mới


Category

Blog Archive