css 온클릭 드롭다운 메뉴를 오버시 드롭다운 메뉴로 수정하고 싶습니다. 채택완료
뒷집돌쇠
9년 전
조회 15,098
사용된 테마는 아리아나벤티님의 테마입니다.
http://theme.sir.kr/youngcart5/demo/kidstore">http://theme.sir.kr/youngcart5/demo/kidstore
테마에 사용된 상단 메뉴가 하위메뉴가 있을때 자동으로 ∨ 표시가 되면서 저 화살표를 클릭해야만
하위메뉴가 드롭다운되는 상태인데요.
화살표가 아닌 대분류명에 마우스를 오버했을때 하위메뉴가 드롭다운 될 수 있도록 바꾸고
싶습니다.
생각보다 소스가 복잡해보여서 ㅎㅎㅎ ㅠㅠ
이틀동안 헤매였음에도 해결점을 못찾고 있습니다.
우선 메뉴에 쓰여진 css 소스입니다.
</p><p>/*카테고리*/</p><p>.navbar-inverse, .navbar-inverse:hover{background:#dfdede !important;border:none !important;}</p><p>.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover{color:#990000;background:none !important;}</p><p>.navbar-inverse .navbar-toggle .icon-bar {background-color:#fff !important;width: 25px;height: 3px;border-radius: 1px;}</p><p>.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover{background:#618298 !important}</p><p>.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form{border:none !important}</p><p> </p><p>.navbar{margin-bottom:0 !important}</p><p>/*.navbar-header{margin-right:0 !important;margin-left:0 !important;}*/</p><p> </p><p>@media (min-width: 767px){</p><p> .nav>li {padding-right: 10px !important;}</p><p> .navbar-inverse .navbar-collapse{background:#dfdede !important;box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4);}</p><p> .navbar-inverse .navbar-nav>.active>a{border:none !important}</p><p> .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover{border:none !important}</p><p> #nav .navbar-header .shop_member_btn{color:#000;position:absolute;right:10px;top:10px;border:none;background:none;}</p><p> .cate_list .navbar-nav{margin:none !important}</p><p> .cate_list .ct_op{display:inline-block;text-indent:-9999px;background:url(../mobile/shop/img/cate_op.gif) no-repeat 10px 75% !important;height:35px; width:50px;position:absolute;top:0;right:0;border:none}</p><p> }</p><p> </p><p>@media (max-width: 767px){</p><p> #nav .navbar-header .shop_cart, #nav .navbar-header .shop_cart:hover {float:right;width:30px;background:url(../mobile/shop/img/shopping.png) no-repeat 50% 50% !important;}</p><p> #nav .navbar-header .shop_cart a{display:inline-block;text-indent:-9999px}</p><p> #nav .navbar-header .shop_member_btn{color:#000;margin:14px 10px 0 0;float:right !important;border:none;background:none;display:inline-block} /* 사람아이콘 컬러값 조정 */</p><p> .cate_list .navbar-nav{margin:0px -15px;}</p><p> .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover{border-bottom:1px solid #fff !important;}</p><p> <span class="Apple-tab-span" style="white-space:pre"> </span>overflow:hidden;</p><p> }</p><p> </p><p>/*#nav {position:fixed}*/</p><p>#nav .collapse.navbar-collapse{border:0;}</p><p>#nav .navbar-header{background:#56788e;}</p><p>#nav .navbar-header .navbar-toggle{float:left;margin-left:10px;border:none}</p><p>#nav .navbar-header .shop_cart, #nav .navbar-header .shop_cart:hover {float:right;background:url(../mobile/shop/img/shopping.png) no-repeat 50% 50% !important;}</p><p>#nav .navbar-header .shop_cart a{display:inline-block;text-indent:-9999px}</p><p>#nav .navbar-header .logo{display:inline-block;text-align:center;margin-top:10px;}</p><p>#nav .navbar-header .dropdown-menu{border-radius:0 !important;padding:0 !important;margin: -1px 0 0 !important;right:0 !important;left:auto !important;width:200px}</p><p> </p><p>.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover{color:#fff !important;border:none !important}</p><p>.cate_list li{background:#dfdede;}</p><p> </p><p><span style="font-size: 11pt; line-height: 1.5;">#sit_more{display:none}</span> </p><p> </p><p>.cate_list .sub_cate2>li a i{display: none;}</p><p> </p><p>@media (max-width:767px){</p><p> #logo{}</p><p> .cate_list{overflow-y:auto}</p><p> .cate_list ul>li{background:#fafafa;border-top:1px solid #f1f1f1;}</p><p> .cate_list .sub_cate2>li{border-bottom:none !important;background:#fafafa;padding:0 40px;border-top:1px solid #f1f1f1;} </p><p> .cate_list .sub_cate2>li a{background:#fafafa;color:lightslategrey}</p><p> .cate_list .sub_cate2>li a i{display: inline;margin-right:5px;}</p><p> .cate_list .ct_op{right: 10px;}</p><p><span style="font-size: 11pt; line-height: 1.5;"> }</span> </p><p> </p><p>.cate_list .ct_op{display:inline-block;text-indent:-9999px;background:url(../mobile/shop/img/cate_op.gif) no-repeat 10px 55% ;height:35px; width:30px;position:absolute;top:0;right:0;border:none}</p><p>.navbar-inverse .navbar-nav .open .dropdown-menu>li>a{background:#fff;color:#56788e !important;}</p><p>.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover{background:#fff !important;}</p><p>.navbar-nav .open .dropdown-menu .dropdown-header, .navbar-nav .open .dropdown-menu>li>a{padding:10px 15px 10px 20px !important}</p><p>.navbar-nav .open .drop-menu .drop-header, .navbar-nav .open .drop-menu>li>a{padding:10px 1px 10px 1px !important}</p><p> </p><p>.sub_cate{padding:0 !important}</p><p>.sub_cate2 li{padding:0px 25px;}</p><p>.sub_cate2 li a{line-height:40px;background:;display:block;text-decoration:none}</p><p>.sub_cate2 li a:hover{}</p><p>
이.. 일부가 아니네요.. 전부입니다. ㅎㅎ (기네요 ㅠㅠ)
그리고 category.php 에 해당 네비 드롭다운 부분 소스입니다.
</p><p><li class="active dropdown" style="margin-right:-20px;margin-left:-10px !important"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><a href="<?php echo $mshop_ca_href.$mshop_ca_row1['ca_id'];?>"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><div id="line1"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><ul></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li style="border:0"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><span id="a"><img src="<?php echo G5_THEME_URL;?>/mobile/shop/category/<?php echo $mshop_ca_row1['ca_id'];?>.png"></span><span id="b"><img src="<?php echo G5_THEME_URL;?>/mobile/shop/category/<?php echo $mshop_ca_row1['ca_id'];?>o.png"></span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></ul></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></div></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></font><span class="sl_bg"></span></a></p><p> <?php</p><p> $mshop_ca_res2 = sql_query(get_mshop_category($mshop_ca_row1['ca_id'], 4));</p><p> if(sql_num_rows($mshop_ca_res2))</p><p> echo '<button class="sub_ct_toggle ct_op dropdown-toggle" data-toggle="dropdown" style="margin-right:15px">'.get_text($mshop_ca_row1['ca_name']).' 하위분류 열기</button>'.PHP_EOL;</p><p> </p><p> for($j=0; $mshop_ca_row2=sql_fetch_array($mshop_ca_res2); $j++) {</p><p> if($j == 0)</p><p> echo '<ul class="sub_cate sub_cate1 dropdown-menu" role="menu">'.PHP_EOL;</p><p>
위 소스 아래로는 3단 메뉴부분까지 쏘스가 코딩되어 있는것 같습니다.
ca_id를 4자리가 아니 6자리까지 if문을 이용해 검사하도록 되어 있더군요.
하지만 저는 2단 메뉴까지만 필요한 상황이라 저기까지만 긁어왔습니다.
category.php 대분류메뉴 부분은 원본과 다릅니다. 이미지로 대체해놨습니다.
</span></p><p><span style="font-size: 14.6667px;"><span id="a"><img src="<?php echo G5_THEME_URL;?>/mobile/shop/category/<?php echo $mshop_ca_row1['ca_id'];?>.png"></span><span id="b"><img src="<?php echo G5_THEME_URL;?>/mobile/shop/category/<?php echo $mshop_ca_row1['ca_id'];?>o.png"></span></span><span style="font-size: 14.6667px;"> </span></p><p><span style="font-size: 14.6667px;">
그랬거나 저랬거나 결론은 다운화살표 부분을 클릭 후 드롭다운이 아닌
대메뉴 글자에 오버시 드롭다운이 되길 원합니다.
css에서 active 를 사용하지 않고 button 태그로 입력해놓으셔서 찾을수가 없네요.
해결책을 부탁드립니다. ㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
9년 전
.dropdown:hover ul { display: block !important; }
스타일을 추가해보세요
ㅜㅜ 스스로 찾으셨네요
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
뒷집돌쇠
9년 전
댓글을 작성하려면 로그인이 필요합니다.
9년 전
셀프 해결 ㄷㄷㄷ
</p><p>#nav .dropdown:hover .dropdown-menu{display: block;margin-top: 0;} </p><p>(구글링 ㄷㄷㄷㄷ)
이거 한줄 추가해서 해결했네요.
문제는 반응형이라 디스플레이 축소시에는 온클릭으로 바꿔야 한다는게 남았네요. ㅠ
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
진서기
9년 전
미디어쿼리 이용하시며 됩니다.
@media only screen and (min-width : 960px) {
.dropdown:hover ul {
display: block !important;
}
}
960px 이상에서면 hover menu 작동
@media only screen and (min-width : 960px) {
.dropdown:hover ul {
display: block !important;
}
}
960px 이상에서면 hover menu 작동
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
정말 고맙습니다. ^^