마우스 롤오버 메뉴 완성!!

점점 희한하게 진화(;)해가는 포스트잇 스킨;;

그 삽질의 기록 ㄱ-


.
.
.
.
.

처음에, 제목을 클릭하면 내용이 나오게 하는 것은 다들 아시는 more/less 태그를 이용한 것이었습니다.

html 소스 중 메뉴 소스 부분을 보면

<h3 class="posttitle"><$mntitle$></h3>
<div class="content"><$mnbody$></div>

이렇게 되어 있는데 그걸

<h3 class="posttitle" onclick="this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none';"><$mntitle$></h3><DIV style='display:none'><div class="content"><$mnbody$></div></div>

이렇게 해 준 거죠.

처음엔 좋더군요.

하지만,

시간이 지날수록

마우스를 클릭해야 메뉴가 보이는게 귀찮아졌습니다. -,.-;;

마우스를 '대기만 해도' 메뉴가 쫙 보이면 얼마나 좋을까.

이글루스 메인 화면에 보면 <테마 전체보기>라는 메뉴 있잖아요. 그것도 마우스를 대면 내용이 주륵 나오거든요. 방법이 분명 있을텐데. 있을텐데. 있을텐데에에에~~~~~ ;ㅇ;ㅇ;ㅇ;


...그래서 뒤지기 시작.

일단 이글루스 메인 화면의 소스를 분석해보는 것부터 시작했습니다.
시작했는데... 봐봤자 알 수가 없더군요 orz
한가지 건진 거라곤 저 <onclick>비슷한 <onmouseover>와 <onmouseout>이라는 명령어가 있다는 것뿐.
(아니, 그게 어디냐. 제일 중요한 핵심인데.)

직관적인 이름으로 보건데 onclick이 마우스'클릭'이었으니 onmouseover와 out는 마우스'오버'/'아웃'이렷다.

그래서 onmouseover/out 관련글을 줄창 뒤지기 시작.

...뒤져도 잘 모르겠더이다 orz
대부분 뭔가 자바스크립트 프로그램에서 쓰이고 있는데, 자바스크립트 같은 거 알지도 못하거니와 이글루스에선 그거 못 쓰게 막아놓은 걸로 알고 있음 =ㅅ=;

결국 다시 more/less 태그로 돌아와서 끙끙댔습니다. 그래, 내가 의지할 거라곤 이미 이글루스에서 잘 돌아간다고 검증된 저 태그 뿐이로구나 ㅇ<-<

사실, 코드를 이해하는 것 자체는 어렵지 않았습니다. 직관적이잖아요.

onclick="this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none';

