½ÃÀÛÆäÀÌÁö·Î Áñ°Üã±âÃß°¡
·Î±×ÀÎ
ȸ¿ø°¡ÀÔ l Ã⼮üũ l ¸¶ÀÌÆäÀÌÁö l CGIMALL
happycgi
ÀÚ·á½Ç »çÀÌÆ®µî·Ï ·©Å·100 ÇÁ·Î±×·¥¸®ºä °ü¸®ÀÚÃßõÀÚ·á Ãʺ¸°¡À̵å
Ä¿¹Â´ÏƼ
Àüü ÆîÃ帱â
Äü¸Þ´º¸µÅ© jquery , CSS , PHP , Javascript , ¹«·áÆùÆ® , ASP
»ó¼¼°Ë»ö
Ȩ > CSS > ¸Þ´º > Ç÷¡½¬·ÎµÈ ¸Þ´º¹Ù¸¦ css·Î ¸¸µé¾î º¸¾Ò½À´Ï´Ù. »ó¼¼Á¤º¸
»çÀÌÆ®µî·Ï
Ŭ¶ó¿ìµåű×
javascript
PHP
ASP
CSS
mysql
html
jquery
������
image
mobile
API
slide
°Ô½ÃÆÇ
ÇöÀçÁ¢¼ÓÀÚ ¸í »õ·Î°íħ
Ç÷¡½¬·ÎµÈ ¸Þ´º¹Ù¸¦ css·Î ¸¸µé¾î º¸¾Ò½À´Ï´Ù.
¼Ò½ºÅë°èÁ¤º¸ ¿À·ù½Å°í ¹× ¹®ÀÇ
ÇØÇÇÆÀ
³×ƼÁð
Æ®À§ÅÍ·Î º¸³»±â ÆäÀ̽ººÏÀ¸·Î º¸³»±â
¼Ò½ººÐ·ù ¸Þ´º
´Ù¿î·Îµå Ƚ¼ö 511 ȸ
°£´Ü¼³¸í ½ºÁîÅ°ÄÚ¸®¾Æ¿¡ Ç÷¡½Ã·ÎµÈ ¸Þ´º¹Ù¸¦ css¸¦ ÀÌ¿ëÇؼ­ ¸¸µé¾î º¸¾Ò½À´Ï´Ù.
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
ȨÆäÀÌÁö¹Ù·Î°¡±â ¼Ò½º´Ù¿î·Îµå µ¥¸ð ¹Ì¸®º¸±â ½ºÅ©·¦Çϱâ

»çÀÌÆ®¸¦ µ¹¾Æ´Ù´Ï´Ù°¡ Ç÷¡½Ã·ÎµÈ ¸Þ´º¹Ù¸¦ Àç¹Ì·Î 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)
 });
});



µðÀÚÀÎÇϽôµ¥ µµ¿òÀÌ µÇ±æ ¹Ù¶ø´Ï´Ù

 


³×ƼÁð ÀÇ°ß   ÀÌ¿ëÇϽŠÀÚ·áÀÇ Èı⸦ ÀÚÀ¯·Ó°Ô ÀÛ¼ºÇϼ¼¿ä. (»ó¾÷ÀûÀÎ ±¤°í ¹× µµ¹è¼º ±Û µîÀº »çÀüÅ뺸¾øÀÌ »èÁ¦µÉ ¼ö ÀÖ½À´Ï´Ù.)
³»¿ë ¾ÆÀ̵ð ÀÇ°ß³²±â±â
:¿ÕÇÏÇÏ: È°¿ëµµ ³Ñ³Ñ ÁÁ¾Æ¿ä~~
2016-05-13 19:41:51
happ
Âù¼º 61
¹Ý´ë 67
1
À̸§
³»¿ë
:³×¸Â¾Æ¿ä: :È­³ª´Â±º¿ä: :Àá¿Í: :¿ì¿ïÇØ: :À̰ǾƳÄ: :¿ÕÇÏÇÏ: ¿Õ¿ôÀ½~ ³î·¥~
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
µµ¹è¹æÁöÅ°
 29311141 º¸ÀÌ´Â µµ¹è¹æÁöÅ°¸¦ ÀÔ·ÂÇϼ¼¿ä.