Lợi thế của tiện ích menu này chính là nhẹ, được làm hoàn toàn từ CSS và tốc độ tải nhanh, không ảnh hưởng gì đến hiệu năng của website, đặc biệt chuẩn SEO. Để thực hiện thủ thuật này cực kỳ đơn giản, các bạn chỉ cần thực hiện theo các bước sau là sẽ thành công.
Đầu tiên các bạn hãy vào Blog Title → Template → Edit HTML.
Nhấn tổ hợp phím Ctrl + F. Tìm đến đoạn <b:skin>...</b:skin> và chèn vào giữa nó. Hoặc tìm kiếm ]]></b:skin> và chèn trước ]]></b:skin>.
#abt-nav,#abt-nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
#abt-nav {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvIoMePf5P4cCh5UIlWQ_QhNoaFAtJ0tuQR4HEn47WP_PHAeid2Ybrs1lw6XHo9pAX_o_GGPBsyX6CkJLfL9lpglmN0ORyNVrcHkDN72mTe9FckFNy5QPDIpaO78B5H6RjD7YmBM3niab7/s1600/Menu1.png') no-repeat scroll 0 0 transparent;
clear: both;
font-size: 12px;
height: 58px;
padding: 0 0 0 9px;
position: relative;
width: 100%;
}
#abt-nav ul {
background-color: #222;
border:1px solid #222;
border-radius: 0 5px 5px 5px;
border-width: 0 1px 1px;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
left: -9999px;
overflow: hidden;
position: absolute;
top: -9999px;
z-index: 2;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-o-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-moz-transition: -moz-transform 0.1s linear;
-ms-transition: -ms-transform 0.1s linear;
-o-transition: -o-transform 0.1s linear;
-webkit-transition: -webkit-transform 0.1s linear;
transition: transform 0.1s linear;
}
#abt-nav li {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzy9lslky_BI7N1nhNMG8FW-Ys6brTZ9jS-xuJ4ny1lr1rWpJrts5VOtkxanS8Jxu0KbOyJ2W-jnLjtIMz_FnY-Xl9zbbU8Ac8G7R5wKprEj14kix8y6AR6TQFPSMtft4EZBqn8Q8tIYEr/s1600/Menu2.png') no-repeat scroll right 5px transparent;
float: left;
position: relative;
}
#abt-nav li a {
color: #FFFFFF;
display: block;
float: left;
font-weight: normal;
height: 30px;
padding: 23px 20px 0;
position: relative;
text-decoration: none;
text-shadow: 1px 1px 1px #000000;
}
#abt-nav li:hover > a {
color: #00B4FF;
}
#abt-nav li:hover, #abt-nav a:focus, #abt-nav a:hover, #abt-nav a:active {
background: none repeat scroll 0 0 #121212;
outline: 0 none;
}
#abt-nav li:hover ul.subs {
left: 0;
top: 53px;
width: 180px;
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
#abt-nav ul li {
background: none;
width: 100%;
}
#abt-nav ul li a {
float: none;
}
#abt-nav ul li:hover > a {
background-color: #121212;
color: #00B4FF;
}
#lavalamp {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht6sBhyQ3EDzRzKKe0M3x_cZkKdMyeJih3k6ik3Y6eGBQ6QnoldWcSGPi1nl-u7SBFkZnzBgPvp02L7SEj-ILMTQ9Ii4HgCGuo2eh_gE5jSbkmrhdob7oAzcgweBrtoraWPTB1cgaMbaGn/s1600/Menu3.png') no-repeat scroll 0 0 transparent;
height: 16px;
left: 13px;
position: absolute;
top: 0px;
width: 64px;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
#lavalamp:hover {
-moz-transition-duration: 3000s;
-ms-transition-duration: 3000s;
-o-transition-duration: 3000s;
-webkit-transition-duration: 3000s;
transition-duration: 3000s;
}
#abt-nav li:nth-of-type(1):hover ~ #lavalamp {
left: 13px;
}
#abt-nav li:nth-of-type(2):hover ~ #lavalamp {
left: 90px;
}
#abt-nav li:nth-of-type(3):hover ~ #lavalamp {
left: 170px;
}
#abt-nav li:nth-of-type(4):hover ~ #lavalamp {
left: 250px;
}
#abt-nav li:nth-of-type(5):hover ~ #lavalamp {
left: 330px;
}
#abt-nav li:nth-of-type(6):hover ~ #lavalamp {
left: 410px;
}
#abt-nav li:nth-of-type(7):hover ~ #lavalamp {
left: 490px;
}
#abt-nav li:nth-of-type(8):hover ~ #lavalamp {
left: 565px;
}
Đăng nhận xét