요런 탑메뉴 하나 구현될까요? 정보
요런 탑메뉴 하나 구현될까요?본문
http://www.tiffa.co.kr/
위에 링크된 탑메뉴가 쓰고 싶어서 소스보기를 했더니 머가 복잡하네요.
거진다 빼꼈는데 백그라운드 이미지가 표현이 안된다는....TT
해당 html의 소스와 메뉴CSS 파일인데 함 봐주실 수 있을까요?
왜 백그라운드 이미지가 안나타나는지 궁금해서요..
이미지 및 해당 파일은 모두 같은경로에 두었습니다만...
그냥 심심풀이로 봐주세여~~~
좀 궁금해서요~~
|
|
/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls.com/menu/pro_drop_1.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.preload1 {background: url('blank_over.gif');}
.preload2 {background: url('blank_overa.gif');}
#nav {width:775px; padding:0; margin:0; height:36px; background:#fff url('blank.gif') no-repeat right top; position:relative; z-index:500; font-family:arial, verdana, sans-serif; list-style-type:none}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:36px; line-height:27px; color:#fff; text-decoration:none; font-size:12px; font-weight:bold; cursor:pointer;background: url('blank.gif');; padding-left:5px; padding-right:0; padding-top:0; padding-bottom:0}
#nav li a.top_link span {float:left; display:block; height:36px;background:url('blank.gif') right top;; padding-left:12px; padding-right:24px; padding-top:0; padding-bottom:0}
#nav li a.top_link span.down {float:left; display:block; height:36px; background:url('blanka.gif') no-repeat right top;; padding-left:12px; padding-right:24px; padding-top:0; padding-bottom:0}
#nav li a.top_link:hover {color:#fff; background: url('blank_over.gif') no-repeat;}
#nav li a.top_link:hover span {background:url('blank_over.gif') no-repeat right top;}
#nav li a.top_link:hover span.down {background:url('blank_overa.gif') no-repeat right top;}
#nav li:hover > a.top_link {color:#fff; background: url('blank_over.gif') no-repeat;}
#nav li:hover > a.top_link span {background:url('blank_over.gif') no-repeat right top;}
#nav li:hover > a.top_link span.down {background:url('blank_overa.gif') no-repeat right top;}
/* Default list styling */
#nav li:hover {position:relative; z-index:200;}
/* keep the 'next' level invisible by placing it off screen. */
#nav ul,
#nav li:hover ul ul,
#nav li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover ul.sub
{left:1px; top:31px; background: #fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:116px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:12px; height:20px; width:116px; line-height:20px; text-indent:7px; color:#000; text-decoration:none;}
#nav li:hover ul.sub li a:hover
{background:#3a93d2; color:#fff;}
#nav li ul.sub li a.fly
{background:#fff url('arrow.gif') no-repeat 80px 7px;}
#nav li:hover ul.sub li a.fly:hover
{background:#3a93d2 url('arrow_over.gif') no-repeat 80px 7px; color:#fff}
#_nav li:hover ul li:hover > a.fly {background:#3a93d2 url('arrow_over.gif') no-repeat 80px 7px; color:#fff}
#nav li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
{left:90px; top:-4px; background: #fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:90px; z-index:400; height:auto;}
댓글 전체
다운로드 해서 수정해보세요~
http://www.stunicholls.com/menu/hover_drop_1.html
http://www.stunicholls.com/menu/pro_dropdown_1.html
http://www.stunicholls.com/menu/
보충교육님 감사합니다.
이것도 이뿐네요 ^^
<html>
<head>
<title>http://www.blueb.co.kr</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 = {
"블루비 메뉴": [
{ text: "자바스크립트", submenu: { id: "javascript", itemdata: [
{ text: "image/color", url:"http://www.blueb.co.kr" },
{ text: "menu/navigation", url:"http://www.blueb.co.kr" },
{ text: "Scroll", url:"http://www.blueb.co.kr" },
{ text: "AJAX", url:"http://www.blueb.co.kr" }
] }
},
{ text: "플래쉬", submenu: { id: "Flash", itemdata: [
{ text: "image/color", url:"http://www.blueb.co.kr" },
{ text: "menu/navigation", url:"http://www.blueb.co.kr" },
{ text: "Scroll", url:"http://www.blueb.co.kr" },
{ text: "AJAX", url:"http://www.blueb.co.kr" }
] }
},
],
"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.blueb.co.kr" },
{ text: "Yahoo! Address Book", url:"http://www.blueb.co.kr" },
{ text: "Yahoo! Calendar", url:"http://www.blueb.co.kr" },
{ text: "Yahoo! Notepad", url:"http://www.blueb.co.kr" }
] }
},
{ 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:"블루비 메뉴", itemdata: oSubmenuData["블루비 메뉴"] });
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">블루비 메뉴</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>
