그누보드 메뉴 처럼 메뉴바에 회색 색상을 넣으려면 어떻하나요?
본문
그누보드 홈페이지 처럼 메뉴에 회색 색상을 넣고 십은데 수정 하는곳을 알려주세요.
메뉴를 누르면 다른 색상으로 반전 되는데 그 방법도 알려주시면 감사하겠습니다.
답변 1
메뉴 관련 부분에 대한 스타일은
css/default.css 파일에서 62번줄에 있는
/* 메인메뉴 */
#gnb {position:relative;margin:-1px 0 0;border-top:1px dotted #dde4e9;border-bottom:1px solid #dde4e9;background:#ecf0f7}
#gnb h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#gnb_1dul {margin:0 auto !important;padding:0;width:970px;zoom:1}
#gnb_1dul:after {display:block;visibility:hidden;clear:both;content:""}
.gnb_1dli {z-index:10;position:relative;float:left}
.gnb_1da {display:inline-block;padding:0 40px 0 10px;height:35px;background:url('../img/gnb_bg00.gif') center right no-repeat;font-weight:bold;line-height:2.95em;text-decoration:none}
.gnb_1da:focus, .gnb_1da:hover {background:url('../img/gnb_bg00.gif') #333 center right no-repeat;text-decoration:none}
.gnb_1dli_air .gnb_1da {background-color:#333;color:#fff}
.gnb_1dli_on .gnb_1da {background-color:#333;color:#fff}
.gnb_2dul {display:none;position:absolute;top:35px;width:180px}
.gnb_2da {display:block;padding:13px 10px;text-align:left;text-decoration:none}
.gnb_1dli_air .gnb_2da {background-color:#333;color:#fff}
.gnb_1dli_on .gnb_2da {background-color:#333;color:#fff}
.gnb_2da:focus, .gnb_2da:hover {background:#666;text-decoration:none}
.gnb_1dli_over .gnb_2dul {display:block;left:0;background:#fff}
.gnb_1dli_over2 .gnb_2dul {display:block;right:0;background:#fff}
에서 수정하실 수 있습니다.
1. 메뉴 배경 색상은 #gnb의 color:#ecf0f7 부분을 수정하시면 됩니다.
2. 클릭한 주메뉴 부분이 페이지 이동한 다음에 선택이 되도록 할려면 제이쿼리 이용해서 class값을 하나 생성해주고
그 클래스 일 경우에 대한 스타일을 정의하면 됩니다. sir의 경우는 gnb_on라는 class를 추가해 주고 있네요.
답변을 작성하시기 전에 로그인 해주세요.