TẠO MENU NGANG CÓ MENU CON XỔ NGANG

Trước đây, tôi có chia sẻ với các bạn cách tạo menu ngang có nhiều menu con xổ dọc xuống (kiểu 1) và (kiểu 2), hôm nay tôi chia sẻ thêm cho các bạn menu ngang có menu con xổ theo chiều ngang.

Với menu này, thì khi các bạn rê chuột đến các mục sẽ có một menu con xổ ra theo chiều ngang. Các bạn xem hình phía dưới.

Đầu tiên, bạn đăng nhập vào blog > chọn thiết kế > chọn chỉnh sửa HTML, bấm cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào dòng lệnh </head>

Sau đó dán toàn bộ code phía dưới vào trên dòng lệnh </head> và bấm Lưu mẫu.

<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>

Tiếp theo, bạn đăng nhập vào Blog > chọn Thiết kế > Thêm tiện ích HTML/Javacript rồi dán code phía dưới vào.

<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ây giờ bạn có thể thay đổi tên menu và các link liên kết theo ý thích mình muốn và bấm Lưu lại là xong.