깔끔한 CSS 메뉴 - 2

■ 메뉴 미리보기

 기본상태 메뉴 모습과 마우스오버시 메뉴 모습입니다. 

■ 소스 사용법

heeyamenu3.txt

 = 전체적인 소스를 먼저 다운받으세요.

jquerycssmenu.css

jquerycssmenu.js

     

      

     

 = 위 css 와 js 소스 그리고 아래 4개의 이미지를 모두 다운받아야 합니다.

티스토리를 기준으로 설명하겠습니다.
( 그냥 웹계정에 올린다면, 모든 파일을 같은 폴더에 업로드하면 따로 주소를 적어줄 필요가 없습니다.)

---

드롭다운 메뉴를 사용해보면서 알게된건데......... css, js 소스를 먼저 업로드하고 이미지주소를 적으면
적용이 바로 안되더군요 -_-)

그래서 일단 이미지들 부터 티스토리에 먼저 업로드 해야합니다.
업로드 하는방법은 앞에 강좌에서 설명했습니다.

티스토리 파일업로드 방법과 주소알아내는 방법 =
    [■ 블로그꾸미기] - 사이드부분에 새로운 메뉴 추가하기   이곳을 참고하세요.

자 이제, jquerycssmenu.css 의 소스를 열어서 보시면 , 이미지 주소 부분이 있습니다.

두군데가 있네요. 메뉴바에 관한 이미지 인듯 합니다.
아까 티스토리에 올린 주소를 바로 저기에다가 고대로 넣어주시면 됩니다.

이젠 jquerycssmenu.js 파일의 소스를 열어주세요.

8번째 줄에 두 개가 같이 한줄에 있네요.
저곳에 이미지 주소를 넣어주시면 되겠습니다.

그럼 이제 새로 소스를 고친 jquerycssmenu.css 와 jquerycssmenu.js 을 티스토리에 업로드 해주세요.

이제 맨 첨에 받았던 heeyamenu3.txt 파일의 소스를 엽니다.

 
3번째와 12번 째 줄에 소스가 들어가 있네요.
빨간 밑줄쳐진 부분으로 업로드한 두개의 파일 주소를 넣어주세요.

---

그럼 이제 정말로 다 된겁니다 . ^^
소스 수정하는 부분이 다 소 복잡할 수 가 있지만, 이것만 잘 해놓으시면 다른 메뉴들은 문제없이 하실 수 있을거에요 ^^

여담 ) 티스토리에 아이프레임으로 완성 메뉴를 올렸더니 ......... 글씨가 다 깨져서 나오더군요 ........
    그래서 전 제 컴터만 그렇게 보이나 해서 다른곳에서 봤더니...... 무슨 스크립트 오류가 뜨고 -_- 난리도 아  니더군요 ㅠㅠ 그래서 그냥 이미지로 올립니다 -_-)
앞으론 편하게 링크로 걸어야 겠어요 ㅠㅠ