Kĩ thuật này mình dùng cho theme default và dùng menu smooth_navigational_menu nhưng với các themes và menu khác cũng tương tự nhé:
Đây là Demo trên website của mình: http://kenzano.byethost4.com
Cách thực hiện:
Mở file ddsmoothmenu.css:
- Với menu ngang các bạn tìm đến dòng
và thay đoạn code sau vào:
Tiếp đó kéo xuống ngay dưới đó tìm đến đoạn code:
và thay bằng đoạn code này:
- Với menu dọc các bạn cũng làm tương tự, các bạn tìm đến đoạn
và thay bằng đoạn code này vào:
Tiếp theo tìm đến đoạn
thay bằng :
Chúc các bạn thành công!
Đây là Demo trên website của mình: http://kenzano.byethost4.com
Cách thực hiện:
Mở file ddsmoothmenu.css:
- Với menu ngang các bạn tìm đến dòng
- Mã: Chọn hết
.ddsmoothmenu ul li a:hover {
và thay đoạn code sau vào:
- Mã: Chọn hết
background: #222;
color: white;
font-family:"Times New Roman";
font-size:16px;
text-align: center;
width:90px;
height:28px;
transition: width 0.5s;
-moz-transition: width 0.5s; /* Firefox 4 */
-webkit-transition: width 0.5s; /* Safari and Chrome */
-o-transition: width 0.5s; /* Opera */
border-bottom: 1px solid #444;
border-top: 1px solid #111;
border-right: 1px solid #111;
border-left: 1px solid #444;
padding: 10px;
}
Tiếp đó kéo xuống ngay dưới đó tìm đến đoạn code:
- Mã: Chọn hết
.ddsmoothmenu ul li a:hover {
và thay bằng đoạn code này:
- Mã: Chọn hết
background:#666;
opacity: 0.6;
overflow:hidden;
color: #fff;
width:110px;
}
- Với menu dọc các bạn cũng làm tương tự, các bạn tìm đến đoạn
- Mã: Chọn hết
.ddsmoothmenu-v ul li a:link, .ddsmoothmenu-v ul li a:visited, .ddsmoothmenu-v ul li a:active {
và thay bằng đoạn code này vào:
- Mã: Chọn hết
background: #f2f2f2; /*background of menu items (default state)*/
color: blue;
opacity: 0.9;
text-indent: 8px;
width:161px;
height:20px;
background:#f2f2f2;
transition:width 0.5s;
-moz-transition:width 0.5s; /* Firefox 4 */
-webkit-transition:width 0.5s; /* Safari and Chrome */
-o-transition:width 0.5s; /* Opera */
}
Tiếp theo tìm đến đoạn
- Mã: Chọn hết
.ddsmoothmenu-v ul li a:hover {
thay bằng :
- Mã: Chọn hết
background: #555;
color: #fff;
width: 178px;
opacity: 0.9;
}
Chúc các bạn thành công!
