웹사이트에서 각각의 기능 사용과 페이지 이동을 할 때 클릭하는 것이 바로 사이트의 메뉴입니다. 이를 구현할 수 있도록 도와주는 JSP 드롭 다운 메뉴 사이트를 소개해 드리겠습니다.
보통 메뉴의 text기반, 목록형, 드롭 다운형, 바형 등 다양한 방법을 통해 구성할 수 있는데요. 대표적으로 많이 사용하는 형태가 바로 드롭 다운 형태입니다.
사용 예제
제가 자주 사용하는 은행의 웹사이트 입니다.
상단의 조회라는 글자에 마우스를 갖다 대면 조회에 따른 서브 메뉴들이 펼쳐지는 전형적인 드롭다운 형태입니다.
이런 메뉴소스를 html 형태로 제공하는 사이트가 있는데요.
html형태로 제공하기 때문에 가져가 쓰기가 편하며 자기 스타일에 맞게 커스터마이징이 가능하기 때문에 독창적인 구성이 가능합니다.
드롭 다운 적용하기
apycom 사이트에 들어가면 위와 같은 화면이 뜨는데요.
상단의 menu 아이콘이나 전면의 무수히 많은 예제 중 하나를 선택하면 다음과 같이 상세내역이 나타나게 됩니다.
오른쪽을 보시면 Select Menu Color를 통해 색상을 변경할 수 있으며 Free Download를 통해 해당 소스를 다운받을 수도 있습니다.
다운 받으신 소스를 압축을 풀면 다음과 같은 파일이 존재하는데요.
이 파일 모두 이클립스로 이동시켜서 jsp파일에 적용시켜 보도록 하겠습니다.
프로젝트 구성은 다음과 같으며 모든 파일을 Webcontent 밑에 menu라는 폴더에 복사하였습니다.
그리고 menu라는 jsp파일을 만들어 index.html에 있는 핵심 소스를 복사하여 붙여 넣었습니다.
js와 css파일은 경로가 바뀌었기 때문에 위와 같이 변경하였으며 일부 메뉴 이름은 조회와 일반계좌로 바꿔보았습니다.
실행을 하니 다음과 같이 정상적으로 작동되었습니다.
직장인일 경우는 사용할 경우가 별로 없겠지만 학교나 학원에서 개인이나 팀단위로 웹프로젝트를 진행할 때 쓰면 좋을 것 같습니다.
주의: 위에 다운받을 때 보셨겠지만 Non-profit use only 라고 명시 되어 있으니 상업적인 용도로는 사용이 금지됩니다. 주의하시기 바랍니다.
답글 남기기