»çÀÌÆ®¸¦ µ¹¾Æ´Ù´Ï´Ù°¡ Ç÷¡½Ã·ÎµÈ ¸Þ´º¹Ù¸¦ Àç¹Ì·Î css·Î ¸¸µé¾î º¸¾Ò½À´Ï´Ù.
ºñ½ÁÇÏ°Ô ¸¸µé¾îº¸¾ÒÁö¸¸ ¿Ïº®ÇÏ°Ô °°Àº°Ç ¾Æ´Ï±¸¿ä ¤¾¤¾
Âü°í¿ëÀ¸·Î ¾²¼Åµµ ±¦ÂúÀ¸½Ã°í css¸¦ ¼öÁ¤Çϼż º¯ÇüÇؼ ¾²¼Åµµ µË´Ï´Ù.
À̹ÌÁö´Â ´ç¿¬È÷ ±×´ë·Î ¾²½Ã¸é ¾ÈµÇ±¸¿ä ~~
½ºÁîÅ°·Î°í´Â css¿¡¼ ÁÖ¼®Ã³¸® Çصξú½À´Ï´Ù.
¸Þ´ºÇüÅ´ ¾ÆÁÖ ÈçÈ÷ º¼¼öÀÖ´Â ¸Þ´ºÀÔ´Ï´Ù ¤¾¤¾¤¾¤¾¤¾
html / css /js ÆÄÀÏ·Î µÇ¾î ÀÖÀ¸¸ç
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link href="css/menu_2.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/menu_layer.js" ></script>
<script type="text/javascript" src="js/default.js" ></script>
<script type="text/javascript" src="js/default.js" ></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="logo"><span class="">½ºÁîÅ°ÄÚ¸®¾Æ</span></div>
<div class="wassup"><span class="">way of life</span></div>
<div class="nav">
<div class="util_nav">
<a href="#">·Î±×ÀÎ</a>
<span class="line">|</span>
<a href="#">ȸ¿ø°¡ÀÔ</a>
<span class="line">|</span>
<a href="#">¸¶À̽ºÁîÅ°</a>
<span class="line">|</span>
<a href="#">°í°´¼¾ÅÍ</a>
<span class="line">|</span>
<a href="#">SITEMAP</a>
</div>
<ul class="navigation">
<li><a href="#">±¸¸Å¾È³»</a>
<ul>
<li><a href="#">¿Â¶óÀΰßÀû</a></li>
<span class="line">|</span>
<li><a href="#">¿ÀÅ丮½º¾È³»</a></li>
<span class="line">|</span>
<li><a href="#">±¸¸ÅÀýÂ÷</a></li>
<span class="line">|</span>
<li><a href="#">½ÅÂ÷µî·Ï¾È³»</a></li>
<span class="line">|</span>
<li><a href="#">Áß°íÂ÷Á¤º¸</a></li>
</ul>
</li><li><a href="#">¼ºñ½º</a>
<ul>
<li><a href="#">½ºÁîÅ°¼ºñ½º</a></li>
<span class="line">|</span>
<li><a href="#">Á¤ºñ¼ö¸®¾È³»</a></li>
<span class="line">|</span>
<li><a href="#">Á¤ºñ°øÀÓ</a></li>
<span class="line">|</span>
<li><a href="#">Á¤±âÁ¡°ËÇÁ·Î±×·¥</a></li>
<span class="line">|</span>
<li><a href="#">Á¤Ç°µî·Ï</a></li>
<span class="line">|</span>
<li><a href="#">¸®ÄÝÁ¤º¸</a></li>
</ul>
</li><li><a href="#">Ä¿¹Â´ÏƼ</a>
<ul>
<li><a href="#">´º½º&°øÁö</a></li>
<span class="line">|</span>
<li><a href="#">º¸µµÀÚ·á</a></li>
<span class="line">|</span>
<li><a href="#">À̺¥Æ®</a></li>
<span class="line">|</span>
<li><a href="#">½Ã½Â±â/¸®ºä</a></li>
<span class="line">|</span>
<li><a href="#">½ºÁîÅ°½ºÄð</a></li>
<span class="line">|</span>
<li><a href="#">½ºÁîÅ°·¹À̽Ì</a></li>
<span class="line">|</span>
<li><a href="#">¿ùÆäÀÌÆÛ</a></li>
<span class="line">|</span>
<li><a href="#">µ¿È£È¸¾È³»</a></li>
</ul>
</li><li><a href="#">ÆǸÅ/¼ºñ½ºÁ¡</a>
<ul>
<li><a href="#">ÆǸÅÁ¡±¸ºå¾È³»</a></li>
<span class="line">|</span>
<li><a href="#">Àü¹®Á¡</a></li>
<span class="line">|</span>
<li><a href="#">Çù¾àÁ¡</a></li>
<span class="line">|</span>
<li><a href="#">ºÎÇ°Àü¹®Á¡</a></li>
</ul>
</li><li><a href="#">ȸ»ç¼Ò°³</a>
<ul>
<li><a href="#">ºê·£µå¼Ò°³</a></li>
<span class="line">|</span>
<li><a href="#">CEO</a></li>
<span class="line">|</span>
<li><a href="#">¿¬Çõ</a></li>
<span class="line">|</span>
<li><a href="#">CI</a></li>
<span class="line">|</span>
<li><a href="#">ã¾Æ¿À½Ã´Â±æ</a></li>
<span class="line">|</span>
<li><a href="#">ä¿ë¾È³»</a></li>
</ul>
</li><li><a href="#">¿Â¶óÀνºÅä¾î</a>
<ul>
<li><a href="#">¸ðÅÍ»çÀÌŬ</a></li>
<span class="line">|</span>
<li><a href="#">¼øÁ¤¿É¼Ç</a></li>
<span class="line">|</span>
<li><a href="#">ÀÇ·ù</a></li>
<span class="line">|</span>
<li><a href="#">º¸È£±¸</a></li>
<span class="line">|</span>
<li><a href="#">¾Ç¼¼»ç¸®</a></li>
<span class="line">|</span>
<li><a href="#">¿ÀÀÏ ¹× ÄɹÌÄ÷ù</a></li>
<span class="line">|</span>
<li><a href="#">½ºÅ¸ÀÏÁ¦¾È</a></li>
<span class="line">|</span>
<li><a href="#">ÆÐÅ°Áö»óÇ°</a></li>
<span class="line">|</span>
<li><a href="#">¸®ÆÛ/¾Æ¿ï·¿</a></li>
</ul>
</li>
</ul>
<div class="b_nav">
<ul>
<li><a href="#">SUPERSPORT</a>
<ul><li><a href="#"><img src="img/supersports_02.png" alt="" title=""/></a></li><li><a href="#"><img src="img/supersports_03.png" alt="" title=""/></a></li><li><a href="#"><img src="img/supersports_04.png" alt="" title=""/></a></li><li><a href="#"><img src="img/supersports_05.png" alt="" title=""/></a></li>
</ul>
</li><li><a href="#">STREET</a>
<ul>
<li><a href="#"><img src="img/street_02.png" alt="" title=""/></a></li><li><a href="#"><img src="img/street_03.png" alt="" title=""/></a></li><li><a href="#"><img src="img/street_04.png" alt="" title=""/></a></li><li><a href="#"><img src="img/street_05.png" alt="" title=""/></a></li>
</ul>
</li><li><a href="#">SCOOTER</a>
<ul>
<li>hayabusa</li>
<li>GSXR-1000</li>
<li>GSXR-750</li>
<li>GSXR-1000</li>
</ul>
</li><li><a href="#">CRUSER</a>
<ul>
<li>hayabusa</li>
<li>GSXR-1000</li>
<li>GSXR-750</li>
<li>GSXR-1000</li>
</ul>
</li><li><a href="#">TOURER</a>
<ul>
<li>hayabusa</li>
<li>GSXR-1000</li>
<li>GSXR-750</li>
<li>GSXR-1000</li>
</ul>
</li><li><a href="#">OFFLOAD</a>
<ul>
<li>hayabusa</li>
<li>GSXR-1000</li>
<li>GSXR-750</li>
<li>GSXR-1000</li>
</ul>
</li><li><a href="#">SUPERSPORT</a>
<ul>
<li>hayabusa</li>
<li>GSXR-1000</li>
<li>GSXR-750</li>
<li>GSXR-1000</li>
</ul>
</li><li></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
css
body, ul, li, h1, h2,h3,h4, dl,div, span{ margin:0; padding:0; -webkit-text-size-adjust:none}
ul, ol{list-style:none;}
img{border:none}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;}
#wrapper { width:100%; height:100%; }
#header {width:1001px; height:71px; position:relative; margin:0 auto; }
.logo {width:71px; height:71px; position:relative; float:left; padding:0; /*background:url('../img/dddd.png') no-repeat;*/}
.wassup {width:71px; height:71px; position:relative; float:left; padding:0; /*background:url('../img/ddddd.png') no-repeat;*/}
.util_nav {position:absolute; top:0px; right:5px; font:11px bolder "µ¸¿ò","tahoma"; padding:11px 0 !important; }
.util_nav a, a:hover {text-decoration:none; color:#979797; display:inline; *display:inline; zoom:1;}
.nav {width:858px; height:71px; position:relative; float:left; border-right:1px solid #dddddd; }
.text {display:block;text-indent:100%;white-space:nowrap;overflow:hidden;}
.nav .line { color:#658BA2; vertical-align: middle; *display:inline-block; *padding-bottom:15px;}
.nav .navigation {background:#F2F2F2;}
.nav ul {padding:0; margin:0;}
.nav ul li {display:inline-block; *display:inline; zoom:1; vertical-align: middle; }
.nav ul li a{font-size:12px; font-weight:bold; color:#323232; text-decoration:none; display:block; padding:11px 16px; -webkit-transition: all .5s; -moz-transition: all .5s;}
.nav ul li a:hover { color:#ffffff; background:#D3151F; -webkit-transition: all .5s; -moz-transition: all .5s;}
.nav ul li:hover ul {display:block; }
.nav ul li ul {position:absolute; display:none; top:36px; left:0; width:100%; background:#002F49; z-index:900; -webkit-transition: all .5s; -moz-transition: all .5s;}
.nav ul li ul li {}
.nav ul li ul li a {font-size:11px; color:#658BA2; padding:11px 13px; display:inline-block; *display:inline; zoom:1;}
.nav ul li ul li a:hover {color:#ffffffl; background:none;}
.nav .b_nav {position:relative; height:33px; }
.nav .b_nav ul { width: 100%; border-right:1px solid #dddddd; border-left:1px solid #dddddd; border-bottom:1px solid #dddddd; background:#ffffff;}
.nav .b_nav ul li {padding:4px 7px 0px 7px; vertical-align: middle;}
.nav .b_nav ul li a{ font-size:11px; font-family:'Tahoma'; font-weight:bold; padding:7px 4px 11px 7px; font-weight:bold; color:#323232; text-decoration:none; display:inline-block; *display:inline; zoom:1; }
.nav .b_nav ul li a:hover{ color:#d3151f; text-decoration:none; display:inline-block; background:#FBFBFD; border-top:1px solid #dddddd; border-right:1px solid #dddddd; border-left:1px solid #dddddd; -webkit-transition: all .0s; -moz-transition: all .0s;}
.nav .b_nav ul li:hover ul {display:block; }
.nav .b_nav ul li ul {position:absolute; display:none; top:34px; left:0; background:none; }
.nav .b_nav ul li ul li {width:213px; float:left; padding:0;}
.nav .b_nav ul li ul li a{padding:0 !important; display:inline-block; *display:inline; zoom:1}
.nav .b_nav ul li ul li a:hover{border:none;}
js
$(document).ready(function(){
$('ul.navigation').hover(function(){
$('div.b_nav ul').stop().animate({marginTop:35}, 200);
}, function(){
$('div.b_nav ul').stop().animate({marginTop:0}, 200)
});
});
µðÀÚÀÎÇϽôµ¥ µµ¿òÀÌ µÇ±æ ¹Ù¶ø´Ï´Ù
|