묻고답하기
XE1.7 버전의 공식레이아웃 GNB 메뉴 수정하려는데 도와주세요.
2013.09.27 14:37
우선 2차메뉴를 없애고 사용하고 있습니다.
메뉴에서 마우스 오버시 색상을 아무리 해봐도 변경이 안됩니다.
마우스 오버시 메뉴바 색상이랑 같게 만들려면 어디를 수정해야 되나요 ?
예: 논문 부분 마우스 오버되면 기타 메뉴의 배경처럼요 ...
레이아웃 HTML----------------------------------
<!-- GNB -->
<nav class="gnb" id="gnb">
<ul>
<li loop="$GNB->list=>$key1,$val1" class="active"|cond="$val1['selected']">
<a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a>
<ul cond="$val1['list']">
<li loop="$val1['list']=>$key2,$val2" class="active"|cond="$val2['selected']"><a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a></li>
</ul>
</li>
</ul>
</nav>
<!-- /GNB -->
레이아웃 CSS----------------------------------
/* GNB */
.gnb{position:relative;z-index:1;border:1px solid #ff628b;font-weight:bold;font-size:13px;height:31px;clear:both;background-color:#ff628b;background:-webkit-linear-gradient(top, #ff628b, #ff628b);background:-moz-linear-gradient(top, #ff628b, #ff628b);background:-o-linear-gradient(top, #ff628b, #ff628b);background:-ms-linear-gradient(top, #ff628b, #ff628b);background:linear-gradient(top, #ff628b, #ff628b);filter:none}
.gnb:before{content:"";display:block;background:#ff628b;width:100%;height:1px}
.gnb ul{margin:0;padding:0;list-style:none}
.gnb a{text-decoration:none;white-space:nowrap}
.gnb>ul{position:absolute;top:32px;left:-1px;right:-1px;background:#4A5160;opacity:.98;filter:alpha(opacity=98);height:0}
.gnb.open>ul{height:auto;border-bottom:1px solid #333}
.gnb>ul:after{content:"";display:block;clear:both}
.gnb>ul>li{position:relative;top:-32px;float:left;margin:0 -1px -8px 0}
.gnb>ul>li>a{display:block;border-left:0px solid #ff628b;border-right:0px solid #ff628b;line-height:32px;padding:0 20px;color:#fff;position:relative}
.gnb>ul>li>a:after{content:"";position:absolute;width:0px;height:100%;right:0;top:0;background:#ff628b;overflow:hidden}
.gnb>ul>li.hover>a,
.gnb>ul>li.active>a{border-top:1px solid #ea406d;line-height:30px;padding-bottom:1px;background-color:#ea406d;background:-webkit-linear-gradient(top, #ea406d, #ea406d);background:-moz-linear-gradient(top, #ea406d, #ea406d);background:-o-linear-gradient(top, #ea406d, #ea406d);background:-ms-linear-gradient(top, #ea406d, #ea406d);background:linear-gradient(top, #ea406d, #ea406d);filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#ea406d, endColorStr=#ea406d)}
.gnb ul ul{display:block;position:relative;z-index:2;padding:0 20px;margin:0 0 0 -1px;border-left:1px solid #;height:0;overflow:hidden}
.gnb.open ul ul{margin-top:6px}
.gnb ul ul:before{content:"";position:absolute;left:0;top:0;width:1px;height:100%;background:#}
.gnb.open ul ul{padding:10px 20px;height:auto}
.gnb>ul>li:first-child>ul{border:0}
.gnb>ul>li:first-child>ul:before{content:normal}
.gnb ul ul a{display:block;line-height:20px;font-size:12px;color:#fff}
.gnb ul ul a:hover,
.gnb ul ul a:focus{text-decoration:underline}
부탁드립니다.
-------------------------------------------------------------------------
아... 저의 설명이 잘못되엿나보네요. 메뉴에 마우스를 가져다 놓으면 색상이 변하죠 ? 그럼 마우스가 다른곳에 있으면 색상이 원래 색상으로 변경되게요...
댓글 1
-
마야^
2013.09.27 23:02
-
지앤스카이
2013.10.01 10:33
아... 저의 설명이 잘못되엿나보네요. 메뉴에 마우스를 가져다 놓으면 색상이 변하죠 ? 그럼 마우스가 다른곳에 있으면 색상이 원래 색상으로 변경되게요...
.gnb>ul>li.active>a{border-top:1px solid #ea406d;line-height:30px;padding-bottom:1px;background-color:#ea406d;background:-webkit-linear-gradient(top, #ea406d, #ea406d);background:-moz-linear-gradient(top, #ea406d, #ea406d);background:-o-linear-gradient(top, #ea406d, #ea406d);background:-ms-linear-gradient(top, #ea406d, #ea406d);background:linear-gradient(top, #ea406d, #ea406d);filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#ea406d, endColorStr=#ea406d)}
.gnb ul ul{display:block;position:relative;z-index:2;padding:0 20px;margin:0 0 0 -1px;border-left:1px solid #;height:0;overflow:hidden}
=============================================================================================
참고로요~~ 저렇게 복잡한 이유는 요~~~
메뉴바를 좀은 이쁘게? 꾸밀려고 gradient를 적용을 한 것인데요 각 브라우즈(사파리.크롬,오페라.IE6-9.IE10..)등 공히 다~~
적용이 되도록 할려고 했지만......그러나 두~ 색상을 똑 같은 색상으로 설정을 하면 별 의미가 없을 텐데.............??
일단은.....원본 백업~~ 해 놓으시고....
#ea406d ----------> #ff628b 로 변경해보세요.
만약에 안되면 다시 질문 주세요.
* 참고로 두 색상을 다른 색상으로 달리 변경해 보시면 입체감...등 다른 느낌이 나겠습니다.
(맨 위에 부분도 마찮가지로.......)