적용 및 테스트 IE & FireFox2
리스트(목록)태그를 네비게이션 메뉴바로 활용한 예 입니다.
실제로 메뉴에 사용된 HTML 태그는, 다음과 같이 매우 간결합니다.
[ 메뉴에 사용된 HTML 태그 ]
<li><a href="/products/">Products</a></li>
<li><a href="/downloads/">Downloads</a></li>
<li><a href="/purchase/">Purchase</a></li>
<li><a href="/support/">Support</a></li>
<li><a href="/partners/">Partners</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
먼저 간단히, 메뉴 디자인의 설계를 살펴 보겠습니다.
[ 사용한 스타일 시트 ]
<style type="text/css">
#mainMenu{
list-style: none;
margin: 0; padding: 0 0 25px 5px;
background-color: #000000; border-bottom: 1px solid #ffcc00;
}
영역의 아래쪽에 패딩값을 25px로 주어, border-bottom이 베이스 라인으로 표현되게 합니다.
ul박스가 웹페이지에서 표현되는 세로의 실제 사이즈는 26px(25px+1px)입니다.
메뉴텍스트의 좌측간격이 15px이고, 아래의 li의 좌측 패딩값(10px)이므로 ul의 왼쪽 패딩은 5px로 설정합니다.
#mainMenu li{
float: left;
margin: 0; padding: 0 10px;
}
가로로 나열된 메뉴이기 때문에, float: left를 사용하여, 리스트 항목들을 좌에서 우로 배치하도록 합니다.
설계된 내용에 따라, 좌/우 공통으로 10px의 패딩값을 설정합니다. 메뉴간 간격(20px)
#mainMenu a{
display: block;
margin: 0; padding: 5px 0 1px 0;
height: 16px;
font-family: verdana; font-size: 9px; color: #ffffff; font-weight: bold;
text-decoration:none;
}
li태그의 배치 속성이 float: left인 관계로, 안쪽에 위치하는 a태그를 블록레벨로 설정하여, 정확한 레이아웃을 만들 수 있도록 합니다. 상(5px), 하(1px), 영역높이(16px)의 합은 실제 영역높이(25px)에서 롤오보 보더값(3px)를 제외한 값입니다. (5px+1px+16px = 25px-3px)
#mainMenu a:visited{ color: #ffffff; }
#mainMenu a:hover{ color: #ff6600; }
#mainMenu a:active{ color: #0066ff; }
#mainMenu a:hover, #mainMenu a:active{ border-bottom: 3px solid #ffcc00; }
</style>
a태그에 롤 오버 스타일입니다. 아래쪽에 3px두께의 테두리(border)를 만들도록 하였습니다.
롤 오버 이미지를 활용한 네비게이션 바
약간만 손을 본다면, 아래와 같은 이미지를 활용한 네비게이션 바를 만들 수 있습니다.
#mainMenu{
list-style: none;
margin: 0; padding: 0 0 25px 5px;
background-color: #000000; border-bottom: 1px solid #ffcc00;
}
float: left;
margin: 0; padding: 0 10px;
}
#mainMenu a{
display: block;
margin: 0; padding: 5px 0 4px 0;
height: 16px;
font-family: verdana; font-size: 9px; color: #ffffff; font-weight: bold;
text-decoration:none;
}
#mainMenu a:visited{ color: #ffffff; }
#mainMenu a:hover{ color: #ff6600; }
#mainMenu a:active{ color: #0066ff; }
#mainMenu a:hover, #mainMenu a:active{
background: url(images/line_dot.gif) no-repeat 50% 100%;
}
</style>
출처 : http://blog.naver.com/einmong/10011718294
출처에서 가져온 코드를 적용해 보았으나 li태그가 가로로 나오지 못했습니다..
그래서 만들어 봤습니다.
<style type="text/css">
#mainMenu { margin:0px;padding: 0px 0px 25px 5px;background-color: #000000; border-bottom: 1px solid #ffcc00;list-style:none;}
#mainMenu li{ float: left;margin: 0; padding: 0 10px;}
#mainMenu a{ float:left;display:block;padding: 5px 0px 1px 0px; font-family: verdana; font-size: 12px; color: #ffffff; font-weight: bold;
text-decoration:none;}
#mainMenu a:visited{ color: #ffffff; }
#mainMenu a:hover{ color: #ff6600; }
#mainMenu a:active{ color: #ffffff; }
#mainMenu a:hover, #mainMenu a:active{ border-bottom: 3px solid #ffcc00; }
</style>
</HEAD>
<div style="float:left;background:#DAE0D2 ;line-height:normal;">
<ul id="mainMenu">
<li><a href="/products/">Products</a></li>
<li><a href="/downloads/">Downloads</a></li>
<li><a href="/purchase/">Purchase</a></li>
<li><a href="/support/">Support</a></li>
<li><a href="/partners/">Partners</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</div>
'AllAcc?ess' 카테고리의 다른 글
| 스포츠를 모르고 지냈네.. [여자배구 GS 김민지] (0) | 2007.02.03 |
|---|---|
| 동영상 object tag IE 와 Firefox 에서 사용하기. (0) | 2007.02.02 |
| web style ReF [ CSS : 리스트와 불릿 이미지 - ul, li ] (0) | 2007.02.01 |
| Construction of Prototype Framework Library (0) | 2007.01.31 |
| Javascript libraries 총정리 (0) | 2007.01.29 |
