DD Mega menu

1. Style và Script của DD mega menu :

<style>
/* ######### Shared basic style for mega drop down menu DIV ######### */
.mega{
width:300px; /*default width of mega menu*/
padding:10px;
position:absolute;
visibility:hidden;
border:2px solid black;
border-top-width:1px;
background:white;
-webkit-box-shadow: 5px 5px 5px #c8c8c8; /*css 3 shadows*/
-moz-box-shadow: 5px 5px 5px #c8c8c8;
box-shadow: 5px 5px 5px #c8c8c8;
}
.mega .column{ /*each link column within a mega menu*/
float:left;
width:49%;
}
.mega a{
text-decoration:none;
}
.mega a[rel]:after{ /*add "down.png" to anchor links, or those with a rel attribute */
content:" " url(file:///C|/Documents%20and%20Settings/Bon%20Bon/Desktop/down.png);
}
.mega .column ul{
margin:0;
margin-left:5px;
padding:0;
list-style:none;
}
.mega .column ul li{
margin-bottom:3px;
}
.mega .ulmenu{ /*style any UL within mega menu with class="ulmenu"*/
margin:0;
padding:0;
border:1px solid gray;
border-bottom-width:0;
list-style:none;
}
.mega .ulmenu a{
display:block;
border-bottom:1px solid gray;
padding:5px;
}
.mega .ulmenu a:hover{
background:lightyellow;
}
/* ######### Style for Solid Block Mega Menu ######### */
.solidblocktheme{ /*additional mega drop down menu style for this theme*/
border:5px solid #cd0000;
padding:0; /*remove default padding inside mega menu*/
}
.solidblocktheme p, .solidblocktheme .column{
padding:5px; /*add padding inside p and .column elements within mega menu*/
width:auto;
}
.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(file:///C|/Documents%20and%20Settings/Bon%20Bon/Desktop/blockdefault.gif) center center repeat-x;
}
.solidblockmenu li{
display: inline;
}
.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}
.solidblockmenu li a:visited{
color: white;
}
.solidblockmenu li a:hover, .solidblockmenu li a.selected{ /*Selected Tab style*/
color: white;
background: transparent url(file:///C|/Documents%20and%20Settings/Bon%20Bon/Desktop/blockactive.gif) center center repeat-x;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
/* DD Mega Menu
* Created: June 13th, 2011 by DynamicDrive.com. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/
// July 27th, 11': Added ability to activate menu via "click" of the mouse, on top of the default "mouseover".
jQuery.noConflict()
jQuery.extend(jQuery.easing, { //see http://gsgd.co.uk/sandbox/jquery/easing/
easeOutBack:function(x, t, b, c, d, s){
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeInQuad: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
},
easeInOutCirc: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
},
easeInOutSine: function (x, t, b, c, d) {
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
}
})
var ddmegamenu={
startzindex:100,
wrapperoffset:[10,25], //additional width and height to add to outer wrapper of drop down menus to accomodate CSS drop down shadow, if any
ismobile:navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) != null, //boolean check for popular mobile browsers
init:function(setting){
var $=jQuery
var s=$.extend({fx:'slide', easing:'easeInOutSine', dur:'normal', hidedelay:200}, setting)
if (s.fx=="none") //if fx is disabled, bypass animation
s.dur=0
var $mainmenu=$('#'+s.menuid)
$anchors=($mainmenu.attr('rel'))? $mainmenu : $mainmenu.find('a[rel]')
function buildmenu($anchors){
$anchors.each(function(){ //loop through anchor links
var $anchor=$(this)
var $submenu=$('#'+$anchor.attr('rel').replace(/\[\w+\]/, '')) //extract "submenuid" from rel="submenuid[orientation]" to reference submenu
var orienttoleft=/\[left\]/.test($anchor.attr('rel')) //check for rel="submenuid[left]" to indicate submenu should be left aligned
$submenu.wrap('<div class="megawrapper" style="z-index:'+ddmegamenu.startzindex+';position:absolute;top:0;left:0;visibility:hidden"><div style="position:absolute;overflow:hidden;left:0;top:0;width:100%;height:100%;"></div></div>')
.css({visibility:'inherit', top:-$submenu.outerHeight()}) //set submenu's top pos so it's out of view intially
.data('timer', {}) //add timer data object to submenu object
var $wrapper=$submenu.closest('div.megawrapper').css({width:$submenu.outerWidth()+ddmegamenu.wrapperoffset[0], height:$submenu.outerHeight()+ddmegamenu.wrapperoffset[1]}) //reference outermost wrapper of submenu and set its dimensions
var $wrapperparent=$anchor.closest('div.megawrapper') //check if this anchor link is defined inside a submenu wrapper (nested menu)
if ($wrapperparent.length>0){ //if so
$wrapper.appendTo($wrapperparent) //move corresponding submenu wrapper to within its parent submenu wrapper
}
else{ //else if this submenu wrapper is topmost
$wrapper.appendTo(document.body) //move it so it's a child of document.body
$submenu.data('istopmenu', true) //indicate this is top level wrapper
}
$anchor.bind((setting.trigger=="click")? "click" : "mouseenter", function(e){ //when mouse clicks on or mouses over anchor
clearTimeout($submenu.data('timer').hide)
var offset=($submenu.data('istopmenu'))? $anchor.offset() : $anchor.position()
if ($submenu.data('istopmenu')){
$anchors.removeClass('selected')
$anchor.addClass('selected')
}
$wrapper.css({visibility:'visible', left:offset.left-(orienttoleft? $wrapper.outerWidth()-$anchor.outerWidth()-ddmegamenu.wrapperoffset[0] : 0), top:offset.top+$anchor.outerHeight(), zIndex:++ddmegamenu.startzindex})
$submenu.stop().animate({top:0}, s.dur, s.easing) //animate submenu into view
if (setting.trigger=="click" && !ddmegamenu.ismobile) //returning false in mobile browsers seem to lead to strange behavior
return false
})
$anchor.mouseleave(function(){ //when mouse moves OUT anchor
$submenu.data('timer').hide=setTimeout(function(){
$submenu.stop().animate({top:-$submenu.outerHeight()}, s.dur, function(){$wrapper.css({visibility:'hidden'})}) //animate submenu out of view and hide wrapper DIV
$anchor.removeClass('selected')
}, s.hidedelay)
})
$anchor.click(function(e){
if (ddmegamenu.ismobile) //on ipad/iphone, disable anchor link (those with a drop down menu) when clicked on (triggered by mouseover event on desktop), so menu is given a chance to appear
return false
})
$wrapper.mouseenter(function(){ //when mouse moves OVER submenu wrapper
clearTimeout($submenu.data('timer').hide)
})
$wrapper.bind('mouseleave click', function(e){ //when mouse moves OUT or CLICKs on submenu wrapper
$submenu.data('timer').hide=setTimeout(function(){
$submenu.stop().animate({top:-$submenu.outerHeight()}, (e.type=="click")? 0 : s.dur, function(){$wrapper.css({visibility:'hidden'})}) //animate submenu out of view and hide wrapper DIV
$anchor.removeClass('selected')
}, s.hidedelay)
})
buildmenu($submenu.find('a[rel]')) //build next level sub menus
})
}
buildmenu($anchors)
},
docinit:function(setting){
jQuery(function($){ //on document.ready
ddmegamenu.init(setting)
})
}
}
</script>
<script>
ddmegamenu.docinit({
menuid:'solidmenu',
dur:200 //<--no comma after last setting
})
ddmegamenu.docinit({
menuid:'glowingtabs',
dur:300,
easing:'easeOutBack'
})
ddmegamenu.docinit({
menuid:'megaanchorlink',
dur:500,
easing:'easeInOutCirc' //<--no comma after last setting
})
</script>
<style type="text/css">
/*Additional CSS used in the demos*/
h2.d{
font-family:Georgia;
}
/* ######### Style for Glow Tabs Mega Menu ######### */
.glowtheme{ /*additional mega drop down menu style for this theme*/
background:#f3f7ff;
-webkit-box-shadow: 5px 5px 5px #D6D6D6 inset;
-moz-box-shadow: 5px 5px 5px #D6D6D6 inset;
box-shadow: 0 0 15px #99b4ff inset;
}
#glowingtabs{
width:100%;
font-size:90%;
line-height:normal;
overflow: hidden;
border-bottom: 1px solid #7e9fff; /*Add border strip to bottom of menu*/
}
#glowingtabs ul{
float:left;
list-style-type: none;
margin:0;
margin-left: 5px; /*Left offset of entire tab menu relative to page*/
padding:0;
}
#glowingtabs li{
display:inline;
margin:0;
padding:0;
}
#glowingtabs a{
float:left;
background:url(glowtab-left.gif) no-repeat left top;
margin:0;
margin-right: 5px; /*spacing between each tab*/
padding:0 0 0 9px;
text-decoration:none;
}
#glowingtabs a span{
float:left;
display:block;
background:url(glowtab.gif) no-repeat right top;
padding: 8px 12px 5px 3px;
font-weight:bold;
color:#3B3B3B;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#glowingtabs a span {float:none;}
/* End IE5-Mac hack */
#glowingtabs a:hover span {
color: black;
}
#glowingtabs a.selected{ /*Selected Tab style*/
background-position:0 -82px; /*Shift background image up to start of 2nd tab image*/
}
#glowingtabs a.selected span{ /*Selected Tab style*/
background-position:100% -82px; /*Shift background image up to start of 2nd tab image*/
color: black;
}
#glowingtabs a:hover{ /*onMouseover style*/
background-position:0% -82px; /*Shift background image up to start of 2nd tab image*/
}
#glowingtabs a:hover span{ /*onMouseover style*/
background-position:100% -82px; /*Shift background image up to start of 2nd tab image*/
}
/* ######### Style for 3rd demo's mega menu ######### */
.sitetheme{
padding:0;
-webkit-box-shadow: 0 0 8px gray;
-moz-box-shadow: 0 0 8px gray;
box-shadow: 0 0 8px gray;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
background:#eafbd6;
}
.sitetheme p, .sitetheme .column{
padding:5px;
width:auto;
}
.sitetheme .ulmenu a:hover{
background:#b9df8c;
}
</style>



