모바일 레이아웃을 하나 사용하고 있는데요 꼭 메뉴 텍스트를 터치해야 합니다.
이게 불편하더라고요
그냥 메뉴 전체 영역에 터치 해도 작동하게 할려면 어디를 손봐야 할까요?
흐미..
질문이 너무 무개념 같아서 죄송합니다.
모바일 레이아웃을 하나 사용하고 있는데요 꼭 메뉴 텍스트를 터치해야 합니다.
이게 불편하더라고요
그냥 메뉴 전체 영역에 터치 해도 작동하게 할려면 어디를 손봐야 할까요?
흐미..
질문이 너무 무개념 같아서 죄송합니다.
댓글 6
정보제공 해주지도 않고..
이곳의 공지정도는 읽고 질문합시다.
css를 공부해보셔야 할 것같네요.
아무 레이아웃이나 개발자도구로 해서 보시면 쉽게 확인해 보실 수 있습니다.
지금 말씀하신 형태를 하나의 예시로 들어보면
<li>
<a>메뉴텍스트</a>
</li>
이런구조입니다.
그런데 왜 메뉴텍스트를 터치해야만 a 태그가 동작을 할까요?
그건 li의 class에 padding 이 적용되어 있고 a 에는 padding이 없기 때문입니다.
잘못된 다른 메뉴 터치를 막기 위해 해당 메뉴를 정확히 구분해서 터치를 인식하기 위함이겠죠?
그런데 지금 반대로 원하신다면 전체영역을 터치될 확율이 높아질 수 있습니다.
방법은 li 쪽의 padding을 없애고 a 쪽에 paddig을 주면 텍스트주변 여백이 메뉴 구분하는 곳까지 확대됩니다.
감사합니다. style.css 에서 손봐야 하나요?
/* °øÅë CSS*/
body { padding:0px; margin:0px; line-height:normal; font-size:12px; color:#555; border:none; }
ul,ol,li,dl,dd,p { padding:0px; margin:0px; list-style:none; }
a { color:#555; text-decoration:none; }
img { border:0px; }
a {
text-decoration:none;
-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;
}
* {box-sizing:border-box;}
input, select {height:30px; line-height:30px;}
.bd_hd {padding:0;}
/* 이미지설정 */
.aside_navi .login_info_box .login_info > li > a > i,
.aside_navi .header_menu_box .header_menu > li > a > i,
.aside_navi .header_menu_box .right_menu > li > a > i {background-image:url('../images/sp_ico_2x.png'); background-size:320px 320px; background-repeat:no-repeat;}
/* 사이드메뉴 */
.mm-menu.mm-front {
z-index: 1;
box-shadow:none;
}
.mm-menu.mm-front.mm-opened {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}
.aside_navi {display:none; margin:0px; padding:0px;}
.aside_navi .login_info_box {position:relative; width:100%; height:40px; padding:0; background:#364277;}
.aside_navi .login_info_box .login_info > li {float:left; width:50%; text-align:center;}
.aside_navi .login_info_box .login_info > li > a {display:inline-block; width:100%; font-size:13px; line-height:40px; color:#fff;}
.aside_navi .login_info_box .login_info > li > a > i {display:inline-block; width:40px; height:40px; vertical-align:middle;}
.aside_navi .login_info_box .login_info > li > a.login i {background-position:0 -280px;}
.aside_navi .login_info_box .login_info > li > a.logout i {background-position:-40px -280px;}
.aside_navi .login_info_box .login_info > li > a.signup i {background-position:-80px -280px;}
.aside_navi .login_info_box .login_info > li > a.member i {background-position:-80px -280px;}
.aside_navi .header_menu_box {position:relative; left:0; padding:0 0 40px 0; width:100%; background:#fff;}
.aside_navi .header_menu_box .header_menu > li,
.aside_navi .header_menu_box .right_menu > li {width:100%; border-bottom:solid 1px #ddd;}
.aside_navi .header_menu_box .header_menu > li > a,
.aside_navi .header_menu_box .right_menu > li > a {width:100%; font-size:13px; line-height:39px;}
.aside_navi .header_menu_box .header_menu > li > a > i,
.aside_navi .header_menu_box .right_menu > li > a > i {display:inline-block; width:40px; height:40px; vertical-align:middle; background-position:-160px -280px;}
.aside_navi .header_menu_box .header_menu > li > a.menu_1 > i {background-position:-120px -280px;}
/* 헤더 */
.header_wrap {position:relative; width:100%;}
.header_wrap .header {position:relative; width:100%; height:40px; line-height:40px; text-align:center; background:#364277;}
.header_wrap .header .menu_btn {position:absolute; top:0; left:0; display:inline-block; width:40px; height:40px; line-height:36px;}
.header_wrap .header .menu_btn > i.css_bar {position:relative; display:inline-block; margin-top:11px; background:#fff;}
.header_wrap .header .menu_btn > i.css_bar,
.header_wrap .header .menu_btn > i.css_bar:before,
.header_wrap .header .menu_btn > i.css_bar:after {width:18px; height:3px;}
.header_wrap .header .menu_btn > i.css_bar:before,
.header_wrap .header .menu_btn > i.css_bar:after {position:absolute; top:50%; left:0; display:block; content:""; background: #fff;}
.header_wrap .header .menu_btn > i.css_bar:before {margin-top:-9px;}
.header_wrap .header .menu_btn > i.css_bar:after {margin-top:5px;}
.header_wrap .header .header_logo {position:relative; display:inline-block; padding:10px 0; font-size:18px; color:#fff; line-height:20px; font-weight:bold;}
.header_wrap .header .header_logo img {height:20px;}
이렇게 되어있습니다. 말씀대주신데로
a { color:#555; text-decoration:none; }
이부분에 padding:0을 넣어야 하나요? 이렇게 하니 왼쪽여백이 늘어나면서 메뉴영역 터치는 그대로 입니다..
layout.html 은 아래와 같습니다.
<ul class="header_menu">
{@ $count = 1 }
<!--@foreach($header_menu->list as $key => $val)-->
<!--@if($val['selected'])-->
{@ $header_menu_1st = $val}
<!--@end-->
<li class="list<!--@if($val['selected'])--> list_on<!--@end-->" cond="$val['href']">
<a class="link menu_{$count}" href="{$val['href']}" <!--@if($val['open_window']=="Y")--> target="_blank"<!--@end-->>
<i></i>{$val['text']}<!--// <span class="list2_icon" cond="$val['list']">▲</span> -->
</a>
</li>
<!--// 2차메뉴 -->
<li class="list list2<!--@if($val2['selected'])--> list_on<!--@end-->" loop="$val['list']=>$key2,$val2" cond="$val2['link']" style="padding-left: 15px;">
<a class="link" href="{$val2['href']}" <!--@if($val2['open_window']=="Y")--> target="_blank"<!--@end-->>{$val2['text']}</a>
</li>
{@ $count++ }
<!--@end-->
</ul>
</div>
</div>
목표는 a태그가 li안에 꽉차게 만드는 것입니다.
그렇게 하려면 해당 a태그에 display를 inline-block을 줍니다.
이렇게 하면 padding이나 width를 먹일수 있습니다.
li에 상하 여백이 있다면 그걸 제거하고 a태그에 먹입니다.
그리고 a태그의 width를 100%로 주는 거죠.
이건 예일 뿐입니다.
현재 상태를 볼수가 없어서요.