데모를 확인하세요 아래는 본예제의 스크립트 원문입니다.
<html>
<head>
<title>해피CGI</title>
<link rel="stylesheet" type="text/css" href="http://www.blueb.co.kr/SRC/javascript/package/yahoo/build/menu/assets/menu.css">
<style type="text/css">
div.yui-b p {
margin:0 0 .5em 0;
color:#999;
}
div.yui-b p strong {
font-weight:bold;
color:#000;
}
div.yui-b p em {
color:#000;
}
#productsandservices {
margin:0 0 10px 0;
}
</style>
<!-- Namespace source file -->
<script type="text/javascript" src="http://www.blueb.co.kr/SRC/javascript/package/yahoo/build/yahoo/yahoo.js"></script>
<!-- Dependency source files -->
<script type="text/javascript" src="http://www.blueb.co.kr/SRC/javascript/package/yahoo/build/event/event.js"></script>
<script type="text/javascript" src="http://www.blueb.co.kr/SRC/javascript/package/yahoo/build/dom/dom.js"></script>
<script type="text/javascript" src="http://www.blueb.co.kr/SRC/javascript/package/yahoo/build/animation/animation.js"></script>
<!-- Container source file -->
<script type="text/javascript" src="http://www.blueb.co.kr/SRC/javascript/package/yahoo/build/container/container_core.js"></script>
<!-- Menu source file -->
<script type="text/javascript" src="http://www.blueb.co.kr/SRC/javascript/package/yahoo/build/menu/menu.js"></script>
<!-- Page-specific script -->
<script type="text/javascript">
YAHOO.example.onMenuBarReady = function() {
// Animation object
var oAnim;
// Utility function used to setup animation for submenus
function setupMenuAnimation(p_oMenu) {
if(!p_oMenu.animationSetup) {
var aItems = p_oMenu.getItemGroups();
if(aItems && aItems[0]) {
var i = aItems[0].length - 1;
var oSubmenu;
do {
oSubmenu = p_oMenu.getItem(i).cfg.getProperty("submenu");
if(oSubmenu) {
oSubmenu.beforeShowEvent.subscribe(onMenuBeforeShow, oSubmenu, true);
oSubmenu.showEvent.subscribe(onMenuShow, oSubmenu, true);
}
}
while(i--);
}
p_oMenu.animationSetup = true;
}
}
// "beforeshow" event handler for each submenu of the menu bar
function onMenuBeforeShow(p_sType, p_sArgs, p_oMenu) {
if(oAnim && oAnim.isAnimated()) {
oAnim.stop();
oAnim = null;
}
YAHOO.util.Dom.setStyle(this.element, "overflow", "hidden");
YAHOO.util.Dom.setStyle(this.body, "marginTop", ("-" + this.body.offsetHeight + "px"));
}
// "show" event handler for each submenu of the menu bar
function onMenuShow(p_sType, p_sArgs, p_oMenu) {
oAnim = new YAHOO.util.Anim(
this.body,
{ marginTop: { to: 0 } },
.5,
YAHOO.util.Easing.easeOut
);
oAnim.animate();
var me = this;
function onTween() {
me.cfg.refireEvent("iframe");
}
function onAnimationComplete() {
YAHOO.util.Dom.setStyle(me.body, "marginTop", ("0px"));
YAHOO.util.Dom.setStyle(me.element, "overflow", "visible");
setupMenuAnimation(me);
}
/*
Refire the event handler for the "iframe"
configuration property with each tween so that the
size and position of the iframe shim remain in sync
with the menu.
*/
if(this.cfg.getProperty("iframe") == true) {
oAnim.onTween.subscribe(onTween);
}
oAnim.onComplete.subscribe(onAnimationComplete);
}
// "beforerender" event handler for the menu bar
function onMenuBeforeRender(p_sType, p_sArgs, p_oMenu) {
var oSubmenuData = {
"해피CGI 메뉴": [
//"해피CGI메뉴"는 변수이므로 반듯이 수정해야합니다
{ text: "자바스크립트", submenu: { id: "javascript", itemdata: [
{ text: "image/color", url:"http://www.happycgi.com" },
{ text: "menu/navigation", url:"http://www.happycgi.com" },
{ text: "Scroll", url:"http://www.happycgi.com" },
{ text: "AJAX", url:"http://www.happycgi.com" }
] }
},
{ text: "플래쉬", submenu: { id: "Flash", itemdata: [
{ text: "image/color", url:"http://www.happycgi.com" },
{ text: "menu/navigation", url:"http://www.happycgi.com" },
{ text: "Scroll", url:"http://www.happycgi.com" },
{ text: "AJAX", url:"http://www.happycgi.com" }
] }
},
],
"communication": [
{ text: "360", url: "http://360.yahoo.com" },
{ text: "Alerts", url: "http://alerts.yahoo.com" },
{ text: "Avatars", url: "http://avatars.yahoo.com" },
{ text: "Groups", url: "http://groups.yahoo.com " },
{ text: "Internet Access", url: "http://promo.yahoo.com/broadband" },
{ text: "PIM", submenu: { id: "pim", itemdata: [
{ text: "Yahoo! Mail", url:"http://www.happycgi.com" },
{ text: "Yahoo! Address Book", url:"http://www.happycgi.com" },
{ text: "Yahoo! Calendar", url:"http://www.happycgi.com" },
{ text: "Yahoo! Notepad", url:"http://www.happycgi.com" }
] }
},
{ text: "Member Directory", url: "http://members.yahoo.com" },
{ text: "Messenger", url: "http://messenger.yahoo.com" },
{ text: "Mobile", url: "http://mobile.yahoo.com" },
{ text: "Photos", url: "http://photos.yahoo.com" },
],
"shopping": [
{ text: "Auctions", url: "http://auctions.shopping.yahoo.com" },
{ text: "Autos", url: "http://autos.yahoo.com" },
{ text: "Classifieds", url: "http://classifieds.yahoo.com" },
{ text: "Flowers & Gifts", url: "http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735" },
{ text: "Points", url: "http://points.yahoo.com" },
{ text: "Real Estate", url: "http://realestate.yahoo.com" },
{ text: "Travel", url: "http://travel.yahoo.com" },
{ text: "Wallet", url: "http://wallet.yahoo.com" },
{ text: "Yellow Pages", url: "http://yp.yahoo.com" }
],
"information": [
{ text: "Downloads", url: "http://downloads.yahoo.com" },
{ text: "Finance", url: "http://finance.yahoo.com" },
{ text: "Health", url: "http://health.yahoo.com" },
{ text: "Local", url: "http://local.yahoo.com" },
{ text: "Maps & Directions", url: "http://maps.yahoo.com" },
{ text: "My Yahoo!", url: "http://my.yahoo.com" },
{ text: "News", url: "http://news.yahoo.com" },
{ text: "Search", url: "http://search.yahoo.com" },
{ text: "Small Business", url: "http://smallbusiness.yahoo.com" },
{ text: "Weather", url: "http://weather.yahoo.com" }
]
};
this.getItem(0).cfg.setProperty("submenu", { id:"해피CGI 메뉴", itemdata: oSubmenuData["해피CGI 메뉴"] });
//"해피CGI메뉴"는 변수이므로 반듯이 수정해야합니다
this.getItem(1).cfg.setProperty("submenu", { id:"communication", itemdata: oSubmenuData["communication"] });
this.getItem(2).cfg.setProperty("submenu", { id:"shopping", itemdata: oSubmenuData["shopping"] });
this.getItem(3).cfg.setProperty("submenu", { id:"information", itemdata: oSubmenuData["information"] });
setupMenuAnimation(this);
}
// Initialize the root menu bar
var oMenuBar = new YAHOO.widget.MenuBar("productsandservices", { autosubmenudisplay:true, hidedelay:750, lazyload:true });
// Subscribe to the "beforerender" event
oMenuBar.beforeRenderEvent.subscribe(onMenuBeforeRender, oMenuBar, true);
// Render the menu bar
oMenuBar.render();
};
// Initialize and render the menu bar when it is available in the DOM
YAHOO.util.Event.onContentReady("productsandservices", YAHOO.example.onMenuBarReady);
</script>
</head>
<body>
<div id="productsandservices" class="yuimenubar">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenubaritem first-of-type">해피CGI 메뉴</li>
<li class="yuimenubaritem"><a href="http://www.blueb.co.kr">Communication</a></li>
<li class="yuimenubaritem"><a href="http://www.blueb.co.kr">Shopping</a></li>
<li class="yuimenubaritem">Information</li>
</ul>
</div>
</div>
</body>
</html>
|