2. Chèn Menu :


<h2 class="d">Example 1</h2>

<div id="glowingtabs">
<ul>
<li><a href="http://www.dynamicdrive.com/"><span>Home</span></a></li>
<li><a href="http://www.javascriptkit.com" rel="jkmenuv2"><span>JavaScript v</span></a></li>
<li><a href="http://www.dynamicdrive.com/forums/"><span>Forums</span></a></li>
<li><a href="http://tools.dynamicdrive.com"><span>Webmaster Tools</span></a></li>
<li><a href="http://www.cssdrive.com" rel="cssdrivemenuv2[left]"><span>CSS Drive v</span></a></li>
</ul>
</div>
<!--
<a id="glowingtabs" href="#" rel="jkmenuv2">Testing 1 2 3</a>
-->
<!--First mega menu (1) -->
<div id="jkmenuv2" class="mega glowtheme">
<p style="margin:5px 0 10px 0"><b>Visit the following main content areas of JavaScript Kit:</b></p>
<div class="column">
<ul>
<li><a href="http://www.javascriptkit.com" rel="freescriptsv2">Free JavaScripts</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Tutorials</a></li>
<li><a href="http://www.javascriptkit.com">Free Java Applets</a></li>
</ul>
</div>
<div class="column">
<ul>
<li><a href="http://www.javascriptkit.com">JavaScript Tutorials</a></li>
<li><a href="http://www.javascriptkit.com">DHTML Tutorials</a></li>
<li><a href="http://www.javascriptkit.com">Web Design Tutorials</a></li>
</ul>
</div>
<br style="clear:left" />
<p>Need help with JavaScript? <a href="http://www.codingforums.com">Coding Forums</a> should be your next stop!</p>
</div>
<!--Second mega menu (1.1) -->
<div id="freescriptsv2" class="mega glowtheme" style="width:150px">
<ul class="ulmenu">
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">JavaScript Clocks</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">JavaScript Scrollers</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Text Effects</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Password Protecting</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Form Validation</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Ajax Scripts</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Image Effects</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Link Effects</a></li>
</ul>
</div>

