상단 메뉴 더보기 적용시키기

 텍큐닷컴 이사 후 열심히 스킨 고치기 작업을 진행했고, 진행중입니다. 이거 뭐 전문적으로 배워본적이 없어서, 혼자 이리 저리 뜯어고치기가 여간 힘듭니다. T.T

 제가 고쳐서 사용중인 스킨은 텍스트큐브에서 기본제공하는 단내양 제작해주신, 레드핑크 리본 스킨입니다.

암만 봐도 젤 이뻥~

 깔끔하게, 잘나오고 이쁜 스킨이죠?

 단내양님께서 열심히 제작해주신 이 스킨 원래 메뉴를 보시면,

 요렇게 3가지 메뉴와, 끝에 더보기 메뉴가 있습니다.

 친한친구들 중에서 제가 '내 블로그에좀 한번 들러봐봐!!' 해서 겨우 온 친구들이(컴맹) 거의 하는 소리가 야 블로그가 뭔데? 라는 놈들, 그리고 들러본 친구들중에서 "야 니 블로근가 뭔가? 가봤는데 뭐가 뭔지 보르겠다!! 메뉴가 어댔노? 글 하나 달랑 써있드만! 그게 뭐꼬?"

 하는것입니다...<친구를 잘 사귀어야 한다.;;흐흠..교훈>

 사실 블로그에 익숙하지 못한 사람들은 카테고리라는 것보다 큰 메뉴버튼을 먼저 찾는것 같습니다. 물론 저도 처음에 그랬구요.

 그래서 저는 상단 메뉴에 카테고리 메뉴를 올리고, 카테고리 하위메뉴들을 더보기에 적용 시켰습니다. 물론 더 쉽고, 더 화려한 방법은 많겠지만, 삽질 프로젝트로 성공한것 만으로 혼자 만족합니다. !!

 그럼 포스팅도 할겸, 혼자 스킨 삽질 프로젝트 공개 이어집니다.

일단 원래 메뉴는 skin.html 과 style.css 에 다음과 같이 되어있습니다.

 먼저 skin.html

<div id="menu"><div class="inner area">
    <div class="blogMenu">
      <ul>
        <li class="menuBlog"><a href="[##_blog_link_##]">블로그</a></li>
        <li class="menuProfile"><a href="[##_profile_link_##]">프로필</a></li>
        <li class="menuGuestbook"><a href="[##_guestbook_link_##]">방명록</a></li><li class="menuMore"><a href="#" onclick="toggle('moreMenu'); return false">더보기</a></li>                   
     </ul>
    </div>
<div id="moreMenu" class="moreMenuBox"  style="display: none;">
      <ul>
                <li class="menuNotice"><a href="[##_notice_link_##]">공지사항</a></li>
                <li class="menuTag"><a href="[##_taglog_link_##]">태그</a></li>
                <li class="menuLocation"><a href="[##_localog_link_##]">지역로그</a></li>
                <li class="menuMedia"><a href="[##_media_link_##]">미디어로그</a></li>
          </ul>
        </div>
       </div></div>

style.css

/* ***** Menu **************************************** */
#menu .inner                { position:relative;}
#menu .blogMenu                { letter-spacing:-0.1em;}
#menu .blogMenu li             { display:inline; padding-right:30px;}
#menu .blogMenu a            { color:#fff; text-decoration:none; font-weight:bold;}
#menu .blogMenu .menuMore a { font-weight:normal; background:url(images/bull_menu_more.gif) right 3px no-repeat; padding-right:13px;}
#menu .moreMenuBox            { position:absolute; left:187px; top:32px; background-color:#f33; padding:10px; z-index:10000;}
#menu .moreMenuBox a         { color:#fff;}
#menu .moreMenuBox ul         { list-style:none;}
#menu .moreMenuBox li        { list-style:none;}

 위에 것이 원본 스킨소스들입니다. 카테고리하위메뉴 더보기를 메뉴에 적용시킨 제 스킨 소스는 아래와 같습니다.

