Lưu Quang Triệu

Không ngừng sáng tạo thì sẽ không sợ bị diệt vong

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

Posted by millionking on February 14, 2014

<div class='ribbon'>
2     <a href='#'><span>Home</span></a>
3     <a href='#'><span>About</span></a>
4     <a href='#'><span>Services</span></a>
5     <a href='#'><span>Contact</span></a>
6 </div>

Đây là dạng cấu trúc menu bình thường, 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.

01 * {
02     /* Basic CSS reset */
03     margin:0;
04     padding:0;
05 }
06  
07 body {
08     /* These styles have nothing to do with the ribbon */
09     background:url(dark_wood.png) 0 0 repeat;
10     padding:100px 0 0;
11     margin:auto;
12     text-align:center;
13 }
14  
15 .ribbon {
16     display:inline-block;
17 }
18  
19 .ribbon a:link, .ribbon a:visited {
20     color:#000;
21     text-decoration:none;
22     float:left;
23     height:3.5em;
24     overflow:hidden;
25 }
26  
27 .ribbon span {
28     background:#fff;
29     display:inline-block;
30     line-height:3em;
31     padding:0 1em;
32     margin-top:0.5em;
33     position:relative;
34  
35     -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */
36     -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
37     -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
38     -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */
39     transition: background-color 0.2s, margin-top 0.2s;
40 }
41  
42 .ribbon a:hover span {
43     background:#FFD204;
44     margin-top:0;
45 }

 

Tiếp đến chúng ta tạo thuộc tính before, after cho phần hover của Ribbon Menu, 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 rê chuột vào thì link sẽ được nổi lên kèm theo Ribbon.

01 .ribbon span:before {
02     content"";
03     position:absolute;
04     top:3em;
05     left:0;
06     border-right:0.5em solid #9B8651;
07     border-bottom:0.5em solid #fff;
08 }
09  
10 .ribbon span:after {
11     content"";
12     position:absolute;
13     top:3em;
14     right:0;
15     border-left:0.5em solid #9B8651;
16     border-bottom:0.5em solid #fff;
17 }

 

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

01 .ribbon:after, .ribbon:before {
02     margin-top:0.5em;
03     content"";
04     float:left;
05     border:1.5em solid #fff;
06 }
07  
08 .ribbon:after {
09     border-right-color:transparent;
10 }
11  
12 .ribbon:before {
13     border-left-color:transparent;
14 }

 

DEMO

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: