수평 메뉴 2단계 표현 확장. 기존 수평 메뉴의 2단계 메뉴가 수직 아닌 수평으로 펼쳐지는 형식을 추가.

git-svn-id: http://xe-core.googlecode.com/svn/sandbox@5904 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
ChanMyeong 2009-03-18 08:30:20 +00:00
parent 7d15dd5353
commit 1de4043e63
7 changed files with 169 additions and 102 deletions

View file

@ -1,102 +1,169 @@
.widgetNavC{ margin:0; padding:0; font-size:12px; line-height:1.2; background-repeat:repeat-x;background-position:0 0;}
.widgetNavC ul{ margin:0; padding:0; height:35px;}
.widgetNavC ul li ul{ display:none; position:absolute; top:40px; left:20px; height:auto; padding-bottom:7px; background:#35ad06; border:1px solid #027a00;}
.widgetNavC ul li { margin:0 !important; }
.widgetNavC ul li.active ul{ display:block;}
.widgetNavC ul.aCenter{ margin-left:auto; margin-right:auto;}
.widgetNavC ul.aLeft{ margin-right:auto;}
.widgetNavC ul.aRight{ margin-left:auto;}
.widgetNavC li{ position:relative; padding-right:3px; float:left; list-style:none; background-repeat:no-repeat;background-position:right -40px; white-space:nowrap;}
.widgetNavC li a{ position:relative; float:left; padding:12px 22px 0 25px; height:23px; color:#fff !important; text-decoration:none !important;}
.widgetNavC li.first a{ background-repeat:no-repeat;background-position:left -40px;}
.widgetNavC li.active{ margin-left:-2px; background-repeat:no-repeat;background-position:right -80px;}
.widgetNavC li.active a{ font-weight:bold; color:#ff0 !important; background-repeat:no-repeat; background-position:left -80px;}
.widgetNavC li.active li{ padding:2px 15px; float:none; background:none;}
.widgetNavC li.active li.active{ margin:0;}
.widgetNavC li.active li.first{ margin-top:-4px; padding-top:14px; background-repeat:no-repeat; background-position:30px top;}
.widgetNavC li.active li a{ display:block; _display:inline-block; padding:0; float:none; height:auto; font-weight:normal; color:#fff !important; background:none;}
.widgetNavC li.active li.active a{ color:#ff0 !important;}
.widgetNavC li.active li a:hover,
.widgetNavC li.active li a:active,
.widgetNavC li.active li a:focus{ text-decoration:underline !important;}
ul.widgetNavSub { display:block; height:auto; border:1px solid; padding-bottom:7px; background:#35ad06; background-image:none !important; padding:0; margin:0;}
ul.widgetNavSub li { list-style:none; }
ul.widgetNavSub li a{ display:block; padding:5px 10px 5px 10px; color:#fff; text-decoration:none !important; white-space:nowrap;}
ul.widgetNavSub li a:hover,
ul.widgetNavSub li a:active,
ul.widgetNavSub li a:focus{ text-decoration:underline !important;}
ul.widgetNavSub li.first{ margin-top:-4px; padding-top:14px; background-repeat:no-repeat; background-position:30px top;}
/* widgetNavCgreen */
.widgetNavCgreen{ background-image:url(../img/white/bgMenuCgreen.gif);}
.widgetNavCgreen ul li ul{ background:#35ad06; border-color:#027a00;}
.widgetNavCgreen li{ background-image:url(../img/white/bgMenuCgreen.gif);}
.widgetNavCgreen li.first a{ background-image:url(../img/white/bgMenuCgreen.gif);}
.widgetNavCgreen li.active{ background-image:url(../img/white/bgMenuCgreen.gif);}
.widgetNavCgreen li.active a{ background-image:url(../img/white/bgMenuCgreen.gif);}
.widgetNavCgreen li.active li.first{ background-image:url(../img/white/arrowMenuCgreen.gif);}
ul.widgetNavSub.green { background:#35ad06; border-color:#027a00;}
ul.widgetNavSub.green { background-image:url(../img/white/bgMenuCgreen.gif);}
ul.widgetNavSub.green li.first{ background-image:url(../img/white/arrowMenuCgreen.gif);}
/* widgetNavCblue */
.widgetNavCblue{ background-image:url(../img/white/bgMenuCblue.gif);}
.widgetNavCblue ul li ul{ background:#0688ad; border-color:#00557a;}
.widgetNavCblue li{ background-image:url(../img/white/bgMenuCblue.gif);}
.widgetNavCblue li.first a{ background-image:url(../img/white/bgMenuCblue.gif);}
.widgetNavCblue li.active{ background-image:url(../img/white/bgMenuCblue.gif);}
.widgetNavCblue li.active a{ background-image:url(../img/white/bgMenuCblue.gif);}
.widgetNavCblue li.active li.first{ background-image:url(../img/white/arrowMenuCblue.gif);}
ul.widgetNavSub.blue { background:#0688ad; border-color:#00557a;}
ul.widgetNavSub.blue { background-image:url(../img/white/bgMenuCblue.gif);}
ul.widgetNavSub.blue li.first{ background-image:url(../img/white/arrowMenuCblue.gif);}
/* widgetNavCcyan */
.widgetNavCcyan{ background-image:url(../img/white/bgMenuCcyan.gif);}
.widgetNavCcyan ul li ul{ background:#06a4ad; border-color:#00717a;}
.widgetNavCcyan li{ background-image:url(../img/white/bgMenuCcyan.gif);}
.widgetNavCcyan li.first a{ background-image:url(../img/white/bgMenuCcyan.gif);}
.widgetNavCcyan li.active{ background-image:url(../img/white/bgMenuCcyan.gif);}
.widgetNavCcyan li.active a{ background-image:url(../img/white/bgMenuCcyan.gif);}
.widgetNavCcyan li.active li.first{ background-image:url(../img/white/arrowMenuCcyan.gif);}
ul.widgetNavSub.cyan { background:#06a4ad; border-color:#00717a;}
ul.widgetNavSub.cyan{ background-image:url(../img/white/bgMenuCcyan.gif);}
ul.widgetNavSub.cyan li.first{ background-image:url(../img/white/arrowMenuCcyan.gif);}
/* widgetNavCorange */
.widgetNavCorange{ background-image:url(../img/white/bgMenuCorange.gif);}
.widgetNavCorange ul li ul{ background:#ad9906; border-color:#7a6600;}
.widgetNavCorange li{ background-image:url(../img/white/bgMenuCorange.gif);}
.widgetNavCorange li.first a{ background-image:url(../img/white/bgMenuCorange.gif);}
.widgetNavCorange li.active{ background-image:url(../img/white/bgMenuCorange.gif);}
.widgetNavCorange li.active a{ background-image:url(../img/white/bgMenuCorange.gif);}
.widgetNavCorange li.active li.first{ background-image:url(../img/white/arrowMenuCorange.gif);}
ul.widgetNavSub.orange { background:#ad9906; border-color:#7a6600;}
ul.widgetNavSub.orange{ background-image:url(../img/white/bgMenuCorange.gif);}
ul.widgetNavSub.orange li.first{ background-image:url(../img/white/arrowMenuCorange.gif);}
/* widgetNavCred */
.widgetNavCred{ background-image:url(../img/white/bgMenuCred.gif);}
.widgetNavCred ul li ul{ background:#ad4606; border-color:#7a1300;}
.widgetNavCred li{ background-image:url(../img/white/bgMenuCred.gif);}
.widgetNavCred li.first a{ background-image:url(../img/white/bgMenuCred.gif);}
.widgetNavCred li.active{ background-image:url(../img/white/bgMenuCred.gif);}
.widgetNavCred li.active a{ background-image:url(../img/white/bgMenuCred.gif);}
.widgetNavCred li.active li.first{ background-image:url(../img/white/arrowMenuCred.gif);}
ul.widgetNavSub.red { background:#ad4606; border-color:#7a1300;}
ul.widgetNavSub.red {background-image:url(../img/white/bgMenuCred.gif);}
ul.widgetNavSub.red li.first{ background-image:url(../img/white/arrowMenuCred.gif);}
/* widgetNavCgray */
.widgetNavCgray{ background-image:url(../img/white/bgMenuCgray.gif);}
.widgetNavCgray ul li ul{ background:#595959; border-color:#7a1300;}
.widgetNavCgray li{ background-image:url(../img/white/bgMenuCgray.gif);}
.widgetNavCgray li.first a{ background-image:url(../img/white/bgMenuCgray.gif);}
.widgetNavCgray li.active{ background-image:url(../img/white/bgMenuCgray.gif);}
.widgetNavCgray li.active a{ background-image:url(../img/white/bgMenuCgray.gif);}
.widgetNavCgray li.active li.first{ background-image:url(../img/white/arrowMenuCgray.gif);}
ul.widgetNavSub.gray { background:#595959; border-color:#555;}
ul.widgetNavSub.gray{ background-image:url(../img/white/bgMenuCgray.gif);}
ul.widgetNavSub.gray li.first{ background-image:url(../img/white/arrowMenuCgray.gif);}
@charset "utf-8";
/* NHN > UIT Center > Open UI Technology Team > Jeong Chan Myeong(dece24@nhncorp.com) */
/* widgetNavC */
.widgetNavC{ margin:0; padding:0; font-size:12px; line-height:1.2; background-repeat:repeat-x; background-position:0 0;}
.widgetNavC ul{ margin:0; padding:0; height:35px;}
.widgetNavC ul li ul{ display:none; position:absolute; top:40px; left:0; height:auto; padding-bottom:7px; border:1px solid;}
.widgetNavC ul li.active ul{ display:block;}
.widgetNavC ul.aCenter{ margin-left:auto; margin-right:auto;}
.widgetNavC ul.aLeft{ margin-right:auto;}
.widgetNavC ul.aRight{ margin-left:auto;}
.widgetNavC li{ position:relative; padding-right:3px; float:left; list-style:none; background-repeat:no-repeat; background-position:right -40px; white-space:nowrap;}
.widgetNavC li a{ position:relative; float:left; padding:12px 22px 0 25px; height:23px; color:#fff !important; text-decoration:none !important;}
.widgetNavC li.first a{ background-repeat:no-repeat; background-position:left -40px;}
.widgetNavC li.active{ margin-left:-2px; background-repeat:no-repeat; background-position:right -80px;}
.widgetNavC li.active a{ font-weight:bold; color:#ff0 !important; background-repeat:no-repeat; background-position:left -80px;}
.widgetNavC li.active li{ padding:2px 15px; float:none; background:none !important;}
.widgetNavC li.active li.active{ margin:0;}
.widgetNavC li.active li.first{ margin-top:-4px; padding-top:14px; background-repeat:no-repeat; background-position:30px top;}
.widgetNavC li.active li a{ display:block; _display:inline-block; padding:0; float:none; height:auto; font-weight:normal; color:#fff !important; background:none;}
.widgetNavC li.active li.active a{ color:#ff0 !important;}
.widgetNavC li.active li a:hover,
.widgetNavC li.active li a:active,
.widgetNavC li.active li a:focus{ text-decoration:underline !important;}
ul.widgetNavSub { display:block; height:auto; border:1px solid; padding-bottom:7px; background:#35ad06; background-image:none !important; padding:0; margin:0;}
ul.widgetNavSub li { list-style:none; }
ul.widgetNavSub li a{ display:block; padding:5px 10px 5px 10px; color:#fff; text-decoration:none !important; white-space:nowrap;}
ul.widgetNavSub li a:hover,
ul.widgetNavSub li a:active,
ul.widgetNavSub li a:focus{ text-decoration:underline !important;}
ul.widgetNavSub li.first{ margin-top:-4px; padding-top:14px; background-repeat:no-repeat; background-position:30px top;}
/* widgetNavD */
.widgetNavD{ margin:0; padding:0; font-size:12px; line-height:1.2; background-repeat:repeat-x; background-position:0 0;}
.widgetNavD ul{ position:relative; margin:0; padding:0; height:65px;}
.widgetNavD ul li ul{ display:none; position:absolute; top:35px; left:0; width:100%; height:auto; padding-top:10px;}
.widgetNavD ul li.active ul{ display:block;}
.widgetNavD ul.aCenter{ margin-left:auto; margin-right:auto;}
.widgetNavD ul.aLeft{ margin-right:auto;}
.widgetNavD ul.aRight{ margin-left:auto;}
.widgetNavD li{ padding-right:3px; float:left; list-style:none; background-repeat:no-repeat; background-position:right -120px; white-space:nowrap;}
.widgetNavD li a{ position:relative; float:left; padding:12px 22px 0 25px; height:23px; color:#fff !important; text-decoration:none !important;}
.widgetNavD li.first a{ background-repeat:no-repeat; background-position:left -120px;}
.widgetNavD li.active{ margin-left:-2px; background-repeat:no-repeat; background-position:right -160px;}
.widgetNavD li.active a{ font-weight:bold; color:#ff0 !important; background-repeat:no-repeat; background-position:left -160px;}
.widgetNavD li.active li{ display:inline; float:none; background:url(../img/white/lineTextDiv.gif) no-repeat 0 center; margin-right:7px; padding-left:10px;}
.widgetNavD li.active li.first{ background:none !important; padding-left:0;}
.widgetNavD li.active li a{ display:inline; padding:0; float:none; height:auto; font-weight:normal; color:#fff !important; background:none;}
.widgetNavD li.active li.active a{ color:#ff0 !important;}
.widgetNavD li.active li a:hover,
.widgetNavD li.active li a:active,
.widgetNavD li.active li a:focus{ text-decoration:underline !important;}
/* widgetNavCgreen */
.widgetNavCgreen{ background-image:url(../img/white/bgMenuCgreen.gif);}
.widgetNavCgreen ul li ul{ background:#35ad06; border-color:#027a00;}
.widgetNavCgreen li{ background-image:url(../img/white/bgMenuCgreen.gif);}
.widgetNavCgreen li.first a{ background-image:url(../img/white/bgMenuCgreen.gif);}
.widgetNavCgreen li.active{ background-image:url(../img/white/bgMenuCgreen.gif);}
.widgetNavCgreen li.active a{ background-image:url(../img/white/bgMenuCgreen.gif);}
.widgetNavCgreen li.active li.first{ background-image:url(../img/white/arrowMenuCgreen.gif);}
ul.widgetNavSub.green { background:#35ad06; border-color:#027a00;}
ul.widgetNavSub.green { background-image:url(../img/white/bgMenuCgreen.gif);}
ul.widgetNavSub.green li.first{ background-image:url(../img/white/arrowMenuCgreen.gif);}
/* widgetNavCblue */
.widgetNavCblue{ background-image:url(../img/white/bgMenuCblue.gif);}
.widgetNavCblue ul li ul{ background:#0688ad; border-color:#00557a;}
.widgetNavCblue li{ background-image:url(../img/white/bgMenuCblue.gif);}
.widgetNavCblue li.first a{ background-image:url(../img/white/bgMenuCblue.gif);}
.widgetNavCblue li.active{ background-image:url(../img/white/bgMenuCblue.gif);}
.widgetNavCblue li.active a{ background-image:url(../img/white/bgMenuCblue.gif);}
.widgetNavCblue li.active li.first{ background-image:url(../img/white/arrowMenuCblue.gif);}
ul.widgetNavSub.blue { background:#0688ad; border-color:#00557a;}
ul.widgetNavSub.blue { background-image:url(../img/white/bgMenuCblue.gif);}
ul.widgetNavSub.blue li.first{ background-image:url(../img/white/arrowMenuCblue.gif);}
/* widgetNavCcyan */
.widgetNavCcyan{ background-image:url(../img/white/bgMenuCcyan.gif);}
.widgetNavCcyan ul li ul{ background:#06a4ad; border-color:#00717a;}
.widgetNavCcyan li{ background-image:url(../img/white/bgMenuCcyan.gif);}
.widgetNavCcyan li.first a{ background-image:url(../img/white/bgMenuCcyan.gif);}
.widgetNavCcyan li.active{ background-image:url(../img/white/bgMenuCcyan.gif);}
.widgetNavCcyan li.active a{ background-image:url(../img/white/bgMenuCcyan.gif);}
.widgetNavCcyan li.active li.first{ background-image:url(../img/white/arrowMenuCcyan.gif);}
ul.widgetNavSub.cyan { background:#06a4ad; border-color:#00717a;}
ul.widgetNavSub.cyan{ background-image:url(../img/white/bgMenuCcyan.gif);}
ul.widgetNavSub.cyan li.first{ background-image:url(../img/white/arrowMenuCcyan.gif);}
/* widgetNavCorange */
.widgetNavCorange{ background-image:url(../img/white/bgMenuCorange.gif);}
.widgetNavCorange ul li ul{ background:#ad9906; border-color:#7a6600;}
.widgetNavCorange li{ background-image:url(../img/white/bgMenuCorange.gif);}
.widgetNavCorange li.first a{ background-image:url(../img/white/bgMenuCorange.gif);}
.widgetNavCorange li.active{ background-image:url(../img/white/bgMenuCorange.gif);}
.widgetNavCorange li.active a{ background-image:url(../img/white/bgMenuCorange.gif);}
.widgetNavCorange li.active li.first{ background-image:url(../img/white/arrowMenuCorange.gif);}
ul.widgetNavSub.orange { background:#ad9906; border-color:#7a6600;}
ul.widgetNavSub.orange{ background-image:url(../img/white/bgMenuCorange.gif);}
ul.widgetNavSub.orange li.first{ background-image:url(../img/white/arrowMenuCorange.gif);}
/* widgetNavCred */
.widgetNavCred{ background-image:url(../img/white/bgMenuCred.gif);}
.widgetNavCred ul li ul{ background:#ad4606; border-color:#7a1300;}
.widgetNavCred li{ background-image:url(../img/white/bgMenuCred.gif);}
.widgetNavCred li.first a{ background-image:url(../img/white/bgMenuCred.gif);}
.widgetNavCred li.active{ background-image:url(../img/white/bgMenuCred.gif);}
.widgetNavCred li.active a{ background-image:url(../img/white/bgMenuCred.gif);}
.widgetNavCred li.active li.first{ background-image:url(../img/white/arrowMenuCred.gif);}
ul.widgetNavSub.red { background:#ad4606; border-color:#7a1300;}
ul.widgetNavSub.red {background-image:url(../img/white/bgMenuCred.gif);}
ul.widgetNavSub.red li.first{ background-image:url(../img/white/arrowMenuCred.gif);}
/* widgetNavCgray */
.widgetNavCgray{ background-image:url(../img/white/bgMenuCgray.gif);}
.widgetNavCgray ul li ul{ background:#595959; border-color:#444;}
.widgetNavCgray li{ background-image:url(../img/white/bgMenuCgray.gif);}
.widgetNavCgray li.first a{ background-image:url(../img/white/bgMenuCgray.gif);}
.widgetNavCgray li.active{ background-image:url(../img/white/bgMenuCgray.gif);}
.widgetNavCgray li.active a{ background-image:url(../img/white/bgMenuCgray.gif);}
.widgetNavCgray li.active li.first{ background-image:url(../img/white/arrowMenuCgray.gif);}
ul.widgetNavSub.gray { background:#595959; border-color:#555;}
ul.widgetNavSub.gray{ background-image:url(../img/white/bgMenuCgray.gif);}
ul.widgetNavSub.gray li.first{ background-image:url(../img/white/arrowMenuCgray.gif);}
/* widgetNavDgreen */
.widgetNavDgreen{ background-image:url(../img/white/bgMenuDgreen.gif); background-color:#399700;}
.widgetNavDgreen li{ background-image:url(../img/white/bgMenuDgreen.gif);}
.widgetNavDgreen li.first a{ background-image:url(../img/white/bgMenuDgreen.gif);}
.widgetNavDgreen li.active{ background-image:url(../img/white/bgMenuDgreen.gif);}
.widgetNavDgreen li.active a{ background-image:url(../img/white/bgMenuDgreen.gif);}
/* widgetNavDblue */
.widgetNavDblue{ background-image:url(../img/white/bgMenuDblue.gif); background-color:#008598;}
.widgetNavDblue li{ background-image:url(../img/white/bgMenuDblue.gif);}
.widgetNavDblue li.first a{ background-image:url(../img/white/bgMenuDblue.gif);}
.widgetNavDblue li.active{ background-image:url(../img/white/bgMenuDblue.gif);}
.widgetNavDblue li.active a{ background-image:url(../img/white/bgMenuDblue.gif);}
/* widgetNavDcyan */
.widgetNavDcyan{ background-image:url(../img/white/bgMenuDcyan.gif); background-color:#009790;}
.widgetNavDcyan li{ background-image:url(../img/white/bgMenuDcyan.gif);}
.widgetNavDcyan li.first a{ background-image:url(../img/white/bgMenuDcyan.gif);}
.widgetNavDcyan li.active{ background-image:url(../img/white/bgMenuDcyan.gif);}
.widgetNavDcyan li.active a{ background-image:url(../img/white/bgMenuDcyan.gif);}
/* widgetNavDorange */
.widgetNavDorange{ background-image:url(../img/white/bgMenuDorange.gif); background-color:#957400;}
.widgetNavDorange li{ background-image:url(../img/white/bgMenuDorange.gif);}
.widgetNavDorange li.first a{ background-image:url(../img/white/bgMenuDorange.gif);}
.widgetNavDorange li.active{ background-image:url(../img/white/bgMenuDorange.gif);}
.widgetNavDorange li.active a{ background-image:url(../img/white/bgMenuDorange.gif);}
/* widgetNavDred */
.widgetNavDred{ background-image:url(../img/white/bgMenuDred.gif); background-color:#962B00;}
.widgetNavDred li{ background-image:url(../img/white/bgMenuDred.gif);}
.widgetNavDred li.first a{ background-image:url(../img/white/bgMenuDred.gif);}
.widgetNavDred li.active{ background-image:url(../img/white/bgMenuDred.gif);}
.widgetNavDred li.active a{ background-image:url(../img/white/bgMenuDred.gif);}
/* widgetNavDgray */
.widgetNavDgray{ background-image:url(../img/white/bgMenuDgray.gif); background-color:#4B4B4B;}
.widgetNavDgray li{ background-image:url(../img/white/bgMenuDgray.gif);}
.widgetNavDgray li.first a{ background-image:url(../img/white/bgMenuDgray.gif);}
.widgetNavDgray li.active{ background-image:url(../img/white/bgMenuDgray.gif);}
.widgetNavDgray li.active a{ background-image:url(../img/white/bgMenuDgray.gif);}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB