Menu ngang cho blog

Trình đơn menu horizontal  với danh sách các biến UL trong một trình đơn thả dòng ngang, tương ứng với mỗi một biến (menu cha) là một trình đơn phụ xuất hiện phía dưới dạng liên kết ngang. Trình đơn menu Drop Line này sử dụng jQuery tạo một slide làm nổi bật menu phụ khi nó di chuột lên đó.

Xem Demo
Cách thực hiện như sau:

Đă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ã: </head>
2. Thay thế </head> 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&#39; 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=&quot;http://lh6.ggpht.com/_wi2BBfk28Mg/TBY_tXeO3YI/AAAAAAAAEjI/yaja2ehQTuw/down.gif&quot;
//build menu with DIV ID=&quot;myslidemenu&quot; on page:
droplinemenu.buildmenu(&quot;mydroplinemenu&quot;)
</script>
</head>

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 id="mydroplinemenu" class="droplinebar">
<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="#">Activities 1</a></li>
  <li><a href="#">Activities 2</a></li>
  <li><a href="#">Activities 3</a>
      <ul>
      <li><a href="#">Water Sports 1</a></li>
      <li><a href="#">Water Sports 1</a></li>
      <li><a href="#">Water Sports 1</a></li>
      <li><a href="#">Water Sports 1</a></li>
      </ul>
    </li>
  <li><a href="#">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="#">Traveling 1</a></li>
  <li><a href="#">Traveling 2</a></li>
  <li><a href="#">Traveling 3</a></li>
  <li><a href="#">Traveling 4</a>
      <ul>
      <li><a href="#">Africa 1</a></li>
      <li><a href="#">Africa 2</a></li>
      <li><a href="#">Africa 3</a></li>
      <li><a href="#">Africa 4</a>
          <ul>
          <li><a href="#">Kenya 1</a></li>
          <li><a href="#">Kenya 2</a></li>
          <li><a href="#">Kenya 3</a></li>
          <li><a href="#">Kenya 4</a></li>
          <li><a href="#">Kenya 5</a></li>
          </ul>
        </li>
      </ul>
    </li>
  <li><a href="#">Traveling 5</a></li>
  </ul>
</li>
<li><a href="http://www.cssdrive.com">Gallery</a></li>
</ul>
</div>

Bạn chỉnh sửa lại các link menu (#) và tiêu đề theo các cat (label) của blog là xong.