메뉴 css질문여...
본문
상단 메뉴를 다음과 같이 하였습니다.
<div id="gnb" >
<ul>
<!--상단 로고를 좌측으로 출력-->
<div style="float:left; vertical-align:middle">
<a href="http://rgm01.cafe24.com/shop/">
<img src="http://rgm01.cafe24.com/data/common/mobile_logo_img" width="100%" alt="RGM - ED generic 메인">
</a></div>
<!--상단 로고를 좌측으로 출력 끝-->
<li class="gnb_1dli" style="z-index:999">
<a href="http://rgm01.cafe24.com/shop/list.php?ca_id=kr10" class="gnb_1da">
1번메뉴</a>
</li>
<li class="gnb_1dli" style="z-index:998">
<a href="http://rgm01.cafe24.com/shop/list.php?ca_id=kr20" class="gnb_1da">
2번메뉴</a>
</li>
<li class="gnb_1dli" style="z-index:997">
<a href="http://rgm01.cafe24.com/shop/list.php?ca_id=kr30" class="gnb_1da">
3번메뉴</a>
</li>
<li class="gnb_1dli" style="z-index:996">
<a href="http://rgm01.cafe24.com/shop/list.php?ca_id=kr40" class="gnb_1da">
4번메뉴</a>
</li>
<li class="gnb_1dli" style="z-index:995">
<a href="http://rgm01.cafe24.com/shop/list.php?ca_id=kr50" class="gnb_1da">
5번메뉴</a>
</li>
<li class="gnb_1dli" style="z-index:994"><a href="/bbs/board.php?bo_table=feedback">
6번메뉴</a></li>
</ul>
</div>
위와 같이 하였을때 컴퓨터 브라우져로 보면 잘나오는데...
핸드폰으로 볼때 로고 밑으로 1번메뉴~6번메뉴가 나오게 할순없나요??
현재는 핸드폰으로 메뉴옆에 로고가 떠요..ㅜㅜ
답변 2
왼쪽이 모바일이구 오른쪽이 pc인데 모바일에서는 RGM글자 아래에 메뉴가 뜨게 하고싶다는 말씀이신건가요?
이게 맞는지 모르겠지만;;media query를 활용해서 수정하시면 될 것 같아요. 아래는 예시 입니다.
/*추가*/
.gnb_logo_wrapper{
float:left;
vertical-align:middle;
}
/*767픽셀까지는 float none 적용*/
@media (max-width:767px){
.gnb_logo_wrapper{
float:none
}
}
<div class='gnb_logo_wrapper'><!--기존 style삭제하고 class로 대체-->
<a href="http://rgm01.cafe24.com/shop/">
<img src="http://rgm01.cafe24.com/data/common/mobile_logo_img" width="100%" alt="RGM - ED generic 메인">
</a></div>
네 맞습니자
소스 첨부해서 수정했는데 한번 넣어서 확인해보세요~
감사합니다...^^
해결될꺼같아요...^^
css 적힌 부분도 같이 올려주실 수 있나요? 지금 상태로 봐서는 "로고 메뉴" 이 순서로 뜨는거 같은데;;
css
/* gnb */
#gnb{border-bottom:1px solid #d8d8d8;border-top:1px solid #eee; background:#f3d857;}
#gnb li{display:inline-block;}
#gnb li a{line-height:60px;font-size:12px;padding:0 ;display:block;font-weight:bold;transition: all 0.2s;letter-spacing:1px;vertical-align:top}
#gnb li a:hover{background:#f3f3f3}
#gnb ul{border:0;vertical-align:top}
#gnb ul:after {display:block;visibility:hidden;clear:both;content:""}
.gnb_1da {font-weight:bold;text-decoration:none; font-family:"나눔고딕"; font-size:16px; color:#214f28;}
.gnb_1dli_on .gnb_1da {background:url('../shop/img/gnb_bg01.gif') #626870 center right no-repeat;color:#fff;text-decoration:none}
제가 css잘몰라 검색어에서 class값만 올렸습니다. ^^;;;
