GNB UX enhancement.

git-svn-id: http://xe-core.googlecode.com/svn/branches/maserati@12198 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
ChanMyeong 2012-11-13 08:25:46 +00:00
parent 60b0a76f3f
commit 036df30b85
4 changed files with 27 additions and 25 deletions

View file

@ -161,16 +161,13 @@ body>.x,
.x>.xin>.body:after{content:"";display:block;clear:both}
.x>.xin>.body>.content{width:100%;padding:1px 0 0 0;float:right;margin:0 0 30px -100%;outline:none}
.x>.xin>.body>.content>*:first-child{margin-top:0}
.x>.xin>.body>.gnb{width:180px;position:fixed;top:71px;left:10px}
.x>.xin>.body.wide>.gnb{width:36px}
@media all and (max-height:700px){
.x>.xin>.body>.gnb{position:absolute;top:1px;left:2px}
}
.x>.xin>.body>.gnb{width:180px;position:relative;margin:1px 0 0 -213px;float:left;display:inline}
.x>.xin>.body.wide>.gnb{width:36px;margin:1px 0 0 -68px}
@media all and (max-width:980px){
.x>.xin>.body,
.x>.xin>.body.wide{padding:0}
.x>.xin>.body>.content{width:auto;padding:1px 10px 0 10px;float:none;margin:0 0 30px 0}
.x>.xin>.body>.gnb{float:none;width:auto;margin-right:0;left:0;border-radius:0;position:relative;top:auto;left:auto}
.x>.xin>.body>.gnb{float:none;display:block;width:auto;margin:0 !important;border-radius:0;position:relative;top:auto;left:auto}
.x>.xin>.body.wide>.gnb{width:auto}
}
/* Header */
@ -235,7 +232,9 @@ body>.x,
.x>.xin>.body>.gnb>ul>li{display:none}
.x>.xin>.body>.gnb.open>ul>li{display:block}
.x>.xin>.body>.gnb.open>ul>li[data-index="6"],
.x>.xin>.body>.gnb.open>ul>li[data-index="7"]{display:none}
.x>.xin>.body>.gnb.open>ul>li[data-index="7"],
.x>.xin>.body>.gnb>.ex>li[data-index="6"],
.x>.xin>.body>.gnb>.ex>li[data-index="7"]{display:none}
.x>.xin>.body>.gnb.open>.ex>li[data-index="6"],
.x>.xin>.body>.gnb.open>.ex>li[data-index="7"]{display:block}
.x>.xin>.body>.gnb>ul>li:first-child{display:block !important}
@ -246,8 +245,6 @@ body>.x,
.x>.xin>.body>.gnb>a[href="#gnbNav"]>b{display:none}
.x>.xin>.body>.gnb>a>i{display:block;position:absolute;top:50%;left:50%;margin:-7px 0 0 -7px}
}
/*@media all and (max-width:980px){
}*/
/* li */
.x>.xin>.body>.gnb>ul>li{background:#3886d0;border-top:1px solid #fff;border-bottom:1px solid #ddd;vertical-align:top;white-space:nowrap}
.x>.xin>.body>.gnb>ul>li.active{background:#222}
@ -269,14 +266,10 @@ body>.x,
.x>.xin>.body>.gnb>ul>li.active>a{font-weight:bold;color:#fff;text-shadow:none;background:#222;background:-webkit-gradient(linear,left top,left bottom,from(#555),to(#222));background:-moz-linear-gradient(top,#555,#222);background:-o-linear-gradient(top,#555,#222)}
/* li>a>span */
.x>.xin>.body.wide>.gnb>ul>li>a>.tx{display:inline-block;width:1px;height:1px;overflow:hidden}
.x>.xin>.body>.gnb>ul>li>a>.closeAll,
.x>.xin>.body.wide>.gnb>ul>li.open>a>.closeAll,
.x>.xin>.body>.gnb>ul>li.open>a>.openAll{display:none}
.x>.xin>.body>.gnb>ul>li.open>a>.closeAll{display:inline}
/* li>ul */
.x>.xin>.body>.gnb>ul>li>ul{display:none;margin:0 10px 10px 10px;border-radius:4px}
.x>.xin>.body>.gnb>ul>li.open>ul{display:block}
.x>.xin>.body.wide>.gnb>ul>li.open>ul{display:none}
.x>.xin>.body>.gnb>ul>li.active>ul{display:block!important}
.x>.xin>.body.wide>.gnb>ul>li>ul{display:none!important}
/* li>ul>li */
.x>.xin>.body>.gnb>ul>li>ul>li{border-top:1px solid #ddd;position:relative}
.x>.xin>.body>.gnb>ul>li>ul>li:first-child{border:0}