skin.html

<div id="menu"><div class="inner area">
    <div class="blogMenu">
      <ul>
        <li class="menuBlog"><a href="[##_blog_link_##]">블로그</a></li>
        <li class="menuProfile"><a href="[##_profile_link_##]">프로필</a></li>
        <li class="menuGuestbook"><a href="[##_guestbook_link_##]">방명록</a></li>
    <li class="menuMore"><a href="#" onclick="toggle('moreMenu1'); return false">깜군이</a></li>
    <li class="menuMore"><a href="#" onclick="toggle('moreMenu2'); return false">컴초보</a></li>
    <li class="menuMore"><a href="#" onclick="toggle('moreMenu3'); return false">다시보기</a></li>
    <li class="menuMore"><a href="#" onclick="toggle('moreMenu4'); return false">쉬크룸</a></li>
    <li class="menuMore"><a href="#" onclick="toggle('moreMenu'); return false">더보기</a></li>                   
     </ul>
    </div>
    <div id="moreMenu1" class="moreMenuBox1"  style="display: none;">
          <ul>
                <li class="kkamlife"><a href="http://www.kkamtube.co.cc/category/깜군이/일상다반사">일상다반사</a></li>
                <li class="kkamthink"><a href="http://www.kkamtube.co.cc/category/깜군이/깜군생각">깜군생각</a></li>
                <li class="kkampicture"><a href="http://www.kkamtube.co.cc/category/깜군이/깜군사진들">깜군사진들</a></li>
          </ul>
        </div>
       
        <div id="moreMenu2" class="moreMenuBox2"  style="display: none;">
          <ul>
                <li class="comtip1"><a href="http://www.kkamtube.co.cc/category/컴퓨터 초보탈출/윈도우 Tip">윈도우Tip</a></li>
               <li class="comtip2"><a href="http://www.kkamtube.co.cc/category/컴퓨터 초보탈출/프로그램 Tip">프로그램Tip</a></li>
               <li class="comtip3"><a href="http://www.kkamtube.co.cc/category/컴퓨터 초보탈출/인터넷 Tip">인터넷Tip</a></li>
               <li class="comtip4"><a href="http://www.kkamtube.co.cc/category/컴퓨터 초보탈출/블로그 Tip">블로그Tip</a></li>
           </ul>
        </div>
        <div id="moreMenu3" class="moreMenuBox3"  style="display: none;">
          <ul>
                <li class="review1"><a href="http://www.kkamtube.co.cc/category/다시보기/영화 다시보기">영화 다시보기</a></li>
                <li class="review2"><a href="http://www.kkamtube.co.cc/category/다시보기/TV 다시보기">TV 다시보기</a></li>
                <li class="review3"><a href="http://www.kkamtube.co.cc/category/다시보기/책 다시보기">책 다시보기</a></li>
          </ul>
        </div>
        <div id="moreMenu4" class="moreMenuBox4"  style="display: none;">
          <ul>
                <li class="chic1"><a href="http://www.kkamtube.co.cc/category/패션 쉬크룸/Top">Top</a></li>
                <li class="chic2"><a href="http://www.kkamtube.co.cc/category/패션 쉬크룸/Bottom">Bottom</a></li>
                <li class="chic3"><a href="http://www.kkamtube.co.cc/category/패션 쉬크룸/Dress">Dress</a></li>
                <li class="chic4"><a href="http://www.kkamtube.co.cc/category/패션 쉬크룸/Outwear">Outwear</a></li>
                <li class="chic5"><a href="http://www.kkamtube.co.cc/category/패션 쉬크룸/acc">acc</a></li>
          </ul>
        </div>

        <div id="moreMenu" class="moreMenuBox"  style="display: none;">
      <ul>
                <li class="menuNotice"><a href="[##_notice_link_##]">공지사항</a></li>
                <li class="menuTag"><a href="[##_taglog_link_##]">태그</a></li>
                <li class="menuLocation"><a href="[##_localog_link_##]">지역로그</a></li>
                <li class="menuMedia"><a href="[##_media_link_##]">미디어로그</a></li>
          </ul>
        </div>
      </div></div>

 skin.hrml에서 일단 카테고리 메뉴를 입력시키고 하위메뉴 더보기를 위한 소스는 이것입니다.

