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

Hôm nay Namkna 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:

Xem Demo

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/AVvXsEh5EzeKTnrv5enIZTpzZAGHyjZPS8mXqLnnvQsynayZAEp6XTUoG28GRYQfCPk5f8UYPk0w0eZLvFXFFo7075uHYJVb-ii_Spr0sUqpUx_WXmNtw7hLSOFOCIU9mlrbpogKaU1ws4_2A_4s/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!

theo: dynamicdrive.