Phiên bản đầy đủ: jsB@nk » Framework » jQuery » Siêu trình đơn định hướng khi rê chuột
URL: https://www.javascriptbank.com/mega-navigation-onmouseover.html
Hiệu ứng này sẽ hiển thị một khung chứa rất nhiều trình đơn, cùng với rất rất rất nhiều mục chọn của chúng khi người dùng rê chuột vào liên kết được chỉ định. Hiệu ứng rất thích hợp nếu website bạn có số lượng danh mục cực lớn, lên đến hàng trăm, cần hiển thị tất cả, giống như trường hợp của jsB@nk phiên bản 8 này.
Phiên bản đầy đủ: jsB@nk » Framework » jQuery » Siêu trình đơn định hướng khi rê chuột
URL: https://www.javascriptbank.com/mega-navigation-onmouseover.html
<style type="text/css">.megamenu{position: absolute;display: none;left: 0;top: 0;background: white;border: 1px solid #f06b24;border-width: 5px 1px;padding: 10px;font: normal 12px Verdana;z-index: 100;}.megamenu .column{float: left;width: 180px; /*width of each menu column*/margin-right: 5px;}.megamenu .column ul{margin: 0;padding: 0;list-style-type: none;}.megamenu .column ul li{padding-bottom: 5px;}.megamenu .column h3{background: #e0e0e0;font: bold 13px Arial;margin: 0 0 5px 0;}.megamenu .column ul li a{text-decoration: none;}.megamenu .column ul li a:hover{color: red;}</style><script type="text/javascript" src="/javascript/jquery.js"></script><script type="text/javascript" name="jkmegamenu.js">/************************************************ jQuery Mega Menu- by JavaScript Kit (www.javascriptkit.com)* This notice must stay intact for usage* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code***********************************************//* jQuery Mega Menu v1.02* Last updated: June 29th, 2009. This notice must stay intact for usage * Author: JavaScript Kit at http://www.javascriptkit.com/* Visit http://www.javascriptkit.com/script/script2/jScale/ for full source code*/jQuery.noConflict();var jkmegamenu={effectduration: 300, //duration of animation, in millisecondsdelaytimer: 200, //delay after mouseout before menu should be hidden, in milliseconds//No need to edit beyond heremegamenulabels: [],megamenus: [], //array to contain each block menu instanceszIndexVal: 1000, //starting z-index value for drop down menu$shimobj: null,addshim:function($){$(document.body).append('<IFRAME id="outlineiframeshim" src="'+(location.protocol=="https:"? 'blank.htm' : 'about:blank')+'" style="display:none; left:0; top:0; z-index:999; position:absolute; filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)" frameBorder="0" scrolling="no"></IFRAME>')this.$shimobj=$("#outlineiframeshim")},alignmenu:function($, e, megamenu_pos){var megamenu=this.megamenus[megamenu_pos]var $anchor=megamenu.$anchorobjvar $menu=megamenu.$menuobjvar menuleft=($(window).width()-(megamenu.offsetx-$(document).scrollLeft())>megamenu.actualwidth)? megamenu.offsetx : megamenu.offsetx-megamenu.actualwidth+megamenu.anchorwidth //get x coord of menu//var menutop=($(window).height()-(megamenu.offsety-$(document).scrollTop()+megamenu.anchorheight)>megamenu.actualheight)? megamenu.offsety+megamenu.anchorheight : megamenu.offsety-megamenu.actualheightvar menutop=megamenu.offsety+megamenu.anchorheight //get y coord of menu$menu.css({left:menuleft+"px", top:menutop+"px"})this.$shimobj.css({width:megamenu.actualwidth+"px", height:megamenu.actualheight+"px", left:menuleft+"px", top:menutop+"px", display:"block"})},showmenu:function(e, megamenu_pos){var megamenu=this.megamenus[megamenu_pos]var $menu=megamenu.$menuobjvar $menuinner=megamenu.$menuinnerif ($menu.css("display")=="none"){this.alignmenu(jQuery, e, megamenu_pos)$menu.css("z-index", ++this.zIndexVal)$menu.show(this.effectduration, function(){$menuinner.css('visibility', 'visible')})}else if ($menu.css("display")=="block" && e.type=="click"){ //if menu is hidden and this is a "click" event (versus "mouseout")this.hidemenu(e, megamenu_pos)}return false},hidemenu:function(e, megamenu_pos){var megamenu=this.megamenus[megamenu_pos]var $menu=megamenu.$menuobjvar $menuinner=megamenu.$menuinner$menuinner.css('visibility', 'hidden')this.$shimobj.css({display:"none", left:0, top:0})$menu.hide(this.effectduration)},definemenu:function(anchorid, menuid, revealtype){this.megamenulabels.push([anchorid, menuid, revealtype])},render:function($){for (var i=0, labels=this.megamenulabels[i]; i<this.megamenulabels.length; i++, labels=this.megamenulabels[i]){if ($('#'+labels[0]).length!=1 || $('#'+labels[1]).length!=1) //if one of the two elements are NOT defined, existreturnthis.megamenus.push({$anchorobj:$("#"+labels[0]), $menuobj:$("#"+labels[1]), $menuinner:$("#"+labels[1]).children('ul:first-child'), revealtype:labels[2], hidetimer:null})var megamenu=this.megamenus[i]megamenu.$anchorobj.add(megamenu.$menuobj).attr("_megamenupos", i+"pos") //remember index of this drop down menumegamenu.actualwidth=megamenu.$menuobj.outerWidth()megamenu.actualheight=megamenu.$menuobj.outerHeight()megamenu.offsetx=megamenu.$anchorobj.offset().leftmegamenu.offsety=megamenu.$anchorobj.offset().topmegamenu.anchorwidth=megamenu.$anchorobj.outerWidth()megamenu.anchorheight=megamenu.$anchorobj.outerHeight()$(document.body).append(megamenu.$menuobj) //move drop down menu to end of documentmegamenu.$menuobj.css("z-index", ++this.zIndexVal).hide()megamenu.$menuinner.css("visibility", "hidden")megamenu.$anchorobj.bind(megamenu.revealtype=="click"? "click" : "mouseenter", function(e){var menuinfo=jkmegamenu.megamenus[parseInt(this.getAttribute("_megamenupos"))]clearTimeout(menuinfo.hidetimer) //cancel hide menu timerreturn jkmegamenu.showmenu(e, parseInt(this.getAttribute("_megamenupos")))})megamenu.$anchorobj.bind("mouseleave", function(e){var menuinfo=jkmegamenu.megamenus[parseInt(this.getAttribute("_megamenupos"))]if (e.relatedTarget!=menuinfo.$menuobj.get(0) && $(e.relatedTarget).parents("#"+menuinfo.$menuobj.get(0).id).length==0){ //check that mouse hasn't moved into menu objectmenuinfo.hidetimer=setTimeout(function(){ //add delay before hiding menujkmegamenu.hidemenu(e, parseInt(menuinfo.$menuobj.get(0).getAttribute("_megamenupos")))}, jkmegamenu.delaytimer)}})megamenu.$menuobj.bind("mouseenter", function(e){var menuinfo=jkmegamenu.megamenus[parseInt(this.getAttribute("_megamenupos"))]clearTimeout(menuinfo.hidetimer) //cancel hide menu timer})megamenu.$menuobj.bind("click mouseleave", function(e){var menuinfo=jkmegamenu.megamenus[parseInt(this.getAttribute("_megamenupos"))]menuinfo.hidetimer=setTimeout(function(){ //add delay before hiding menujkmegamenu.hidemenu(e, parseInt(menuinfo.$menuobj.get(0).getAttribute("_megamenupos")))}, jkmegamenu.delaytimer)})} //end for loopif(/Safari/i.test(navigator.userAgent)){ //if Safari$(window).bind("resize load", function(){for (var i=0; i<jkmegamenu.megamenus.length; i++){var megamenu=jkmegamenu.megamenus[i]var $anchorisimg=(megamenu.$anchorobj.children().length==1 && megamenu.$anchorobj.children().eq(0).is('img'))? megamenu.$anchorobj.children().eq(0) : nullif ($anchorisimg){ //if anchor is an image link, get offsets and dimensions of image itself, instead of parent Amegamenu.offsetx=$anchorisimg.offset().leftmegamenu.offsety=$anchorisimg.offset().topmegamenu.anchorwidth=$anchorisimg.width()megamenu.anchorheight=$anchorisimg.height()}}})}else{$(window).bind("resize", function(){for (var i=0; i<jkmegamenu.megamenus.length; i++){var megamenu=jkmegamenu.megamenus[i]megamenu.offsetx=megamenu.$anchorobj.offset().leftmegamenu.offsety=megamenu.$anchorobj.offset().top}})}jkmegamenu.addshim($)}}jQuery(document).ready(function($){jkmegamenu.render($)})/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/</script><script type="text/javascript">//jkmegamenu.definemenu("anchorid", "menuid", "mouseover|click")jkmegamenu.definemenu("megaanchor", "megamenu1", "mouseover")</script><!--Mega Menu Anchor--><p align="center"><a href="http://www.javascriptkit.com" id="megaanchor">Tech Links</a></p><!--Mega Drop Down Menu HTML. Retain given CSS classes--><div id="megamenu1" class="megamenu"><div class="column"><h3>Web Development</h3><ul><li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li><li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li><li><a href="http://www.javascriptbank.com">JavaScript Bank</a></li><li><a href="http://www.cssdrive.com">CSS Drive</a></li><li><a href="http://www.codingforums.com">Coding Forums</a></li><li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li></ul></div><div class="column"><h3>News Related</h3><ul><li><a href="http://www.cnn.com/">CNN</a></li><li><a href="http://www.msnbc.com">MSNBC</a></li><li><a href="http://www.google.com">Google</a></li><li><a href="http://news.bbc.co.uk">BBC News</a></li></ul></div><div class="column"><h3>Technology</h3><ul><li><a href="http://www.news.com/">News.com</a></li><li><a href="http://www.slashdot.com">SlashDot</a></li><li><a href="http://www.digg.com">Digg</a></li><li><a href="http://www.techcrunch.com">Tech Crunch</a></li></ul></div><br style="clear: left" /> <!--Break after 3rd column. Move this if desired--><div class="column"><h3>Web Development</h3><ul><li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li><li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li><li><a href="http://www.javascriptbank.com">JavaScript Bank</a></li><li><a href="http://www.cssdrive.com">CSS Drive</a></li><li><a href="http://www.codingforums.com">Coding Forums</a></li><li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li></ul></div><div class="column"><h3>News Related</h3><ul><li><a href="http://www.cnn.com/">CNN</a></li><li><a href="http://www.msnbc.com">MSNBC</a></li><li><a href="http://www.google.com">Google</a></li><li><a href="http://news.bbc.co.uk">BBC News</a></li></ul></div><div class="column"><h3>Technology</h3><ul><li><a href="http://www.news.com/">News.com</a></li><li><a href="http://www.slashdot.com">SlashDot</a></li><li><a href="http://www.digg.com">Digg</a></li><li><a href="http://www.techcrunch.com">Tech Crunch</a></li></ul></div></div>