상단 네비게이션 메뉴 컴팩트화 CSS 공개
코덕질/만든것들 2010/02/22 20:10
평화님의 요청으로 별도 포스팅하지만 ... 사실 별 거 없어요 -_-... 단지 자바스크립트를 쓰지 않고 CSS만으로 간단하게 구현이 가능하다는 장점이 있습니다. 하지만 IE6에서는 작동하지 않고 마우스를 올려도 메뉴가 숨김 상태로 있게 되며, 이 경우에는 popeye님의 스크립트를 쓰시기를 권장합니다. 또한, 이 팁은 Textcube.com에서만 적용됩니다.
원리는, #tt-GNB에 마우스를 hover시 내부 content들의 속성을 조정하는 것으로서 간단하게 끝납니다.
style.css에 다음 내용을 추가해 주세요.
이렇게 마우스를 올리기 전에는 오른쪽 상단 부분에 간단한 닉네임과 썸네일만 뜨고, 마우스를 올리면 전체 메뉴가 보이게 됩니다.
또, 창의 스크롤을 내려도 이 로그인 메뉴가 그대로 그 위치에 있도록 할 수 있는데, 그렇게 하려면 위의 CSS에다 이 속성을 추가해 주시면 됩니다 -
또, 상단 부분에 마우스를 올리지 않았을 때 메뉴 전체를 숨기시려면 이 CSS를 이용해주세요 -
위 사항들을 숙지하시면 쉽고 간편하게 네비게이션 메뉴를 조작하실 수 있습니다 :)
CSS 수정은 여러분의 몫이에요~ 어렵지 않으니 도전해보세요! 물론 혹시 모를 상황에 대비하여 백업 정도는 해두기를 권고하는 바입니다.
원리는, #tt-GNB에 마우스를 hover시 내부 content들의 속성을 조정하는 것으로서 간단하게 끝납니다.
style.css에 다음 내용을 추가해 주세요.
#tt-GNB .tt-GNB-home { display:none !important; }
#tt-GNB .user form,
#tt-GNB .tt-GNB-LINK-WRITE,
#tt-GNB .tt-GNB-LINK-BLOG,
#tt-GNB .tt-GNB-LINK-OWNER,
#tt-GNB li.home { display:none !important; }
#tt-GNB:hover .user form,
#tt-GNB:hover .tt-GNB-LINK-WRITE,
#tt-GNB:hover .tt-GNB-LINK-BLOG,
#tt-GNB:hover .tt-GNB-LINK-OWNER,
#tt-GNB:hover li.home { display:inline !important; }
#tt-GNB .user form,
#tt-GNB .tt-GNB-LINK-WRITE,
#tt-GNB .tt-GNB-LINK-BLOG,
#tt-GNB .tt-GNB-LINK-OWNER,
#tt-GNB li.home { display:none !important; }
#tt-GNB:hover .user form,
#tt-GNB:hover .tt-GNB-LINK-WRITE,
#tt-GNB:hover .tt-GNB-LINK-BLOG,
#tt-GNB:hover .tt-GNB-LINK-OWNER,
#tt-GNB:hover li.home { display:inline !important; }
또, 창의 스크롤을 내려도 이 로그인 메뉴가 그대로 그 위치에 있도록 할 수 있는데, 그렇게 하려면 위의 CSS에다 이 속성을 추가해 주시면 됩니다 -
#tt-GNB { position:fixed; }
또, 상단 부분에 마우스를 올리지 않았을 때 메뉴 전체를 숨기시려면 이 CSS를 이용해주세요 -
#tt-GNB { height:32px; }
#tt-GNB .tt-GNB-visitor,
#tt-GNB .tt-GNB-owner,
#tt-GNB .tt-GNB-guest { display:none !important; }
#tt-GNB:hover .tt-GNB-visitor,
#tt-GNB:hover .tt-GNB-owner,
#tt-GNB:hover .tt-GNB-guest { display:block !important; }
#tt-GNB .tt-GNB-visitor,
#tt-GNB .tt-GNB-owner,
#tt-GNB .tt-GNB-guest { display:none !important; }
#tt-GNB:hover .tt-GNB-visitor,
#tt-GNB:hover .tt-GNB-owner,
#tt-GNB:hover .tt-GNB-guest { display:block !important; }
위 사항들을 숙지하시면 쉽고 간편하게 네비게이션 메뉴를 조작하실 수 있습니다 :)
CSS 수정은 여러분의 몫이에요~ 어렵지 않으니 도전해보세요! 물론 혹시 모를 상황에 대비하여 백업 정도는 해두기를 권고하는 바입니다.
추가 팁
댓글을 달아 주세요
예전에 브레턴님의 블로그에서 이 팁을 보고 깜짝 놀랐었어요. 이제는 쿠나님이 또 놀라게 하는군요.^^ 늘 좋은 팁을 제공해 주시는 쿠나님, 좋은 밤 되세요.
항상 수고가 많으십니다~
좋은 팁이네요.. 저는 popeye님한테 물어서 아예 안보이게 했는데..
오히려 이렇게 보이는것도 좋을 것 같아요.. 바로 체인지!
저에겐 어려운 말들이군요 제목자체의 의미를 모르겠다는......
별거 아니라 그래도 정말 대단한 팁입니다+_+
좋군요... 근데 적용이 귀찮군요!!!!! 메서슈미트님 블로그의 댓글 중에서 학종님의 댓글이었나? 그걸 읽어보고 빵 터졌습니다 후하하하핫
예전부터 궁금한게 있었는데
!important 가 뭘 의미하느건가요
앗핫. 감사합니다.
곧바로 적용했어요 !.
읰ㅋ 저는 하나도 모르겠내요
수고하셧어요
수코하셧어용~ㅇㅅㅇ