Dự án thiết kế website doanh nghiệp 13

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/AVvXsEjqbCaIdfTlU-AdrSF_V-YhCLxNz8KVt1YPspy_wOIt7SIZ6CzTUHSzVcD-nCLMdNMaFdUnYz_pj6dVCCTVkbq0twJ8enxoepwmw4a7d6iAQKyJFiy8x-SgXRKeNE8uf6b6K6Jf7gCAtqFX/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!

 MỌI THÔNG TIN VUI LÒNG LIÊN HỆ NGAY VỚI CHÚNG TÔI :   

TRUNG TÂM NGHIÊN CỨU PHÁT TRIỂN CÔNG NGHỆ THẾ KỶ   

Phụ trách thiết kế : Mr.Mika 

Call me : 0926.340.479 - 0927.927.000 - Email :  Lienhe365@gmail.com 

Phụ trách kỹ thuật và kinh doanh : Mr. Sơn

Call me : 0919.083.000 - 0927.927.000   Email :   Setup247@Gmail.Com 
Hỗ trợ ZALO 24/24 :   Nhập số 0927.927.000 và zalo kết bạn và liên hệ nhé!