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


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



메뉴 항목을 만들 때 네비게이션의 약자인 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> 

    <li class="topLi"><a class="menuLink" href="">A</a></li> 

    <li>|</li>

    <li class="topLi"><a class="menuLink" href=">B</a></li>

    <li>|</li>

     <li class="topLi"><a class="menuLink" href="">C</a></li> 

     <li>|</li>

     <li class="topLi"><a class="menuLink" href="">D</a></li>

     <li>|</li>

      <li class="topLi"><a class="menuLink" href="">E</a></li>

      <li>|</li>

      

       <li class="topLi"><a class="menuLink" href="">F</a>

       <ul class="submenu"> 

       <li><a class="submenuLink">a</a></li> 

       <li><a class="submenuLink">b</a></li> 

       <li><a class="submenuLink">c</a></li> 

       </ul>

       </li>

       

       </ul>

   </nav>

</div> 






이미지 위에 메뉴 추가하기


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


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


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


position 기능을 활용하여 적용


<div>

<div style="position: absolute; left:50%; width:1000px; margin-left:-500px;">   <!--이미지를 absolute로 최상단에 띄워놓고 중앙정렬-->

<img style=" width: 1000px; height:auto;margin-left: auto;margin-right: auto; display: block;" src="이미지src 추가"> 

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

</div>


<div style="position: fixed; padding-top:10px; left:50%; width:1000px; margin-left:-350px;">

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

    <ul> 

    <li class="topLi"><a class="menuLink" href="">A</a></li> 

    <li>|</li>

    <li class="topLi"><a class="menuLink" href=">B</a></li>

    <li>|</li>

     <li class="topLi"><a class="menuLink" href="">C</a></li> 

     <li>|</li>

     <li class="topLi"><a class="menuLink" href="">D</a></li>

     <li>|</li>

      <li class="topLi"><a class="menuLink" href="">E</a></li>

      <li>|</li>

      

       <li class="topLi"><a class="menuLink" href="">F</a>

       <ul class="submenu"> 

       <li><a class="submenuLink">a</a></li> 

       <li><a class="submenuLink">b</a></li> 

       <li><a class="submenuLink">c</a></li> 

       </ul>

       </li>

       

       </ul>

   </nav>

</div>

</div>



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

+ Recent posts