Các Bạn Vui Lòng Chờ Trong Giây Lát Đang tải dữ liệu Từ ITnguyenHuy...
Thứ Tư, 12 tháng 9, 2012 - 0 nhận xét

Menu dọc chuyển động khi dê chuột - Vertical CSS3 Menus


Hôm nay hahuyhoanglong giới thiệu cho các bạn một mẫu Menu mới nhìn khá đẹp mắt. Đặc điểm của mẫu này là có hiệu ứng khi ta de chuột vào các Sub menu.
Các bạn có thể xem Demo để tháy rõ hơn:


Các bước tiến hành:
1. Vào  thiết Kế
2. Chọn  Chỉnh sửa HTML
3. Dán Code sau trước thẻ  </head>
<style>

ul.svertical{
width: 200px; /* width of menu */
overflow: auto;
background: black; /* background of menu */
margin: 0;
padding: 0;
padding-top: 7px; /* top padding */
list-style-type: none;
}

ul.svertical li{
text-align: right; /* right align menu links */
}

ul.svertical li a{
position: relative;
display: inline-block;
text-indent: 5px;
overflow: hidden;
background: rgb(127, 201, 68); /* initial background color of links */
font: bold 16px Germand;
text-decoration: none;
padding: 5px;
margin-bottom: 7px; /* spacing between links */
color: black;/*Màu chữ*/
-moz-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8); /* inner right shadow added to each link */
-webkit-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
-moz-transition: all 0.2s ease-in-out; /* CSS3 transition of hover properties */
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

ul.svertical li a:hover{
padding-right: 30px; /* add right padding to expand link horizontally to the left */
color: black;
background: rgb(153,249,75);
-moz-box-shadow: inset -3px 0 2px rgba(114,114,114, 0.8); /* contract inner right shadow */
-webkit-box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
}

ul.svertical li a:before{ /* CSS generated content: slanted right edge */
content: "";
position: absolute;
left: 0;
top: 0;
border-style: solid; 
border-width: 70px 0 0 20px; /* Play around with 1st and 4th value to change slant degree */
border-color: transparent transparent transparent black; /* change black to match the background color of the menu UL */

}

</style>
4. Tạo 1 HTML/Javarscrip và dán Code bên dưới vào:
<ul class="svertical">
<li><a href="http://namkna.blogspot.com/search/label/Blogspot-tips">Thủ thuật Blog</a></li>
<li><a href="http://namkna.blogspot.com/search/label/BlogYahoo-Tips" >Thủ thuật Yahoo</a></li>
<li><a href="http://namkna.blogspot.com/2011/05/xem-tivi-truc-tuyen.html">Xem tivi</a></li>
<li><a href="http://namkna.blogspot.com/2011/02/thu-gian-cuoi-tuan-full.html">Thư giãn cuối tuàn</a></li>
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIfslBec7c7sxpKV4s8AeJe9dzbsCMhk9Oqbe8jAewqdrguz3MzuW3Yf3VBxPK5s8YWaNfM9V2imKjV_4vtCa195rx5LXNFj360S1Ql-FaA2wkjQ2-v7SGLjljOcSDhfaHKAmdVYLt2hp5/s1600/namkna-logo.png">Namkna.blogspot.com</a></li>
<li><a href="http://namkna.blogspot.com/2011/01/bao-loi-bai-dang.html">Help</a></li>
</ul>
Chúc thành công!

0 nhận xét:

Đăng nhận xét

Liên Hệ Email

Bắc
Trung
Nam
piano
Guita
trống

* Required Create Email Forms

Recent Posts

Danh Mục Bài Viết!!!