NGANH XỔ DỌC DROPDOWN (5)

Menu DropDown 1 cấp cho blogspot Style 6

Fairstar | 01-04-2012 | nhận xét (38)

Nếu chưa thử áp dụng menu này, mình chắc chắn sẽ rất nhiều người cho rằng chỉ có j Query mới có thể tạo ra các menu có hiệu ứng mượt mà và hấp dẫn. Tuy nhiên với menu này thì tất cả chỉ có thể nói là "không gì là không thể". Bạn hãy xem Demo và cảm nhận khả năng tùy biến vượt trội của CSS.

Demo for Post

☼ Cách tiến hành:

   1- Đăng nhập vào Blog

   2- Vào thiết kế

   3- Chọn Chỉnh sử HTML (Không cần mở rộng tiện ích mẫu)

   4- Thêm đoạn code sau vào trước thẻ  </head> .

<style type='text/css'>
#catmenucontainer{
height:29px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoOR3BcWn66W7AMJJkPcpt-0V-aQ8f1F-aq26pezkvPjIR8jWcQa8-9fR9MS7vKPFmnKLCbc3SD3Q_myQSds60JZGW7rb_wCIzNLwHwz6-znWZPJOiqJ-TTyvedO1r9M61SPPUMKJbHMz/s1600/catmenu-namkna-ngoctra.jpg) repeat-x;
display:block;
padding:0px 0 0px 0px;
font: 14px &quot;Century gothic&quot;,verdana, Arial, sans-serif;
font-weight:normal;
border-top:1px solid #686D6F;
}

#catmenu ,#catmenu ul {
margin: 0px 5px;
padding: 0px;
list-style: none;
height:29px;
}

#catmenu  a {
color: #999;
display: block;
font-weight: normal;
padding: 4px 10px 6px 10px;
}

#catmenu  a:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7ErTmb3hNhbbBGk8ekCGxBN32RoehQ5ipElB15GZLQsu1GXLD_2QbHy3-iCs7c_AFjoBUHtK7NE9IRoDq3dUIqv4XGmvyDjCbZlQ6NuldA1AF38yuzt9lCZzkacumVndN5l3mZLVgYpVn/s1600/catmenuhov-namkna-ngoctra.jpg) repeat-x;
color: #fff;
display: block;
text-decoration: none;
}

#catmenu  li {
float: left;
margin: 0px;
padding: 0px;
}

#catmenu  li li {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 130px;
}

#catmenu  li li a, #catmenu  li li a:link, #catmenu  li li a:visited {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoOR3BcWn66W7AMJJkPcpt-0V-aQ8f1F-aq26pezkvPjIR8jWcQa8-9fR9MS7vKPFmnKLCbc3SD3Q_myQSds60JZGW7rb_wCIzNLwHwz6-znWZPJOiqJ-TTyvedO1r9M61SPPUMKJbHMz/s1600/catmenu-namkna-ngoctra.jpg) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#E8EBEE;
border-bottom:1px solid #2C3133;
}

#catmenu  li li a:hover, #catmenu  li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7ErTmb3hNhbbBGk8ekCGxBN32RoehQ5ipElB15GZLQsu1GXLD_2QbHy3-iCs7c_AFjoBUHtK7NE9IRoDq3dUIqv4XGmvyDjCbZlQ6NuldA1AF38yuzt9lCZzkacumVndN5l3mZLVgYpVn/s1600/catmenuhov-namkna-ngoctra.jpg) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#fff;
border-bottom:1px solid #2C3133;
}

#catmenu  li ul {
position: absolute;
width: 10em;
left: -999em;
z-index:1;
}

#catmenu  li:hover ul {
left: auto;
display: block;
}

#catmenu  li:hover ul, #catmenu li.sfhover ul {
left: auto;
}
</style>

6- Lưu lại

7- Thêm 1 HTML/Javarscrip và dán vào (hoặc Thêm đoạn code bên dưới vào trước thẻ  </header>.)

<div id='catmenucontainer'>
<div id='catmenu'>
<ul>
<li><a href='#' title='#'>Home</a></li>
<li><a href='#' title='#'>Web Design</a>
<ul class='children'>
<li><a href='#' title='#'>HTML</a></li>
<li><a href='#' title='#'>CSS</a></li>
<li><a href='#' title='#'>JavaScript</a></li>
</ul>
</li>

<li><a href='#' title='#'>Templates</a>
<ul class='children'>
<li><a href='#' title='#'>1 Column</a></li>
<li><a href='#' title='#'>2 Column</a></li>
<li><a href='#' title='#'>3 Column</a></li>
<li><a href='#' title='#'>4 Column</a></li>
</ul>
</li>

<li><a href='#' title='#'>Subscribe</a>
<ul class='children'>
<li><a href='#' title='#'>Email</a></li>
</ul>
</li>

<li><a href='#' title='#'>News</a></li>

<li><a href='#' title='#'>Google</a>
<ul class='children'>
<li><a href='#' title='#'>Yahoo</a></li>
<li><a href='#' title='#'>MSN</a></li>
</ul>
</li>

<li><a href='#' title='#'>About</a></li>
<li><a href='#' title='#'>Contact</a></li>
<li><a href='#' title='#'>PrivacyPolicy</a></li>
</ul>
</div>
</div>

Chúc thành công!