묻고답하기
애플 메뉴판 좀 같이 코딩해주실 분~;;;
2013.08.15 03:44
댓글 2
-
XEMANIA
2013.08.15 08:31
-
그르네요. 그르지 않고서는 불가능하죠? ;;
-
Summer
2013.08.16 21:50
애플 매뉴와 완전히 똑같이 만드려면 테두리 이미지와 배경 이미지가 png 파일로 존재해야합니다
최대한 비슷하게 만들어 보자면
<style>
#globalheader {background:#707070 url('http://images.apple.com/global/nav/images/globalheader.png');
}
#globalheader{-khtml-border-radius: 4px;-ms-border-radius: 4px;-o-border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;
border-radius: 4px;}
#globalheader{khtml-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
-ms-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
-o-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 2px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 2px;}
#globalheader{height:36px;margin:0 auto;padding:0;display:block;width:980px;text-align:left;font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;color:#333;margin-top:50px;}
#globalheader #globalnav {list-style:none outside;display: table;float: left;width: 980px;height:36px;position:relative;zoom:1;margin:0;padding:0;table-layout: fixed;
-o-transition: width 0.3s ease-in-out;
-ms-transition: width 0.3s ease-in-out;
-moz-transition: width 0.3s ease-in-out;
-webkit-transition: width 0.3s ease-in-out;}
#globalheader #globalnav li {
display: table-cell;
width: 100%;height:36px;margin:0;padding:0;zoom:1;
}
#globalheader #globalnav li:first-child a {
-moz-border-radius: 4px 0 0 4px;
-webkit-border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;}
#globalheader #globalnav li:first-child .border{display:none;}
#globalheader #globalnav li a{text-align:center;position:relative;color:#FFF;font-size:13px;width: auto;background: none;display:block;float:none;text-decoration:none;height:36px;outline:none;cursor:pointer;vertical-align:middle;}
#globalheader #globalnav li a:hover .hover{display:block;}
#globalheader #globalnav li a span{height:36px;}
#globalheader #globalnav li a .text{z-index:3;position:relative;top:8px;}
#globalheader #globalnav li a .border{z-index:1;float:left;background:url('http://images.apple.com/global/nav/images/globalnav.png') -100px 0;width:3px;}
#globalheader #globalnav li a .hover{display:none;z-index:2;width:100%;height:36px;position:absolute;background:rgba(0,0,0,0.3);left:1px;padding-right:1px;}
#globalheader #globalnav li:first-child .hover{left:0px;padding-right:2px;border-top-left-radius:5px;border-bottom-left-radius:5px;}
#globalheader #globalnav li:last-child .hover{left:1px;border-top-right-radius:5px;border-bottom-right-radius:5px;padding:0}
</style>
<nav id="globalheader">
<ul id="globalnav">
<li><a><span class="hover"></span><span class="border"></span><span class="text">Menu</span></a></li>
<li><a><span class="hover"></span><span class="border"></span><span class="text">Menu</span></a></li>
<li><a><span class="hover"></span><span class="border"></span><span class="text">Menu</span></a></li>
<li><a><span class="hover"></span><span class="border"></span><span class="text">Menu</span></a></li>
<li><a><span class="hover"></span><span class="border"></span><span class="text">Menu</span></a></li>
<li><a><span class="hover"></span><span class="border"></span><span class="text">Menu</span></a></li>
<li><a><span class="hover"></span><span class="border"></span><span class="text">Menu</span></a></li>
<li><a><span class="hover"></span><span class="border"></span><span class="text">Menu</span></a></li>
</ul>
</nav>
-
마음의 포인트 10000점을 드립니다. ㅠㅠ
CSS3속성을 쓰면 안되나요? border-radius나 box-shadow등으로 활용할 수 있겠는데요?