<!--Forth mega menu (2) -->
<div id="cssdrivemenuv2" class="mega glowtheme">
<p style="margin-top:10px">Looking for web design inspiration? CSS Drive showcases some of the most attractive, CSS driven sites on the net.</p>
<div class="column">
<ul>
<li><a href="http://www.cssdrive.com/">Gallery</a></li>
<li><a href="http://www.cssdrive.com/">CSS Menus</a></li>
<li><a href="http://www.cssdrive.com/">CSS Examples</a></li>
</ul>
</div>
<div class="column">
<ul>
<li><a href="http://www.cssdrive.com/">Design News</a></li>
<li><a href="http://www.cssdrive.com/">Design Resources</a></li>
<li><a href="http://www.cssdrive.com/">Design Tools</a></li>
</ul>
</div>
</div>


<!--het -->
<h2>Example 2</h2>
<ul id="solidmenu" class="solidblockmenu">
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.javascriptkit.com" rel="jkmenu">JavaScript v</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com">Webmaster Tools</a></li>
<li><a href="http://www.cssdrive.com" rel="cssdrivemenu[left]">CSS Drive v</a></li>
</ul>
<!--First mega menu (1) -->
<div id="jkmenu" class="mega solidblocktheme">
<p style="margin:5px 0 10px 0"><b>Visit the following main content areas of JavaScript Kit:</b></p>
<div class="column">
<ul>
<li><a href="http://www.javascriptkit.com" rel="freescripts">Free JavaScripts</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Tutorials</a></li>
<li><a href="http://www.javascriptkit.com">Free Java Applets</a></li>
</ul>
</div>
<div class="column">
<ul>
<li><a href="http://www.javascriptkit.com">JavaScript Tutorials</a></li>
<li><a href="http://www.javascriptkit.com">DHTML Tutorials</a></li>
<li><a href="http://www.javascriptkit.com">Web Design Tutorials</a></li>
</ul>
</div>
<br style="clear:left" />
<p>Need help with JavaScript? <a href="http://www.codingforums.com">Coding Forums</a> should be your next stop!</p>
</div>
<!--Second mega menu (1.1) -->
<div id="freescripts" class="mega solidblocktheme" style="width:150px">
<ul class="ulmenu">
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">JavaScript Clocks</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">JavaScript Scrollers</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Text Effects</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Password Protecting</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Form Validation</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Ajax Scripts</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Image Effects</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Link Effects</a></li>
</ul>
</div>

