이번 글에서 만들게 될 메뉴바입니다. 이곳 을 클릭하면 테스트 블로그로 이동합니다. 메뉴에 마우스 오버하면 서브 메뉴가 애니메이션 되면서 나옵니다. 구글 광고에 가려지는 드랍다운 메뉴는 금지이므로 메뉴를 위로 나오게 하는 방법도 있습니다.
웹사이트에서 메뉴의 배치를 주로 헤더영역에 하는 것은 검색엔진이 내 웹사이트를 검색할때 최우선 접하는 곳이기 때문입니다. 대부분의 블로그는 카테고리라고 하여 메뉴역할을 하는데 사이드바에 배치합니다. 내 글에서 중요한 부분은 헤더영역에 메뉴를 두는 것이 검색엔진 최적화(SEO; Search Engine Optimization)에 도움이 됩니다. 메뉴는 웹사이트에서 아주 중요한 역할을 합니다. 방문자가 사이트를 방문하면 가장 먼저 찾는 것이 메뉴입니다. 그래서 웹디자이너들은 메뉴를 아주 다양하고 멋지게 만들려고 합니다. 예전에는 플래시로 애니메이션해서 흥미로운 메뉴바를 만들었지만 지금은 CSS나 제이쿼리를 이용해서 재밋고 멋진 메뉴바를 만듭니다. 제이쿼리로 메뉴를 직접만들려면 제이쿼리에 관한 해박한 지식이 필요합니다. CSS에 관한 글이 어느 정도 끝나게 되면 제이쿼리에 관해서도 기초부터 포스팅할 예정입니다. 그전에 무료이면서 아주 많은 제이쿼리 플러그인을 사용해 보는 것도 좋은 일이죠.
이전 글에서 간단한 제이쿼리 플러그인을 메뉴에 첨부하여 애니메이션 되는 메뉴를 만들어보았습니다. 이번 글에서는 본래 유료 제이쿼리 플러그인이지만 크레딧을 달면 무료로 사용할 수 있는 메뉴용 제이쿼리 플러그인을 설치해 보겠습니다.
이곳 을 클릭하면 제이쿼리 플러그인에 관한 제 포스팅으로 이동하니 참고하세요. 그곳에서 해당 사이트로 가서 원하는 디자인을 선택합니다.
아주 다양한 메뉴가 있습니다. 주로 수평바가 많고 수직형은 하나 있습니다. 지금 수정하고 있는 스킨은 회색계열이므로 디자인 선택을 잘해야 잘 어울리게 됩니다. 위 이미지에서 우측상단의 것을 클릭해서 다운받는 페이지로 이동합니다. 파일을 다운받아 압축을 풀고 폴더로 들어가서 html 파일을 클릭하면 웹브라우저에서 데모용 메뉴를 볼 수 있습니다.
메뉴에 마우스 오버하면 서브메뉴가 나옵니다. 서브 메뉴가 있는 곳은 화살표가 표시됩니다. 블로그의 글을 카테고리 분류를 하고 이러한 메뉴를 사용하는 것이 좋습니다. 위와같은 메뉴를 드랍다운(Drop-down) 메뉴라고 하는데 서브메뉴가 아래로 내려오기 때문입니다. 메뉴바 아래에 구글 광고가 있을 경우 구글 애드센스 광고 배치 규칙에 어긋나므로 위 드랍다운 메뉴를 드랍업(Drop-up) 메뉴로 수정하는 방법도 알아봅니다.
1. html과 CSS의 수정
html 파일을 텍스트 에디터에 열면 위와 같이 나옵니다. 1은 CSS파일 링크인데 내용이 많기 때문에 블로그에서도 링크하여 사용합니다. 2는 제이쿼리 라이브러리로 구글의 제이쿼리 라이브러리를 사용하므로 필요없습니다. 3은 제이쿼리 플러그인으로 파일을 수정하고 블로그에 업로드하여 링크합니다. 4부분은 데모용 간단 CSS인데 사용할 부분은 5부분입니다. 이것과 하단의 링크 코드를 첨부하지 않으면 좌측 상단에 메시지가 나옵니다. footer의 크레딧에 삽입하면 됩니다.
1의 id와 class이름을 수정해줍니다. 이전 글에서 blogMenu라는 이름을 사용했으니 CSS의 중복을 피하기 위해서 blogMenu2라고 입력합니다. html에서는 두곳만 수정하면 됩니다. 2는 주소가 입력될 자리입니다. 3의 parent 클래스 선택자는 서브 메뉴가 있을 경우 메뉴 옆에 화살표 나타나게 해서 서브 메뉴가 있다는 표시를 하기 위한 것입니다. 서브메뉴가 없을 경우는 제거하는데 HOME에는 서브 메뉴가 없이 사용할 것이므로 제거합니다. 4의 span태그는 이미지를 삽입하기 위한 태그로 이전글에서 이 플러그인을 사용할 수 없었던 것은 이러한 태그를 삽입할 수 없었기 때문입니다. 빨간 박스의 내용을 보면 서브 메뉴가 여러단계로 있습니다. 블로그는 이러한 복잡한 메뉴는 없죠. 그래서 이부분은 사용하지 않고 제거합니다.
제거하고나면 1의 </li>태그가 있습니다. 앞에 클릭하고 백스페이스를 눌러서 2의 뒤로 이동합니다. 다음의 <li>태그는 컬럼이 두개있는 서브메뉴입니다. 3은 그대로 둬야겠죠. 컬럼이 두개 있는 것을 사용하는 것은 드랍다운 메뉴를 위로 나타나게 하려면 타이틀 부분이 좁기 때문에 메뉴가 많을 경우 다 나오지 않으므로 두개의 컬럼을 사용합니다. 그래서 5와 6부분을 제거하고 <li>태그를 세개씩만 사용합니다. 하나만 사용할 경우 두번째 <ul>태그 부분은 제거하고 빨간 밑줄 부분을 제거합니다. 위 두개의 컬럼을 사용하고 다른 메뉴에 한개의 컬럼을 사용할 경우의 html은 다음과 같이 됩니다.
1부분은 컬럼이 하나입니다. 각 클래스 선택자들이 제거됐습니다. 2부분은 블로그에서 많이 사용하는 기본메뉴를 첨부했습니다.이제 3의 파운드싸인에 실제 주소들을 대체합니다.
1의 블로그 기본주소는 블로그 html 편집창에서 footer부분에서 복사해온 것으로 치환자를 사용합니다. 치환자는 티스토리 홈페이지 스킨구조부분에 다 나옵니다 . 일반 메뉴는 블로그에서 카테고리를 선택해서 주소창에서 복사해서 붙여넣습니다. 주소가 영어와 %로 나오는 것은 한글부분이라서 그렇습니다. 메뉴의 마지막부분은 class="last"라는 클래스 선택자가 들어갑니다.
이렇게 하고 데모버전상에서 시험해보는 것이 좋겠지만 선택자를 blogMenu로 바꿔서 작동이 안됩니다. CSS와 제이쿼리 플러그인도 선택자를 바꿔야합니다.
menu.css파일을 텍스트 에디터에 열고 Ctrl+H키를 누르면 코드바꾸기 창이 나옵니다. 3에 교체할 단어를 입력하면 4에 갯수가 나옵니다. 5에 바꿀 단어(blogMenu2)를 입력하고 6의 Replace All을 클릭하면 전체가 바뀝니다. menu.js도 텍스트 에디터에 열고 위처럼 바꿔줍니다. 모든 파일을 그대로 저장합니다. 실험하고 나서 블로그에서 사용하려면 위 CSS 파일에서 추가로 교체할 부분이 있는데 이미지 폴더를 변경해줘야합니다. 웹브라우저에서 html 파일을 클릭하면 이전보다 좌측상단으로 나타납니다. 정상적으로 나오는 것을 확인한 다음 위 화면에서 3에 images/를 입력하고 5는 공란으로 비운다음 6의 버튼을 클릭하면 모든 background 속성의 images 폴더가 제거됩니다. 다시 저장합니다. images폴더를 제거하는 이유는 CSS파일이 블로그의 images 폴더에 업로드 되기 때문입니다. 같은 폴더에 있으니 폴더명을 입력할 필요가 없는 것입니다.
2. 블로그에 삽입 및 수정
블로그의 html 편집창의 첫부분에 링크를 삽입합니다. 텍스트 에디터에서 1과 2 부분의 html 코드를 복사해 와서 붙여넣습니다. 3처럼 ./images/을 추가합니다. 4의 제이쿼리 라이브러리는 이미 있으므로 추가로 복사하지 않아도 됩니다. 4의 파일업로드 탭을 우클릭하여 "새탭에서 링크열기"를 선택하고 하단에서 추가버튼을 클릭하여 menu.css파일과 menu.js파일을 업로드합니다. 두개의 파일이 업로드 되면 다시 추가버튼을 클릭하여 이번에는 images폴더에서 back.jpg를 제외하고 이미지들을 업로드합니다.
html 편집창에서 class="blogMenu" 로 검색하여 위처럼 블럭설정합니다. 텍스트 에디터에서 <div id="blogMenu2">부터 <div id="copyright"> 전까지 복사하여 위에 붙여넣습니다. 점검합니다. menu.css와 menu.js 링크가 두개 삽입됐고, 이미지들이 업로드 됐으며 html 코드가 삽입됐습니다. 이제 하단에서 저장버튼을 클릭하고 블로그 화면에서 새로고침합니다.
메뉴에 마우스오버하면 서브메뉴가 나옵니다. 두개의 컬럼이 있는 경우는 배경이미지가 다 안나오는 때도 있습니다. 글자를 보면 입체적으로 나오는데 CSS3의 text-shadow 속성을 사용했습니다. 이 속성은 인터넷 익스플로러에서는 지원하지 않아서 글자가 흰색부분만 나오게 됩니다. 이속성을 제거하고 글자의 색을 바꿔야합니다.
81번 줄의 text-shadow 속성부분을 제거하고 75번째줄의 컬러를 #000으로 바꿉니다. 그리고 마우스 오버시 글자의 색상을 검정에서 흰색으로 바꾸면 배경이미지가 짙은 회색이므로 글자가 잘보이게 됩니다. 92번째 줄의 속성에 컬러를 #fff로 추가합니다.
메뉴바 밑에 밑줄을 추가하려면 blogMenu2에 1처럼 border-bottom 속성을 추가합니다. 글자와 간격을 맞추기 위해 패딩을 추가합니다. 서브메뉴를 위로 나타나게 할 것이지만 현재까지는 서브메뉴가 구글광고 뒤로 나타납니다. 앞으로 나오게 하려면 3처럼 z-index 속성을 추가하고 값으로 1을 입력합니다. 이곳에 z-index를 1로 입력하면 나란히 있는 서치박스가 뒤로 가기 때문에 서치박스에 클릭이 안됩니다. 그래서 #searchBox 에 z-index: 2; 를 추가로 입력해 줘야합니다. z-index는 포토샵의 레이어와 같은 성질이 있어서 서치박스가 위로 올라와야합니다. z-index의 값이 높을수록 상위 레이어에 있게 됩니다.
드랍다운 메뉴 아래에 구글광고가 있으면 애드센스 규칙에 어긋나므로 드랍다운을 드랍업으로 바꾸려면 4처럼 #blogMenu2.active .spanbox에 bottom 속성을 추가합니다. 포지션이 절대위치이므로 이미지가 하단을 기준으로 배치되고 아래로부터 37픽셀 위로 나오게 되므로 메뉴가 위에 나타납니다. 여기까지하고 저장한 다음 파일을 다시 블로그로 업로드합니다.
서브메뉴가 메뉴바 위로 나타나고 글자도 흰색으로 바뀝니다. 서치박스를 위로 조금 올려서 메뉴바와 균형을 맞춰야겠습니다. 메뉴를 추가할때 서치박스를 넘어오게 되면 서치박스를 헤더의 윗부분으로 이동해야할 때도 있습니다.
#searchBox로 검색을 하여 top속성의 값을 조정합니다. 그 다음에 z-index: 2;를 입력해줍니다. 그리고 이 수치를 줄이면 위로 올라가게 됩니다. 마지막으로 텍스트 에디터의 html 에서 copyright부분을 복사해서 html 편집창의 footer부분에서 div class="copyright" 하단에 붙여넣으면 좌측상단에 나오던 메시지가 나오지 않게 됩니다. 그대로 두면 블로그 전체의 저작권이라는 의미가 되므로 앞에 4처럼 Menu Bar라는 글자만 삽입합니다.
CustomSkin(2012-02-11-1).zip현재까지 작업한 스킨입니다. 그대로 사용하려면 메뉴부분을 수정해서 사용하면 됩니다. 포스팅 내용을 따라하시면서 안되는 경우는 참고하시고 코드내용을 비교하려면 이곳 에서 윈머지라는 프로그램을 사용하면 코드 비교를 할 수 있습니다.
