메뉴 수정을 하고 싶은데 제가 코딩에는 취약해서 질문드립니다.
메인메뉴 텍스트색이 기본 검정색에서 마우스 오버시 머스타드로 변하게
하고 싶은데, 아무리 수정하고 고쳐봐도 원하는대로 안됩니다...
기본 머스타드색, 오버시 머스타드색에서 변화가 없어요.
부탁드립니다.
index.html 의 메뉴소스
<li class="menu-item-simple-parent menu-item-depth-0 mustard" style="letter-spacing:1.5px"><a href="#"> <strong>학원소개</strong> </a>
<ul class="sub-menu">
<li><a href="<?php echo G5_URL; ?>/sindex1_1.html" target="_self">인사말</a></li>
<li><a href="<?php echo G5_URL; ?>/sindex1_2.html" target="_self">동기부여
</a></li>
<li><a href="<?php echo G5_URL; ?>/sindex1_3.html" target="_self">목표</a></li>
<li><a href="<?php echo G5_URL; ?>/sindex1_4.html" target="_self">공간안내</a></li>
<li><a href="<?php echo G5_URL; ?>/sindex1_5.html" target="_self">오시는길</a></li>
<li><a href="<?php echo G5_URL; ?>/sindex1_6.html" target="_self">자료방</a></li>
</ul>
<a class="dt-menu-expand"><strong>+</strong></a>
</li>css 관련소스
#main-menu > ul.menu > li.mustard> a{border-color:#f7921d;}
#main-menu > ul.menu > li.current_page_item.mustard> a, #main-menu > ul.menu > li.mustard > a:hover{color:#f7921d;}==========================================================
대충 이렇습니다.
위 css를 제가 아는대로 아무리 수정해봐도 적용이 안됩니다.
도움 부탁드립니다ㅠㅠ
답변 4개 / 댓글 2개
css를 변경하시려면
위에 존재하는 태그, id, class 명으로 접근해야 합니다
#main-menu > ul.menu > li.mustard> a{border-color:#f7921d;} #main-menu > ul.menu > li.current_page_item.mustard> a, #main-menu > ul.menu > li.mustard > a:hover{color:#f7921d;}
이 코드로는 매칭되는게 없다고 말씀드리고
알려드리려고 설명한거구요
<div class="dt-menu-toggle" id="dt-menu-toggle">카테고리<span class="dt-menu-toggle-icon"></span></div>
<ul id="menu-main-menu" class="menu">
<li class="menu-item-simple-parent menu-item-depth-0 mustard" style="letter-spacing:1.5px"><a href="#"> <strong>학원소개</strong> </a> <ul class="sub-menu"> <li><a href="<?php echo G5_URL; ?>/sindex1_1.html" target="_self">인사말</a></li> <li><a href="<?php echo G5_URL; ?>/sindex1_2.html" target="_self">동기부여 </a></li> <li><a href="<?php echo G5_URL; ?>/sindex1_3.html" target="_self">목표</a></li> <li><a href="<?php echo G5_URL; ?>/sindex1_4.html" target="_self">공간안내</a></li> <li><a href="<?php echo G5_URL; ?>/sindex1_5.html" target="_self">오시는길</a></li> <li><a href="<?php echo G5_URL; ?>/sindex1_6.html" target="_self">자료방</a></li> </ul> <a class="dt-menu-expand"><strong>+</strong></a> </li>와 같이 존재하는 상황에서는
css를
#main-menu > ul.menu > li.mustard> a{border-color:#f7921d;}
이거를 한개만 변경해보면
ul.menu li.mustard a{border-color:#f7921d; border:1px solid #f7921d;}
ul.menu > li.current_page_item.mustard > a,
ul.menu > li.mustard > a:hover {color:#f7921d;}로 한번 변경해보시면
테두리 컬러와 마우스오버가 변경될겁니다.
current_page_item 속성은 PHP에서 부여하시는거 같은데 그건 알아서 정리하세요
답변에 대한 댓글 1개
소스를 정확히 봐야겠지만 .mustard는 작성자님이 임의로 부여한것 같은데 굳이 넣지마시고, li.current_page_item a가 페이지 위치를 나타내는 클래스명 같으니 활성화를 위한 색상코드에 color:mustard를 넣어 주시면 될것 같습니다.
#main-menu > ul.menu > li> a{color:black;border-color:#f7921d;}
#main-menu > ul.menu > li> a:hover{color:mustard}
#main-menu > ul.menu > li.current_page_item a{color:mustard}로 해보세요
근데 #main-menu로 시작하는 id명이 존재하나요?
소스에선 확인이 안되니 정확한 id명을 넣었는지도 확인을 해보세요.
참고로 작업 다하시고 적용이 안되면 /extend/version.extend.php 에서G5_CSS_VER 의 버젼 정보를 올려야 반영됩니다.
캐시로 적용이 안될수도 있습니다.
위의 코드만으로는 매칭되는게 없다고 봐야할것 같네요
css 의
#main-menu
는
태그에서 id="main_menu" 로 존재해야 하는데 안보이구요
#main-menu > ul.menu > li.mustard> a
는
< ... id="main-menu" >
<ul class="menu">
<li class="mustard">
<a href="...">
를 접근할때 사용하는 css 이구요
또
#main-menu > ul.menu > li.current_page_item.mustard> a, #main-menu > ul.menu > li.mustard > a:hover{color:#f7921d;}
에서도 마찬가지로
< ... id="main-menu">
<ul class="menu">
<li class="current_page_item mustard">
<a href=".....".>
와
< ... id="main-menu" >
<ul class="menu">
<li class="mustard">
<a href="...">
를 접근해야하는데
위에서는 찾아볼수가 없네요
서로 맞게 맞추시던지
css를 맞게 변경하시던지 해야 합니다.
답변에 대한 댓글 1개
소스 위에
<div class="dt-menu-toggle" id="dt-menu-toggle">카테고리<span class="dt-menu-toggle-icon"></span></div>
<ul id="menu-main-menu" class="menu">
전체 감싸는 코드가 있습니다만 붙여넣기 할때 생략했네요.
죄송합니다...
이정도 코드로 알 수 있을까요?
답변을 작성하려면 로그인이 필요합니다.
해결은 안됐지만 친절하신 설명 정말 감사드립니다.
좋은하루 되시고 감기조심 하세요!