북클럽 스킨 - 메뉴 확장

적용 방법

상단 메뉴를 꼭 확장해서 써야 한다면.... (보여줄 페이지가 많다거나 해서...?)

 

요롷게 펼침으로?!

 

메뉴들을 수동으로 관리할지언정 난 이렇게 펼치는 메뉴가 필요해!

그렇다면.. 간단히 가능한 방법이 있어 올립니다.

 

적용 방법

관리 > 스킨 편집 > html 편집에서 아래 3줄을 찾아서 (샾은 #으로...ㅋ) ...

 

<nav id="gnb">
[샾샾_blog_menu_샾샾]
</nav> 

아래 내용으로 덮어 버리시면 가능합니다.

<style>
​​#gnb li div {
​​​​/* 서브메뉴 상자 */
​​​​display: none;
​​​​position: absolute;
​​​​z-index: 21;
​​​​background: white;
​​​​padding: 5px 10px;
​​​​border: 1px solid #ddd;
​​​​text-align: left;
​​​​box-shadow: 8px 8px 8px 0px rgba(0,0,0,0.3);
​​​​/* 그림자 싫으시면 윗줄 삭제 */
​​}
​​#gnb li div a {
​​​​/* 서브메뉴 링크 */
​​​​font-size: 0.875em;
​​​​padding: 8px;
​​}
​​#gnb li div a:hover:after {
​​​​/* 서브메뉴 링크에 마우스 올릴 때 밑줄가길 원한다면 2px 정도로! */
​​​​height: 0px !important;
​​}
​​#gnb li:hover div {
​​​​display: block;
​​}
​​#gnb li:hover > a {
​​​​/* 서브메뉴 보일 때 메인메뉴 색상 */
​​​​color: #333;
​​}
​​#gnb li:hover > a::after {
​​​​/* 서브메뉴 보일 때 메인메뉴 밑줄 */
​​​​content: "";
​​​​position: absolute;
​​​​bottom: 0;
​​​​left: 0;
​​​​width: 100%;
​​​​height: 4px;
​​​​background-color: #333;
​​}
</style>
<nav id="gnb">
​​<ul>
​​​​<li class="t_menu_home first">
​​​​​​<a href="/">홈</a> <!-- 메인 메뉴 -->
​​​​​​<!-- 서브 메뉴 시작 -->
​​​​​​<div>
​​​​​​​​<a href="/">서브메뉴 1</a>
​​​​​​​​<a href="/">서브메뉴 222222</a>
​​​​​​​​<a href="/">서브메뉴 3</a>
​​​​​​</div>
​​​​​​<!-- 서브 메뉴 끝 -->
​​​​</li>
​​​​<li class="t_menu_tag">
​​​​​​<a href="/tag">태그</a>
​​​​​​<div>
​​​​​​​​<a href="/">섭섭이 메뉴 1</a>
​​​​​​​​<a href="/">섭섭이 메뉴 2</a>
​​​​​​</div>
​​​​</li>
​​​​<li>
​​​​​​<a href="/tag2">태그2</a>
​​​​​​<div>
​​​​​​​​<a href="/">섭섭이 1</a>
​​​​​​​​<a href="/">섭섭이 2</a>
​​​​​​</div>
​​​​</li>
​​​​<li class="t_menu_guestbook">
​​​​​​<a href="/guestbook">방명록</a>
​​​​</li>
​​​​<li class="t_menu_page last">
​​​​​​<a href="/pages/purejs">jQuery 버리기</a>
​​​​</li>
​​</ul>
</nav>
<!--
<nav id="gnb">
	[샾샾_blog_menu_샾샾]
</nav> 
-->

자~ 이제부터 상단 메뉴는 수동 관리 체제에 돌입합니다. ㅋ

 

메인 메뉴 구성하실 때 참고할 부분은..

<li class="t_menu_page last"> 이렇게 첫 메뉴과 끝 메뉴에는 클래스명에 first / last 를 넣어주세요

 

서브 메뉴는 <div><a> ... </a></div> 로 넣어주시면 됩니다.

 

위 코드는 예시일뿐이니 구조만 참고하셔서 각자 메인 메뉴와 서브 메뉴들의 주소 및 메뉴명을 알맞게 잘 구성해서 쓰세요.

 

물론, 각종 색상이나 그림자, 테두리 등등 스타일에서 살살 조정하시면 됩니다.

 

어차피 html 수정하고 스타일 먹이는거라... 더 장황하게 접근할 수도 있겠지만...

가볍고 간단하게!!! 가 좋을 것 같습니다. ^^

 

그리고 다른 스킨들도 스타일은 좀 다르게 만져줘야 하겠지만 비슷한 방식으로 가능할테니 ...

필요하시면 도전!