HTML 메뉴 만들기-이미지 위의 메뉴, 하위메뉴

2017. 1. 12. 09:17

홈페이지 메뉴를 만든 뒤 드롭 다운 메뉴를 이용하여 하위 메뉴를 추가해 보았습니다.

아래의 그림과 같이 마우스 커서를 가져다 대면 하위메뉴가 띄워지는 형태로 만들어 보았으며 여러 가지 적용을 할 수 있습니다.

메뉴 항목을 만들 때 네비게이션의 약자인 nav 태그를 이용하여 만들어 보았습니다.

nav 태그는 다른 페이지 또는 링크 이동할 때 많이 사용되는 태그라고 합니다.

CSS 만들기

<style>

#top { /*참고사이트 http://unikys.tistory.com/335 */ height: 30px; /* 메인 메뉴의 높이 */ width: 1000px; /* 메인 메뉴의 넓이 */ }

#top ul { /* 메인 메뉴 안의 ul을 설정함: 상위메뉴의 ul+하위 메뉴의 ul */ list-style-type: none; /* 메인 메뉴 안의 ul 내부의 목록 표시를 없애줌 */ margin: 0px; /* 메인 메뉴 안의 ul의 margin을 없앰 */ padding: 0px; /* 메인 메뉴 안의 ul의 padding을 없앰 */ }

#top ul li { /* 메인 메뉴 안에 ul 태그 안에 있는 li 태그의 스타일 적용(상위/하위메뉴 모두) */ color: black; /* 글씨 색 */ background-color: #00000000; /* 배경 색*/ float: left; /* 왼쪽으로 나열되도록 설정 */ line-height: 30px; /* 텍스트 한 줄의 높이*/ vertical-align: middle; /* 세로 정렬을 가운데로 설정 */ text-align: center; /* 텍스트를 가운데로 정렬 */ position: relative; /* 해당 li 태그 내부의 top/left 포지션 초기화 */ }

.menuLink, .submenuLink { /* 상위 메뉴와 하위 메뉴의 a 태그에 공통으로 설정할 스타일 */ text-decoration:none; /* a 태그의 꾸밈 효과 제거 */ display: block; /* a 태그의 클릭 범위를 넓힘 */ width: 130px; /* 각 메뉴 ITEM의 기본 넓이*/ font-size: 13px; /* 폰트 사이즈*/ font-weight: bold; /* 폰트를 굵게 설정 */ font-family: "Malgun Gothic"; /* 기본 폰트를 영어/한글 순서대로 설정 */ }

.menuLink { /* 상위 메뉴의 글씨색을 흰색으로 설정 */ color: black; }

.topLi:hover .menuLink { /* 상위 메뉴의 li에 마우스오버 되었을 때 스타일 설정 */ color: gray; /* 글씨 색 */ background-color: #00000000; /* 배경색 */ }

.submenuLink { /* 하위 메뉴의 a 태그 스타일 설정 */ color: black; /* 글씨 색 */ background-color: #00000000; /* 배경색 */ border: solid 1px black; /* 테두리를 설정 */ margin-top: -1px; /* 위 칸의 하단 테두리와 아래칸의 상단 테두리가 겹쳐지도록 설정 */ }

.submenu { /* 하위 메뉴 스타일 설정 */ position: absolute; /* html의 flow에 영향을 미치지 않게 absolute 설정 */ height: 0px; /* 초기 높이는 0px로 설정 */ overflow: hidden; /* 실 내용이 높이보다 커지면 해당 내용 감춤 */ transition: height .2s; /* height를 변화 시켰을 때 0.2초간 변화 되도록 설정(기본) */ -webkit-transition: height .2s; /* height를 변화 시켰을 때 0.2초간 변화 되도록 설정(구버전 크롬) */ -moz-transition: height .2s; /* height를 변화 시켰을 때 0.2초간 변화 되도록 설정(구버전 파폭) */ -o-transition: height .2s; /* height를 변화 시켰을 때 0.2초간 변화 되도록 설정(구버전 오페라) */ }

.topLi:hover .submenu { /* 상위 메뉴에 마우스 오버한 경우 그 안의 하위 메뉴 스타일 설정 */ height: 93px; /* 높이를 93px로 설정 */ }

.submenuLink:hover { /* 하위 메뉴의 a 태그의 마우스 오버되고 있을 때 스타일 설정 */ color: gray; /* 글씨색 */ background-color: #00000000; /* 배경도 바꿀 수 있음 */ }

</style>

color , width , height 등 원하시는 만큼 조절하여 적용시키면 됩니다.

메뉴 항목 만들기

<div style="position: fixed; padding-top:10px; left:50%; width:1000px; margin-left:-350px;"> //구현한 메뉴가 스크롤 후에도

//같이 이동해주기 위해 <div>태그 안에 position: fixed 사용 !

<nav id="top" style="padding-top:250px;"> // 맨 위에서 떨어지도록 padding-top 선언

<ul>

</ul>

</li>

</ul>

</nav>

</div>

이미지 위에 메뉴 추가하기

이미지 위에 메뉴 및 텍스트를 올리기 위해선 position 활용을 하면 쉽게 해결 할 수 있습니다.

position: absolute 기능을 적용하면 이미지 위치나 텍스트 위치가 다른 이미지나 텍스트 위치를 기준으로 보지 않고 웹페이지 자체를 기준으로 보기에

제일 상단 왼쪽에 위치하게 됩니다.

position 기능을 활용하여 적용

<div>

//이미지가 absolute처리가 아니라면 margin-left: auto;margin-right: auto; display: block; 기능으로 중앙정렬을 할 수 있습니다.

</div>

<nav id="top" style="padding-top:250px;"> // 맨 위에서 떨어지도록 padding-top 선언

<ul>

</ul>

</li>

</ul>

</nav>

</div>

이미지를 배경으로 하는 메뉴는 따로 이미지 첨부하지 않겠습니다.

'프로그래밍 > web(php,javascript,html)' 카테고리의 다른 글

NAS synology HTTPS 허용 접속 과정 (1)	2019.01.03

ylblog

HTML 메뉴 만들기-이미지 위의 메뉴, 하위메뉴

'프로그래밍 > web(php,javascript,html)' 카테고리의 다른 글

+ Recent posts

티스토리툴바