<li class="menuMore"><a href="#" onclick="toggle('moreMenu1'); return false">메뉴제목입력</a></li>

 위에소스에 대한 하위메뉴를 만드는 소스는 이것입니다.

<div id="moreMenu1" class="moreMenuBox1"  style="display: none;">
          <ul>
                <li class="kkamlife"><a href="http://www.kkamtube.co.cc/category/깜군이/일상다반사">일상다반사</a></li>
                <li class="kkamthink"><a href="http://www.kkamtube.co.cc/category/깜군이/깜군생각">깜군생각</a></li>
                <li class="kkampicture"><a href="http://www.kkamtube.co.cc/category/깜군이/깜군사진들">깜군사진들</a></li>
          </ul>
        </div>

 대충보시면 아시겠지만, moremenu에 숫자를 붙여서, 모두 다르게 표현했습니다. 저는 카테고리 메뉴가 모두 4개라서 4까지 붙였지만, 더있다면 5,6,7, 이렇게 숫자면 바꿔서 소스를 붙여주면 되겠습니다.

 syle.css

#menu .moreMenuBox            { position:absolute; left:522px; top:32px; background-color:#f33; padding:10px; z-index:10000;}
#menu .moreMenuBox a         { color:#fff;}
#menu .moreMenuBox ul         { list-style:none;}
#menu .moreMenuBox li        { list-style:none;}

#menu .moreMenuBox1            { position:absolute; left:187px; top:32px; background-color:#f33; padding:10px; z-index:10000;}
#menu .moreMenuBox1 a         { color:#fff;}
#menu .moreMenuBox1 ul         { list-style:none;}
#menu .moreMenuBox1 li        { list-style:none;}

#menu .moreMenuBox2            { position:absolute; left:267px; top:32px; background-color:#f33; padding:10px; z-index:10000;}
#menu .moreMenuBox2 a         { color:#fff;}
#menu .moreMenuBox2 ul         { list-style:none;}
#menu .moreMenuBox2 li        { list-style:none;}

#menu .moreMenuBox3            { position:absolute; left:347px; top:32px; background-color:#f33; padding:10px; z-index:10000;}
#menu .moreMenuBox3 a         { color:#fff;}
#menu .moreMenuBox3 ul         { list-style:none;}
#menu .moreMenuBox3 li        { list-style:none;}

#menu .moreMenuBox4            { position:absolute; left:447px; top:32px; background-color:#f33; padding:10px; z-index:10000;}
#menu .moreMenuBox4 a         { color:#fff;}
#menu .moreMenuBox4 ul         { list-style:none;}
#menu .moreMenuBox4 li        { list-style:none;}

style.css도 보시면 아시겠지만 moreMenuBox뒤에 숫자만 붙여서 변형했습니다. left187px는 메뉴를 클릭했을때 보여질 하위메뉴창의 위치입니다. 요것이 좀 노가다인데; 숫자를 일일이 바꿔가면서 미리보기로 테스트했습니다.T.T

 하지만 문제점은... 이 위치가 브라우저마다 좀 다릅니다. 파폭,크롬,오페라에서는 거의 딱 맞게.

요렇게 잘 포현되는데,

IE8, 사파리에서는

요렇게 비뚤거립니다.

 오늘 게임방에 갈일이 있어서 대중 브라우저 IE6에서 테스트 하였는데, 더보기 창이 구글 광고에 밑에 가려지는 오류까지 납니다. IE6을 버립시다.!! (IE = 인터넷 익스플로러)

 웬 삽질을 이렇게 하고있나? 하시는 분들은 마음으로 위로해주시고,

 도움이 되신 분들은 적용한번씩 해보세요!!