사이트를 돌아다니다가 플래시로된 메뉴바를 재미로 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)
});
});
디자인하시는데 도움이 되길 바랍니다
|
