Thứ Bảy, 21 tháng 7, 2012

Menu Megaanchor dạng nén nhỏ gọn

Các bạn tạo 1 javar/script sau đó chèn vào là ok.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>


<style type="text/css">

.megamenu{

position: absolute;

display: none;

left: 0;

top: 0;

background: white;

border: 1px solid #f06b24;

border-width: 5px 5px;

padding: 10px;

font: normal 12px verdanal;

z-index: 100;



}



.megamenu .column{

float: left;

width: 180px;

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

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

//<![CDATA[

jQuery.noConflict();



var jkmegamenu={



effectduration: 300,

delaytimer: 200,



//No need to edit beyond here

megamenulabels: [],

megamenus: [],

zIndexVal: 1000,

$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.$anchorobj

var $menu=megamenu.$menuobj

var 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.actualheight

var 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.$menuobj

var $menuinner=megamenu.$menuinner

if ($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"){

this.hidemenu(e, megamenu_pos)

}

return false

},



hidemenu:function(e, megamenu_pos){

var megamenu=this.megamenus[megamenu_pos]

var $menu=megamenu.$menuobj

var $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, exist

return

this.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 menu

megamenu.actualwidth=megamenu.$menuobj.outerWidth()

megamenu.actualheight=megamenu.$menuobj.outerHeight()

megamenu.offsetx=megamenu.$anchorobj.offset().left

megamenu.offsety=megamenu.$anchorobj.offset().top

megamenu.anchorwidth=megamenu.$anchorobj.outerWidth()

megamenu.anchorheight=megamenu.$anchorobj.outerHeight()

$(document.body).append(megamenu.$menuobj) //move drop down menu to end of document

megamenu.$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 timer

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

menuinfo.hidetimer=setTimeout(function(){ //add delay before hiding menu

jkmegamenu.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 menu

jkmegamenu.hidemenu(e, parseInt(menuinfo.$menuobj.get(0).getAttribute("_megamenupos")))

}, jkmegamenu.delaytimer)

})

} //end for loop

if(/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) : null

if ($anchorisimg){ //if anchor is an image link, get offsets and dimensions of image itself, instead of parent A

megamenu.offsetx=$anchorisimg.offset().left

megamenu.offsety=$anchorisimg.offset().top

megamenu.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().left

megamenu.offsety=megamenu.$anchorobj.offset().top

}

})

}

jkmegamenu.addshim($)

}



}



jQuery(document).ready(function($){

jkmegamenu.render($)

})

//]]>

</script>



<script type="text/javascript">

//<![CDATA[

jkmegamenu.definemenu("megaanchor", "megamenu1", "mouseover")

//]]>

</script>









<a href="http://chipkool.tk" id="megaanchor"><img alt="" src="http://1.bp.blogspot.com/-9O6vABofi7M/UADbsT_YkNI/AAAAAAAAI0E/vv0Q_Fn3a44/s1600/create-chipkool.tk.png" style="border:0px"/ > MENU </a>



<div id="megamenu1" class="megamenu">



<div class="column">

<h3><img src="http://1.bp.blogspot.com/-4ilSq69ZxpA/UADbsNNWFvI/AAAAAAAAIz8/KtI7OqQ1FaI/s1600/contact-email-chipkool.tk.png" alt="" style="border:0px;"/ > Sản phẩm</h3>

<ul>

<li><a href="http://www.chipkool.tk"> Con trỏ chuột </a></li>

<li><a href="http://www.chipkool.tk"> Hình nền wallpaper </a></li>

<li><a href="http://www.chipkool.tk"> Hiệu ứng flash nền </a></li>

<li><a href="http://www.chipkool.tk"> Biểu tượng mặt cười </a></li>

</ul>

</div>



<div class="column">

<h3><img src="http://1.bp.blogspot.com/-w-2uSGy1Bb8/UADbt7BnQpI/AAAAAAAAI0U/XHVwCJ_KtOE/s1600/home-(4)-chipkool.tk.png" alt="" style="border:0px;"/ > Trang chủ</h3>

<ul>

<li><a href="http://chipkool.tk">Trang chủ</a></li>

<li><a href="http://chipkool.tk">Đăng nhập</a></li>

<li><a href="http://chipkool.tk">Control Panel</a></li>

<li><a href="http://chipkool.tk">Thoát</a></li>

</ul>

</div>



<div class="column">

<h3><img src="http://2.bp.blogspot.com/-x8e152mzDOQ/UADbrVGixHI/AAAAAAAAIz4/UnqFt_VZSzc/s1600/compass-chipkool.tk.png" alt="" style="border:0px;"/ > Nổi bậc</h3>

<ul>

<li><a href="http://chipkool.tk"> Flash nền </a></li>

<li><a href="http://chipkool.tk"> Hình phong cảnh </a></li>

<li><a href="http://chipkool.tk"> Biểu tượng </a></li>

<li><a href="http://chipkool.tk"> Javascript </a></li>

</ul>

</div>



<br style="clear: left" />



<div class="column">

<h3><img src="http://3.bp.blogspot.com/-dqY4knOi5OM/UADb73X9SCI/AAAAAAAAI0g/7zfEQC7N8FY/s1600/color-swatch-2-chipkool.tk.png" alt="" style="border:0px;"/ > Tiện ích</h3>

<ul>

<li><a href="http://chipkool.tk"> Mã hóa code </a></li>

<li><a href="http://chipkool.tk"> Dịch thuật javascript </a></li>

<li><a href="http://chipkool.tk"> Tối ưu CSS</a></li>

<li><a href="http://chipkool.tk"> Photoshop</a></li>

</ul>

</div>



<div class="column">

<h3><img src="http://2.bp.blogspot.com/-8z3Puqeyfk8/UADb8gIscnI/AAAAAAAAI0k/iK-fbKPAU1g/s1600/database-(4)-chipkool.tk.png" alt="" style="border:0px;"/ > Tài khoản</h3>

<ul>

<li><a href="http://chipkool.tk">Gmail</a></li>

<li><a href="http://chipkool.tk">Yahoo</a></li>

<li><a href="http://chipkool.tk">Google</a></li>

<li><a href="http://chipkool.tk">Blogger</a></li>

</ul>

</div>



<div class="column">

<h3><img src="http://3.bp.blogspot.com/-lOfGTZMh8RA/UADbtEkAAkI/AAAAAAAAI0M/sMBby1TR-Zk/s1600/delicious-chipkool.tk.png" alt="" style="border:0px;"/ > Tác vụ</h3>

<ul>

<li><a href="http://chipkool.tk">Xem thống kê</a></li>

<li><a href="http://chipkool.tk">Chặn IP</a></li>

<li><a href="http://chipkool.tk">Duyệt code</a></li>

<li><a href="http://chipkool.tk">Đóng góp code</a></li>

</ul>

</div>



</div>

<!-- Code1k.com -->
Chuyên mục:

1 nhận xét:

  1. Ứng dụng này rất hay nhưng phần hướng dẫn sơ sài quá,làm sao thay đúng các link theo yêu cầu của người dùng,bạn nên đổi màu những đạon code cần phải điều chỉnh cho dễ nhận dạng.Cảm ơn chủ trang web nhé !

    Trả lờiXóa

 
LÊN ĐẦU TRANG