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

git-svn-id: http://xe-core.googlecode.com/svn/sandbox@5904 201d5d3c-b55e-5fd7-737f-ddc643e51545

widgets/navigator/skins/horiNavigator/css/widget.css

@@ -1,17 +1,20 @@
-.widgetNavC{ margin:0; padding:0; font-size:12px; line-height:1.2; background-repeat:repeat-x;background-position:0 0;}
+@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:20px; height:auto; padding-bottom:7px; background:#35ad06; border:1px solid #027a00;}
+.widgetNavC ul li ul{ display:none; position:absolute; top:40px; left:0; height:auto; padding-bottom:7px; border:1px solid;}
-.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{ 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.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{ 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{ 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;}
@@ -28,6 +31,27 @@ 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;}
@@ -90,7 +114,7 @@ ul.widgetNavSub.red li.first{ background-image:url(../img/white/arrowMenuCred.gi
 
 /* widgetNavCgray */
 .widgetNavCgray{ background-image:url(../img/white/bgMenuCgray.gif);}
-.widgetNavCgray ul li ul{ background:#595959; border-color:#7a1300;}
+.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);}
@@ -100,3 +124,46 @@ 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);}
+
+