작성일자
카테고리 CMS/익스프레스 엔진

이전 글에서 익스프레스 엔진의 메뉴 구조를 2단의 서브 메뉴로 만들고 여기에 트위터 부트스트랩의 메뉴를 설치했습니다. 부트스트랩의 메뉴바는 서브 메뉴가 있는 메뉴를 클릭하면 해당 메뉴가 있는 페이지가 열리는 것이 아니라 서브 메뉴가 열립니다. 그렇다면 익스프레스 엔진으로 메뉴를 만들 때 서브 메뉴가 있는 메뉴는 페이지를 링크할 것이 아니라 비어있는 링크를 연결해야 합니다. 대부분의 경우 어떤 메뉴를 클릭하거나 마우스를 올렸을 때 서브 메뉴가 나타난다면 서브 메뉴의 아이템으로 이동해서 클릭하게 되죠. 이번 글에서는 이러한 부트스트랩 메뉴바를 사용하는 방법을 알아보겠습니다.


익스프레스 엔진 메뉴 수정하기


익스프레스 엔진이 1.7 버전으로 업그레이드 되면서 메뉴 설정이 아주 간편해졌습니다. 전체적인 UI가 이전 버전보다 훨씬 좋아졌고 어느 CMS에 못지 않는 시스템입니다. 더구나 사용하기 편리하도록 물음표(?) 아이콘을 클릭하면 도움말 문서를 바로 볼 수 있습니다. 그래서 익스프레스 엔진을 처음 대하는 분들도 사용하기 편리합니다. 다만 자세한 설명이 부족한 면이 있지만 익스프레스 엔진 커뮤니티를 이용하면 도움을 받을 수 있습니다.



익스프레스 엔진을 부트스트랩 메뉴 구조에 적합하게 만들려면 서브 메뉴가 있는 메뉴를 빈 링크로 바꿔줘야합니다. 위 그림에서 웹디자인이라는 메뉴가 두개 있는데 메뉴의 오른쪽을 보면 바로가기 아이콘이 있는 것이 있습니다. 이것이 빈 링크입니다. 두번째 "웹디자인" 메뉴는 게시판 페이지가 있는 실제 링크입니다. 이 두번째 "웹디자인" 메뉴에 마우스를 올리면 서브 메뉴인 부트스트랩 메뉴가 나타나서 이를 클릭하려고 마우스를 이동하게 될 것입니다. 그렇다면 "웹디자인" 메뉴는 페이지가 없는 것으로 생각할 것입니다. 그러니 이 메뉴를 빈 링크로 대체하고 웹디자인 게시판을 서브 메뉴로 이동시켜야 합니다.



웹디자인 메뉴를 선택하고 "메뉴 추가", "바로가기"를 차례로 클릭한 다음, 바로가기 창에서 메뉴 이름을 입력하고 URL 링크에 샤프(#)를 입력하고 확인 버튼을 클릭하면 서브 메뉴로 웹디자인이 만들어지면서 바로 가기 아이콘이 추가됩니다. 샤프가 있는 링크는 링크(a 태그)를 만들어줄 뿐 어느곳으로 이동하지는 않습니다.



익스프레스 엔진에서 메뉴를 클릭드래그해서 이동하려면 약간의 기교가 필요합니다. 웹디자인 메뉴를 클릭드래그해서 바로가기 아이콘이 있는 메뉴에 올리면 삼각형 아이콘이 나타나고 메뉴 앞에 체크 아이콘이 나타납니다. 이동 가능하다는 표시입니다. 불가능할 경우 X 표시가 나타납니다. 마우스 버튼을 놓으면 이동이 완료됩니다.


이번에는 부트스트랩 메뉴를 첫번째 웹디자인 메뉴의 하위 메뉴로 이동하겠습니다. 부트스트랩 메뉴를 클릭 드래그해서 웹디자인 메뉴에 올리면 삼각형 아이콘이 나타납니다. 마우스를 놓으면 이동됩니다. 이렇게 이동하는 것만으로 완료되면 저장 버튼을 클릭하는 과정이 필요없습니다.



원하는 대로 이동이 됐고 웹 사이트에서 새로고침하고 메뉴에 마우스를 올리면 서브 메뉴가 나타납니다.


저작자 표시 비영리 변경 금지
신고

티스토리 툴바