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