<!--Forth mega menu (2) -->
<div id="cssdrivemenu" class="mega solidblocktheme">
<p style="margin-top:10px">Looking for web design inspiration? CSS Drive showcases some of the most attractive, CSS driven sites on the net.</p>
<div class="column">
<ul>
<li><a href="http://www.cssdrive.com/">Gallery</a></li>
<li><a href="http://www.cssdrive.com/">CSS Menus</a></li>
<li><a href="http://www.cssdrive.com/">CSS Examples</a></li>
</ul>
</div>
<div class="column">
<ul>
<li><a href="http://www.cssdrive.com/">Design News</a></li>
<li><a href="http://www.cssdrive.com/">Design Resources</a></li>
<li><a href="http://www.cssdrive.com/">Design Tools</a></li>
</ul>
</div>
</div>
<br />






<h2>Example 3</h2>

<a id="megaanchorlink" href="http://www.javascriptkit.com" rel="megacontent">JavaScript Kit</a>
<!--First mega menu (1) -->
<div id="megacontent" class="mega">
<p style="margin:5px 0 10px 0"><b>Visit the following main content areas of JavaScript Kit:</b></p>
<div class="column">
<ul>
<li><a href="http://www.javascriptkit.com" rel="megasubcontent">Free JavaScripts</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Tutorials</a></li>
<li><a href="http://www.javascriptkit.com">Free Java Applets</a></li>
</ul>
</div>
<div class="column">
<ul>
<li><a href="http://www.javascriptkit.com">JavaScript Tutorials</a></li>
<li><a href="http://www.javascriptkit.com">DHTML Tutorials</a></li>
<li><a href="http://www.javascriptkit.com">Web Design Tutorials</a></li>
</ul>
</div>
<br style="clear:left" />
<p>Need help with JavaScript? <a href="http://www.codingforums.com">Coding Forums</a> should be your next stop!</p>
</div>
<!--Second mega menu (1.1) -->
<div id="megasubcontent" class="mega" style="width:150px">
<ul class="ulmenu">
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">JavaScript Clocks</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">JavaScript Scrollers</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Text Effects</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Password Protecting</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Form Validation</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Ajax Scripts</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Image Effects</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Link Effects</a></li>
</ul>
</div>