.jpg)
Xem Demo
Đăng nhập vào Blogger
Bạn đăng nhập vào Blogger: Bảng điều khiển (Dashboard) l Thiết kế (Design) l Chỉnh sửa HTML (Edit HTML)
Chèn mã CSS/ JavaScript
1. Tìm (Ctrl-F) đoạn mã:
2. Thay thế bằng đoạn mã dưới:
<style type='text/css'>
.droplinebar{
overflow: hidden;
}
.droplinebar ul{
margin: 0;
padding: 0;
float: left;
width: 100%;
font: bold 13px Arial;
background: #242c54 url(http://www.dynamicdrive.com/cssexamples/bluedefault.gif) center center repeat-x; /*default background of menu bar*/
}
.droplinebar ul li{
display: inline;
}
.droplinebar ul li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
}
.droplinebar ul li a:visited{
color: white;
}
.droplinebar ul li a:hover, .droplinebar ul li .current{ /*background of main menu bar links onMouseover*/
color: white;
background: transparent url(http://www.dynamicdrive.com/cssexamples/blueactive.gif) center center repeat-x;
}
/* Sub level menus*/
.droplinebar ul li ul{
position: absolute;
z-index: 100;
left: 0;
top: 0;
background: #303c76; /*sub menu background color */
visibility: hidden;
}
/* Sub level menu links style */
.droplinebar ul li ul li a{
font: normal 13px Verdana;
padding: 6px;
padding-right: 8px;
margin: 0;
border-bottom: 1px solid navy;
}
.droplinebar ul li ul li a:hover{ /*sub menu links' background color onMouseover */
background: #242c54;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/*********************
//* jQuery Drop Line Menu- By Dynamic Drive: http://www.dynamicdrive.com/
//* Last updated: June 27th, 09'
//* Menu avaiable at DD CSS Library: http://www.dynamicdrive.com/style/
*********************/
var droplinemenu={
arrowimage: {classname: 'downarrowclass', src: 'down.gif', leftpadding: 5}, //customize down arrow image
animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds
buildmenu:function(menuid){
jQuery(document).ready(function($){
var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){
var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
this._dimensions={h:$curobj.find('a:eq(0)').outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false
if (!this.istopheader)
$subul.css({left:0, top:this._dimensions.h})
var $innerheader=$curobj.children('a').eq(0)
$innerheader=($innerheader.children().eq(0).is('span'))? $innerheader.children().eq(0) : $innerheader //if header contains inner SPAN, use that
$innerheader.append(
'<img src="'+ droplinemenu.arrowimage.src
+'" class="' + droplinemenu.arrowimage.classname
+ '" style="border:0; padding-left: '+droplinemenu.arrowimage.leftpadding+'px" />'
)
$curobj.hover(
function(e){
var $targetul=$(this).children("ul:eq(0)")
if ($targetul.queue().length<=1) //if 1 or less queued animations
if (this.istopheader)
$targetul.css({left: $mainmenu.offset().left, top: $mainmenu.offset().top+this._dimensions.h})
if (document.all && !window.XMLHttpRequest) //detect IE6 or less, fix issue with overflow
$mainmenu.find('ul').css({overflow: (this.istopheader)? 'hidden' : 'visible'})
$targetul.slideDown(droplinemenu.animateduration.over)
},
function(e){
var $targetul=$(this).children("ul:eq(0)")
$targetul.slideUp(droplinemenu.animateduration.out)
}
) //end hover
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible', width:$mainmenu.width()})
}) //end document.ready
}
}
//]]>
</script>
<script type='text/javascript'>
droplinemenu.arrowimage.src="http://lh6.ggpht.com/_wi2BBfk28Mg/TBY_tXeO3YI/AAAAAAAAEjI/yaja2ehQTuw/down.gif"
//build menu with DIV ID="myslidemenu" on page:
droplinemenu.buildmenu("mydroplinemenu")
</script>
</head>
<script type="text/javascript">
3. Lưu lại mẫu Template
Chèn mã HTML
1. Bạn vào Thiết kế (Design) l Phần tử trang (Page Element) l Thêm tiện ích (Add widget) l HTML/Javascript
2. Và dán đoạn code dưới vào trong phần nội dung của HTML/Javascript
<div class="droplinebar" id="mydroplinemenu">
<ul>
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Examples</a>
<ul>
<li><a href="http://draft.blogger.com/post-create.do#">Activities 1</a></li>
<li><a href="http://draft.blogger.com/post-create.do#">Activities 2</a></li>
<li><a href="http://draft.blogger.com/post-create.do#">Activities 3</a>
<ul>
<li><a href="http://draft.blogger.com/post-create.do#">Water Sports 1</a></li>
<li><a href="http://draft.blogger.com/post-create.do#">Water Sports 1</a></li>
<li><a href="http://draft.blogger.com/post-create.do#">Water Sports 1</a></li>
<li><a href="http://draft.blogger.com/post-create.do#">Water Sports 1</a></li>
</ul>
</li>
<li><a href="http://draft.blogger.com/post-create.do#">Activities 4</a></li>
</ul>
</li>
<li><a href="http://tools.dynamicdrive.com/">Tools</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript</a>
<ul>
<li><a href="http://draft.blogger.com/post-create.do#">Traveling 1</a></li>
<li><a href="http://draft.blogger.com/post-create.do#">Traveling 2</a></li>
<li><a href="http://draft.blogger.com/post-create.do#">Traveling 3</a></li>
<li><a href="http://draft.blogger.com/post-create.do#">Traveling 4</a>
<ul>
<li><a href="http://draft.blogger.com/post-create.do#">Africa 1</a></li>
<li><a href="http://draft.blogger.com/post-create.do#">Africa 2</a></li>
<li><a href="http://draft.blogger.com/post-create.do#">Africa 3</a></li>
<li><a href="http://draft.blogger.com/post-create.do#">Africa 4</a>
<ul>
<li><a href="http://draft.blogger.com/post-create.do#">Kenya 1</a></li>
<li><a href="http://draft.blogger.com/post-create.do#">Kenya 2</a></li>
<li><a href="http://draft.blogger.com/post-create.do#">Kenya 3</a></li>
<li><a href="http://draft.blogger.com/post-create.do#">Kenya 4</a></li>
<li><a href="http://draft.blogger.com/post-create.do#">Kenya 5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://draft.blogger.com/post-create.do#">Traveling 5</a></li>
</ul>
</li>
<li><a href="http://www.cssdrive.com/">Gallery</a></li>
</ul>
</div>