[ 이.다음 내용.의 디스플레이 스타일이 (이.다음 내용.의 디스플레이 스타일==안보이는 상태)이면 '보이게' / 아니면 '안 보이게 ]

일종의 if문.

그러니 onmouseover/out도 비슷하게 쓰면 되겠죠.

onmouseover=this.nextSibling.style.display='block' onmouseout=this.nextSibling.style.display='none'

마우스오버하면 이.다음 내용.이 '보이게' 마우스아웃하면 '안 보이게'

...문제는, 어디다 적용하느냐.

문제더군요.

일단, 제목에 적용했습니다. 제목에 마우스를 대면 본문이 보이고 떼면 감춰지게.
그랬더니 되긴 되는데, 마우스를 뗄 때 너무 빨리 감춰져버린다는 문제가 생겼습니다. orz
그러니까,

어쩌라고 orz

그래서 그 다음엔 태그를 제목과 내용 모두에 적용해봤죠. 노란 부분에 마우스가 있을 때에도 내용이 꺼지지 않도록.

<h3 class="posttitle" onmouseover=this.nextSibling.style.display='block'; onmouseout=this.nextSibling.style.display='none';><$mntitle$></h3><DIV style='display:none;' onmouseover=this.style.display='block'; onmouseout=this.style.display='none';><div class="content"><$mnbody$></div></div>

그런데,
그래도 꺼지더군요 orz

좌우지간 제목을 벗어나면 그 순간 노란 부분이 꺼져버리더라고요. 내용에 가기도 전에.

한참 마우스를 움직이다보니 어떤 전광석화같은 타이밍이 있어서 노란 부분이 미처 꺼지기 전에 마우스가 닿으면, 그 때는 제목과 멀리 떨어져도 노란 부분이 꺼지지 않았습니다.
하지만 그건 극히 드문 일이라는 게 문제.

으으으 orz

이를 어쩌나 이를 어쩌나.
다른 방법은 모르는데. 프로그램 같은 거 짤 줄도 모르고 이글루스에선 적용도 안된다니까.

한참을 끙끙대며 고민하는데....

갑자기 번쩍 든 생각.


"겹치게 해보자"


그러니까 저게, 내용 부분에 마우스가 가기 전에 제목을 벗어나 버리니까 꺼지는 거잖아요?
그럼 제목을 완전히 벗어나기 전에 노란 부분이 시작되게 하면 되는 거 아닌가. 일단 마우스가 노란 곳에 닿은 뒤에는 제목에서 벗어나도 안 꺼지니까.

즉각 제목과 내용을 살짝 겹치게 해봤습니다. 그랬더니 되더군요. 원하던 대로,

제목에 마우스를 대면 내용이 보이고 마우스를 움직이면 내용이 탐색되고
마우스를 떼면 내용이 감춰지는.


오오,

유레카!!! >ㅁ<

됐다 됐다~~~ 이제 됐다~~~~ (o^∇^o) (*▽) ＼(＾▽＾)／ (=´▽`=) (*´∇｀*) (*￣∇￣*) (**) (*''*)ふふっ♪ (*'-'*) ('-'*) (∇^*) ♪ (-*)♪ (*▽*) ☆(∇☆)(☆∇)☆ !!

겹치는 게 조금 아쉽긴 하지만(안 겹치는 게 더 예뻐서;;) 그래도 되는 게 어디냐. 헥헥헥;;;


그리하여,

처음 이 포스트잇 스킨을 구상할 때 바랐던 형태를 완성했습니다 >ㅁ<)/

원래 메뉴를 마우스 롤오버로 하고 싶었거든요. 할 줄 몰라서 클릭으로 했지.

그런데 찾아보니까 있네요 역시. 다 방법이 있다는! >_<


으하하하 완성이다~~~ >ㅁ<)/


※ 이 마우스 롤오버 메뉴 소스는 다른 스킨에도 적용할 수 있습니다. 다만 본문에 있다시피 제목과 내용을 살짝 겹치도록 css 소스를 조정해주는 게 필수.


※ 추가 : 겹치지 않아도 되는 방법을 알아냈습니다. 이, 이, 이런, 그게 다 삽질이었다니~~~~;;;;;;;;;

분홍메뉴와 노란본문을 적절히 겹치게 해야 했던 까닭은 익스6에서 마우스오버가 분홍상자가 아닌 상자 내 텍스트(제목 글씨)에 걸렸기 때문이었습니다. (파폭과 크롬은 분홍상자에 걸림)
분홍상자와 노란상자는 붙어있어도 제목 글씨와 노란색이 다소 떨어져있다 보니, 그 사이를 마우스로 이동할 때 노란상자가 꺼져버리는 것이었거든요.

그래서 별수없이 제목글씨랑 노란상자가 붙을 정도로 노란상자를 위로 끌어올려야 했습니다.


그런데, 알고보니 익스6에서도 마우스오버를 제목 글씨 말고 분홍상자에 걸 수 있었네요 orz

원래 소스, 그러니까 저 위에서 한참 삽질할 때의 소스에서는 분홍상자에 너비(width)를 따로 지정하지 않았습니다. 안 지정해도 잘 나왔거든요; 그래서 아무 생각이 없었는데.... 너비를 width : @@px라고 정확히 지정해주고나니 이제는
익스6에서도 마우스오버가 분홍상자에 걸리네요 orz

그래서 분홍상자에 width값을 지정해주고 노란상자와 붙여놓으니, 겹치지 않아도 롤오버/아웃 작동이 잘 됩니다 orz

사, 삽질이었다~~~~~ ;ㅁ;ㅁ;ㅁ;ㅁ;


...뭐, 뒤늦게라도 알아내서 다행인가 -_-;;;

근데 이게 익스7에서도 잘 보이는지 모르겠네요. 익스7을 지워버려서;; 파폭/크롬/익스6에서만 살펴봤는데...
익스7 사용자 분, 문제없이 잘 보이시나요? 잘 보인다고 함. 오케.