그누보드5 기본 GNB CSS.. 이렇게 까지 복잡할 필요가 있나요.. 정보
그누보드5 기본 GNB CSS.. 이렇게 까지 복잡할 필요가 있나요..본문
01 |
#gnb {position:relative;margin:-1px 0 0;border-top:1px dotted #dde4e9;border-bottom:1px solid #dde4e9;background:#ecf0f7} |
02 |
#gnb h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} |
03 |
#gnb #gnb_1dul {margin:0 auto !important;padding:0;width:1001px;zoom:1} |
04 |
#gnb #gnb_1dul:after {display:block;visibility:hidden;clear:both;content:""} |
05 |
.gnb_1dli {z-index:10;position:relative;float:left;zoom:1} |
06 |
.gnb_1dli:after {display:block;visibility:hidden;clear:both;content:""} |
07 |
.gnb_1da {display:block;float:left;padding:0 10px;width:130px;height:35px;font-weight:bold;line-height:2.95em;text-decoration:none} |
08 |
.gnb_1da:focus, .gnb_1da:hover {background:#333;text-decoration:none} |
09 |
.gnb_1dli_air a {background-color:#666666;color:#fff} |
10 |
.gnb_1dli_on a {background-color:#666666;color:#fff} |
11 |
.gnb_2dul {display:none;position:absolute;top:35px} |
12 |
.gnb_2da {display:block;width:130px;} |
13 |
.gnb_2da {display:inline-block;padding:0 10px;width:130px;height:35px;text-align:left;text-decoration:none;line-height:2.95em} |
14 |
.gnb_2da:focus, .gnb_2da:hover {background:#484848;color:#fff;text-decoration:none} |
15 |
.gnb_1dli_over .gnb_2dul {display:block;left:0;width:130px;background:#fff} |
16 |
.gnb_1dli_over2 .gnb_2dul {display:block;right:1px;width:130px;background:#fff} |
17 |
|
18 |
|
19 |
.gnb_empty {width:100%;height:35px;text-align:center;line-height:2.95em} |
지운아빠님 ㅠㅠ 네비게이션 기능은 좋지만.. CSS 수정하기가 매우.. 까다롭네요..
주석을 좀더 달아서 네비게이션 CSS 수정에 도움을 주시거나 심플하게 바꾸면 더 좋지 않을까요?
이런... 읽지않을 글을 써버렷네요
추천
0
0
댓글 3개
사실 ..지금 그누기본 gnb는..자바스크립트 필요없이..css로도 가능하지요..
#menu li:hover > .submenu{display:block}
#menu li > .submenu{display:none;position:absolute;}
~~~
~~~
#menu li:hover > .submenu{display:block}
#menu li > .submenu{display:none;position:absolute;}
~~~
~~~
그렇죠.
<!Doctype html>
<html>
<head>
<title>GNB예제 내컴퓨터</title>
</head>
<body>
<style>
/* GNB CSS */
ul, li {list-style:none; margin:0px; padding:0px; font-size:9pt; color:white; cursor:pointer;}
#gnb {width:100%; height:40px;}
#gnb li {padding-left:10px; padding-right:10px; height:40px; line-height:40px; position:relative; float:left;}
#gnb li ul {position:absolute; left:0px; top:40px; clear:left;}
#gnb li ul li { width:7em; height:32px; line-height:32px; position:relative;}
#gnb li ul li ul {position:absolute; left:100%; top:0px; }
#gnb li ul li ul li {width:7em; height:32px; line-height:32px; position:relative;}
#gnb li {background:#333333;}
#gnb li ul {display:none;}
#gnb li ul li {background:#555555;}
#gnb li:hover ul li ul {display:none;}
#gnb li:hover ul li ul li {background:#777777;}
#gnb li:hover {background:#444444;}
#gnb li:hover ul {display:block;}
#gnb li:hover ul li {display:block;}
#gnb li:hover ul li:hover {background:#666666;}
#gnb li:hover ul li:hover ul {display:block;}
#gnb li:hover ul li:hover ul li{display:block;}
#gnb li:hover ul li:hover ul li:hover{background:#888888;}
</style>
<ul id="gnb">
<li>메뉴1
<ul>
<li>서브메뉴1
<ul>
<li>서브서브메뉴1</li>
<li>서브서브메뉴2</li>
<li>서브서브메뉴3</li>
<li>서브서브메뉴4</li>
</ul>
</li>
<li>서브메뉴2</li>
<li>서브메뉴3</li>
<li>서브메뉴4</li>
</ul>
</li>
<li>메뉴2</li>
<li>메뉴3
<ul>
<li>서브메뉴1
<ul>
<li>서브서브메뉴1</li>
<li>서브서브메뉴2</li>
<li>서브서브메뉴3</li>
<li>서브서브메뉴4</li>
</ul>
</li>
<li>서브메뉴2</li>
<li>서브메뉴3</li>
<li>서브메뉴4</li>
</ul>
</li>
<li>메뉴4</li>
</ul>
</body>
</html>이런씩으로만 해줘도.. 몇십단의 다중 서브 메뉴를 만들수 있죠.
CSS 테스트 완료 한번 적용해보세요.
<!Doctype html>
<html>
<head>
<title>GNB예제 내컴퓨터</title>
</head>
<body>
<style>
/* GNB CSS */
ul, li {list-style:none; margin:0px; padding:0px; font-size:9pt; color:white; cursor:pointer;}
#gnb {width:100%; height:40px;}
#gnb li {padding-left:10px; padding-right:10px; height:40px; line-height:40px; position:relative; float:left;}
#gnb li ul {position:absolute; left:0px; top:40px; clear:left;}
#gnb li ul li { width:7em; height:32px; line-height:32px; position:relative;}
#gnb li ul li ul {position:absolute; left:100%; top:0px; }
#gnb li ul li ul li {width:7em; height:32px; line-height:32px; position:relative;}
#gnb li {background:#333333;}
#gnb li ul {display:none;}
#gnb li ul li {background:#555555;}
#gnb li:hover ul li ul {display:none;}
#gnb li:hover ul li ul li {background:#777777;}
#gnb li:hover {background:#444444;}
#gnb li:hover ul {display:block;}
#gnb li:hover ul li {display:block;}
#gnb li:hover ul li:hover {background:#666666;}
#gnb li:hover ul li:hover ul {display:block;}
#gnb li:hover ul li:hover ul li{display:block;}
#gnb li:hover ul li:hover ul li:hover{background:#888888;}
</style>
<ul id="gnb">
<li>메뉴1
<ul>
<li>서브메뉴1
<ul>
<li>서브서브메뉴1</li>
<li>서브서브메뉴2</li>
<li>서브서브메뉴3</li>
<li>서브서브메뉴4</li>
</ul>
</li>
<li>서브메뉴2</li>
<li>서브메뉴3</li>
<li>서브메뉴4</li>
</ul>
</li>
<li>메뉴2</li>
<li>메뉴3
<ul>
<li>서브메뉴1
<ul>
<li>서브서브메뉴1</li>
<li>서브서브메뉴2</li>
<li>서브서브메뉴3</li>
<li>서브서브메뉴4</li>
</ul>
</li>
<li>서브메뉴2</li>
<li>서브메뉴3</li>
<li>서브메뉴4</li>
</ul>
</li>
<li>메뉴4</li>
</ul>
</body>
</html>이런씩으로만 해줘도.. 몇십단의 다중 서브 메뉴를 만들수 있죠.
CSS 테스트 완료 한번 적용해보세요.
지운아빠님 : 술시라... 읽을 시간 없음
