질문/조언질답게시판

모바일 레이아웃을 하나 사용하고 있는데요 꼭 메뉴 텍스트를 터치해야 합니다.

이게 불편하더라고요

 

그냥 메뉴 전체 영역에 터치 해도 작동하게 할려면 어디를 손봐야 할까요?

 

흐미..

 

질문이 너무 무개념 같아서 죄송합니다.

  • profile
    모르겟어요...

    정보제공 해주지도 않고..

    이곳의 공지정도는 읽고 질문합시다.
  • profile ?
    죄송요 너무 몰라서 질문을 난해하게 했습니다.
  • profile

    css를 공부해보셔야 할 것같네요.

    아무 레이아웃이나 개발자도구로 해서 보시면 쉽게 확인해 보실 수 있습니다.

    지금 말씀하신 형태를 하나의 예시로 들어보면

    <li>
    <a>메뉴텍스트</a>
    </li>

    이런구조입니다.

    그런데 왜 메뉴텍스트를 터치해야만 a 태그가 동작을 할까요?

    그건 li의 class에 padding 이 적용되어 있고 a 에는 padding이 없기 때문입니다.

    잘못된 다른 메뉴 터치를 막기 위해 해당 메뉴를 정확히 구분해서 터치를 인식하기 위함이겠죠?


    그런데 지금 반대로 원하신다면 전체영역을 터치될 확율이 높아질 수 있습니다.

    방법은 li 쪽의 padding을 없애고 a 쪽에 paddig을 주면 텍스트주변 여백이 메뉴 구분하는 곳까지 확대됩니다.

  • ?

    감사합니다. style.css 에서 손봐야 하나요?

     

    @charset "utf-8";
    /* °øÅë 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 은 아래와 같습니다.

     

      <div class="header_menu_box" cond="$header_menu->list">
          <ul class="header_menu">
          {@ $count = 1 }
          <[email protected]($header_menu->list as $key => $val)-->
            <[email protected]($val['selected'])-->
              {@ $header_menu_1st = $val}
            <[email protected]>
            <li class="list<[email protected]($val['selected'])--> list_on<[email protected]>" cond="$val['href']">
              <a class="link menu_{$count}" href="{$val['href']}" <[email protected]($val['open_window']=="Y")--> target="_blank"<[email protected]>>
               <i></i>{$val['text']}<!--// <span class="list2_icon" cond="$val['list']">▲</span> -->
              </a>
            </li>
            <!--// 2차메뉴 -->
            <li class="list list2<[email protected]($val2['selected'])--> list_on<[email protected]>" loop="$val['list']=>$key2,$val2" cond="$val2['link']" style="padding-left: 15px;">
              <a class="link" href="{$val2['href']}" <[email protected]($val2['open_window']=="Y")--> target="_blank"<[email protected]>>{$val2['text']}</a>
            </li>
          {@ $count++ }
          <[email protected]>
          </ul>
        </div>
      </div>

     

  • profile
    현재 어떻게 만들어져 있느냐에 따라서 css를 수정할 방법이 달라집니다.

    목표는 a태그가 li안에 꽉차게 만드는 것입니다.
    그렇게 하려면 해당 a태그에 display를 inline-block을 줍니다.
    이렇게 하면 padding이나 width를 먹일수 있습니다.
    li에 상하 여백이 있다면 그걸 제거하고 a태그에 먹입니다.
    그리고 a태그의 width를 100%로 주는 거죠.

    이건 예일 뿐입니다.
    현재 상태를 볼수가 없어서요.
  • profile ?
    늦은밤 댓글 감사합니다