태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


* 이전의 드랍다운 메뉴 만들기를 하고나서 의외로 많은 질문이 들어온 것이 가로형 메뉴는 어떻게 만드느냐에 대한 내용이었는데, 이 부분은 이전의 메뉴를 그대로 수정해서는 은근히 어려울 수 있어서 이 부분에 대하여 한번 더 정리해보고자 한다. 이번의 글의 목적은 HTML과 CSS만으로 가로로 떨어지는 드랍다운 메뉴를 만드는 것이고, 그 다음에는 아마도 CSS만으로는 구현하게 되면 UX상 개선하고 싶은 몇가지 내용들에 대하여 개선할 수 있는 HTML과 자바스크립트로 드롭다운 메뉴를 만들어 볼 것이다.


- 이전 글

2013/11/01 - [밑바닥부터 홈페이지 만들기] 예고편

2013/11/01 - [밑바닥부터 홈페이지 만들기] HTML5 기본 템플릿, DOCTYPE 종류

2014/01/13 - [밑바닥부터 홈페이지 만들기] 최종 목표 예고 - toc21.com

2014/01/15 - [밑바닥부터 홈페이지 만들기] nav, ul, li 태그 HTML과 CSS로 가로형 메뉴 만들기

2014/01/22 - [밑바닥부터 홈페이지 만들기] HTML과 CSS로 드롭다운 메뉴 만들기

2014/01/27 - [밑바닥부터 홈페이지 만들기] 마우스 오버 이미지 배너 만들기(CSS, 자바스크립트 등)



* 세로형 드랍다운 메뉴 vs 가로형 드랍다운 메뉴

: 세로형 메뉴와 가로형 메뉴는 그 사용하고자 하는 의도가 조금 다를 수 있다. 세로형은 특정 메뉴에 대해서만 하위 메뉴가 있는 경우 유용하게 사용하는 경우가 많고, 모든 상위 메뉴가 하위 메뉴를 가지고 있게 되는 경우, 그리고 상단에 많은 넓이를 차지하지 않고 최대한 조금만 차지하도록 하고 싶은 경우에는 가로형 메뉴를 선택하여 사용하는 경우가 많다. 앞서 구현했던 세로형 메뉴에 모든 메뉴가 동일한 갯수의 하위 메뉴가 4~5개씩 있으면 사용자가 보기에 많이 정신 없고 가독성이 떨어질 수 있다는 위험성이 있다. 이 때문에 많은 하위 메뉴가 있으면 세로형 드랍다운 메뉴보다는 가로형 드랍다운 메뉴가 더 좋을수도 있다.


: 기존의 세로형 메뉴와 가로형 메뉴의 사용자 관점이 아닌 개발자의 입장에서 가장 다른 점을 꼽으라면 가로형 메뉴를 구현할 수 있는 방법이 몇 가지가 있을 수 있다는 점이다. 기존의 세로형 메뉴와 비슷하게 상위 메뉴의 바로 아래에 작게 약간 떠다니는 느낌으로 나타나게 할수도 있고, 상위 메뉴의 아래에 화면 전체적으로 나타나도록 하는 것도 가능할 것이다. 이번에는 간단하게 두 가지 HTML과 CSS만으로 구현하는 방법을 모두 살펴볼 것이다.



* HTML은 그대로 가져오기

: 이전에 구현하였던 세로형 드랍다운 메뉴의 HTML을 일단 그대로 가져오면 된다. CSS를 이용해서 구현하는 경우에는 이러한 HTML 구조를 그대로 사용하고, CSS만 변경해서 그 모양을 바꿀 수 있기 때문에 매우 유용하다. 이러한 이유 때문에 HTML의 구조와 CSS의 스타일 적용을 분리하는 것이 좋다는 것을 느낄 수 있다. 아래의 소스는 이전글에서 그대로 가져왔다.


2014/01/22 - [밑바닥부터 홈페이지 만들기] HTML과 CSS로 드롭다운 메뉴 만들기

	<nav id="topMenu" >
		<ul>
			<li class="topMenuLi">
                <a class="menuLink" href="http://unikys.tistory.com/category/Programming%20Lecture">LECTURES</a>
                <ul class="submenu">
                    <li><a href="http://unikys.tistory.com/category/Programming%20Lecture/%EC%86%8D%EA%B9%8A%EC%9D%80%20%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%20%EA%B0%95%EC%A2%8C" class="submenuLink longLink">속깊은 자바스크립트 강좌</a></li>
                    <li><a href="http://unikys.tistory.com/category/Programming%20Lecture/%EB%B0%91%EB%B0%94%EB%8B%A5%EB%B6%80%ED%84%B0%20%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80%20%EB%A7%8C%EB%93%A4%EA%B8%B0" class="submenuLink longLink">밑바닥부터 홈페이지 만들기</a></li>
                    <li><a href="http://unikys.tistory.com/category/Programming%20Lecture/Android%28%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C%29%20%EC%95%B1%20%EA%B0%9C%EB%B0%9C" class="submenuLink longLink">안드로이드 앱 개발</a></li>
                </ul>
            </li>
			<li>|</li>
            <li class="topMenuLi">
                <a class="menuLink" href="http://unikys.tistory.com/guestbook">GUEST BOOK</a>
            </li>
			<li>|</li>
            <li class="topMenuLi">
                <a class="menuLink" href="http://unikys.tistory.com/tag">TAG CLOUD</a>
                <ul class="submenu">
                    <li><a href="http://unikys.tistory.com/tag/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8" class="submenuLink">자바스크립트</a></li>
                    <li><a href="http://unikys.tistory.com/tag/%EA%B0%95%EC%A2%8C" class="submenuLink">강좌</a></li>
                    <li><a href="http://unikys.tistory.com/tag/K100D" class="submenuLink">K100D</a></li>
                </ul>
            </li>
			<li>|</li>
            <li class="topMenuLi">
                <a class="menuLink" href="http://unikys.tistory.com/media">MEDIA LOG
            </li>
			<li>|</li>
            <li class="topMenuLi">
                <a class="menuLink" href="http://unikys.tistory.com/location">LOCATION LOG</a>
            </li>
		</ul>
	</nav>


: 위의 상위/하위 메뉴 구조는 그대로 가져가면서 이제 CSS만 수정해서 세로로 드랍다운이 나타나던것을 가로형으로 수정할 것이다.

 

* 드랍다운 메뉴가 가로로 펼쳐지게 CSS 수정

: 먼저 기본의 CSS 중에서 사용할 수 있는 것은 상위 메뉴에 대한 CSS 부분이다. 이 부분은 그대로 가져와서 사용할 수 있다. 이전 글에서 가져오면 아래와 같다. 각 CSS 스타일 속성의 역할이 궁금하면 이전 글의 주석을 참고하면 된다. 이후에는 이전의 내용에서 변경되는 부분들만 주석으로 설명을 달 것이다.

#topMenu { height: 30px; width: 850px; } #topMenu ul { /* 메인 메뉴 안의 ul을 설정함: 상위메뉴의 ul+하위 메뉴의 ul */ list-style-type: none; margin: 0px; padding: 0px; } #topMenu ul li { /* 메인 메뉴 안에 ul 태그 안에 있는 li 태그의 스타일 적용(상위/하위메뉴 모두) */ color: white; background-color: #2d2d2d; float: left; line-height: 30px; vertical-align: middle; text-align: center; position: relative; } .menuLink, .submenuLink { /* 상위 메뉴와 하위 메뉴의 a 태그에 공통으로 설정할 스타일 */ text-decoration:none; display: block; width: 150px; font-size: 12px; font-weight: bold; font-family: "Trebuchet MS", Dotum; } .menuLink { /* 상위 메뉴의 글씨색을 흰색으로 설정 */ color: white; } .topMenuLi:hover .menuLink { /* 상위 메뉴의 li에 마우스오버 되었을 때 스타일 설정 */ color: red; background-color: #4d4d4d; } .longLink { /* 좀 더 긴 메뉴 스타일 설정 */ width: 190px; }

: 그리고 달라지는 CSS는 바로 submenu가 이제 더이상 세로로 펼쳐지는 것이 아니라 가로로 펼쳐지기 때문에 높이에 대한 설정을 변경해주고, 가로에 대한 값도 변경해주면 된다. 변경한 내용은 아래에 표시를 하였다. 이렇게 간단하게 몇가지만 수정하고도 아주 간단하게 수정이 가능하다. 이렇게 수정한 결과는 아래와 같다.

.submenuLink { /* 하위 메뉴의 a 태그 스타일 설정 */ color: #2d2d2d; background-color: white; border: solid 1px black; margin-right: -1px; /* [변경] 위 칸의 하단 테두리와 아래칸의 상단 테두리가 겹쳐지도록 설덩 */ } .submenu { /* 하위 메뉴 스타일 설정 */ position: absolute; height: 0px; overflow: hidden; transition: height .2s; -webkit-transition: height .2s; -moz-transition: height .2s; -o-transition: height .2s; width: 574px; /* [변경] 가로 드랍다운 메뉴의 넓이 */ } .submenu li { display: inline-block; /* [변경] 가로로 펼쳐지도록 설정 */ } .topMenuLi:hover .submenu { /* 상위 메뉴에 마우스 모버한 경우 그 안의 하위 메뉴 스타일 설정 */ height: 32px; /* [변경] 높이를 32px로 설정 */ } .submenuLink:hover { /* 하위 메뉴의 a 태그의 마우스 오버 스타일 설정 */ color: red; background-color: #dddddd; }

: 이렇게 구현한 결과는 아래와 같이 살펴볼 수 있다.




: 이렇게 구현하는 경우 주의할 점이 있다면, 서브 메뉴가 펼쳐질 때 width: 574px로 설정해주었는데, 각각의 하위 메뉴가 펼쳐지는 것이 다르다면, 각각의 하위 메뉴에 아이디나 각각의 상위 메뉴에 아이디를 부여해서 하위 메뉴의 길이를 설정하는 것이 좋다. 또한 경우에 따라서는 전체 페이지보다 오른쪽으로 길이가 더 길어져버려서 옆으로 넘어가버리면 웹페이지가 커져서 가로 스크롤바가 생겨버리는 사태가 발생할 수 있다. 따라서 이 소스를 그대로 가져다 쓰면 안되고 페이지에 맞게 커스터마이징을 잘 해서 사용하면 좋다. 특히, 하위 메뉴가 길어서 오른쪽으로 페이지가 넘어간다면 해당 하위 메뉴의 left 스타일을 -100px 등과 같이 설정해서 넘어가지 않도록 하는 것이 좋다.


: 위의 드롭다운 메뉴 같은 경우에는 하위 메뉴가 있는 경우도 있고, 없는 경우도 있어서 각각의 상위 메뉴 아래에 뜨도록 되어있는데, 이것을 조금 골고루 메뉴 펼쳐지는 경우 유용하게 전체 확장되도록 하면 아래와 같이 수정이 가능하다. 



* 전체로 펼쳐지는 하위 메뉴로 CSS 수정

: 이번에도 HTML은 그대로 활용이 가능하고 CSS만 변경하면 된다. CSS는 기존의 상위 메뉴들에 position: relative를 설정했던 것을 nav로 옮겨주고, 각각의 하위 메뉴들에는 left: 0;을 설정해줘서 nav의 시작 지점으로 위치가 오도록 하면 된다.

#topMenu { height: 30px; width: 850px; position: relative; /* [추가] 하위 메뉴 시작 지점을 메뉴와 동일하게 설정하기 위함 */ } #topMenu ul { /* 메인 메뉴 안의 ul을 설정함: 상위메뉴의 ul+하위 메뉴의 ul */ list-style-type: none; margin: 0px; padding: 0px; } #topMenu ul li { /* 메인 메뉴 안에 ul 태그 안에 있는 li 태그의 스타일 적용(상위/하위메뉴 모두) */ color: white; background-color: #2d2d2d; float: left; line-height: 30px; vertical-align: middle; text-align: center; -position: relative; /* [삭제] 해당 li 태그 내부의 top/left 포지션 초기화 */ } .menuLink, .submenuLink { /* 상위 메뉴와 하위 메뉴의 a 태그에 공통으로 설정할 스타일 */ text-decoration:none; display: block; width: 150px; font-size: 12px; font-weight: bold; font-family: "Trebuchet MS", Dotum; } .menuLink { /* 상위 메뉴의 글씨색을 흰색으로 설정 */ color: white; } .topMenuLi:hover .menuLink { /* 상위 메뉴의 li에 마우스오버 되었을 때 스타일 설정 */ color: red; background-color: #4d4d4d; } .longLink { /* 좀 더 긴 메뉴 스타일 설정 */ width: 190px; } .submenuLink { /* 하위 메뉴의 a 태그 스타일 설정 */ color: #2d2d2d; background-color: white; border: solid 1px black; margin-right: -1px; } .submenu { /* 하위 메뉴 스타일 설정 */ position: absolute; height: 0px; overflow: hidden; transition: height .2s; -webkit-transition: height .2s; -moz-transition: height .2s; -o-transition: height .2s; width: 770px; /* [변경] 가로 드랍다운 메뉴의 넓이 */ left: 0; /* [추가] 가장 왼쪽으로 하위 메뉴 위치 설정 */ } .submenu li { display: inline-block; } .topMenuLi:hover .submenu { height: 32px; } .submenuLink:hover { color: red; background-color: #dddddd; }


: 이것을 구현해보면 아래와 같이 나타난다. 하위 메뉴가 테두리가 있어서 약간 불만족스러운 디자인이기는 하지만 기능적으로는 잘 동작한다.




: 그러면 위와 같이 테두리가 있는 스타일을 조금 수정해서 아주 조금은 더 화면 전체로 하위가 내려오는 것과 같은 느낌을 주려면 아래와 같이 CSS를 수정하면 된다.


* 하위 메뉴가 화면 전체로 오도록 수정

: 하위 메뉴가 전체화면으로 오도록 수정하게 되면서 테두리를 없애고 그냥 화면 전체로 오도록 하는 것처럼 하고자 하면 아래와 같이 수정하면 된다. 이 때에 상위 메뉴와 하위 메뉴의 넓이는 임의로 780px로 설정하고 있으니, 각 웹페이지의 디자인된 넓이에 따라 그에 맞게 수정하면 될 것이다.

#topMenu { height: 30px; width: 770px; /* [변경] 하위 메뉴와 동일하게 맞춤 */ position: relative;

background-color: #2D2D2D; /* [추가] 늘어난만큼 배경색도 보이도록 수정 */ } #topMenu ul { /* 메인 메뉴 안의 ul을 설정함: 상위메뉴의 ul+하위 메뉴의 ul */ list-style-type: none; margin: 0px; padding: 0px; } #topMenu ul li { /* 메인 메뉴 안에 ul 태그 안에 있는 li 태그의 스타일 적용(상위/하위메뉴 모두) */ color: white; background-color: #2d2d2d; float: left; line-height: 30px; vertical-align: middle; text-align: center; -position: relative; } .menuLink, .submenuLink { /* 상위 메뉴와 하위 메뉴의 a 태그에 공통으로 설정할 스타일 */ text-decoration:none; display: block; width: 150px; font-size: 12px; font-weight: bold; font-family: "Trebuchet MS", Dotum; } .menuLink { /* 상위 메뉴의 글씨색을 흰색으로 설정 */ color: white; } .topMenuLi:hover .menuLink { /* 상위 메뉴의 li에 마우스오버 되었을 때 스타일 설정 */ color: red; background-color: #4d4d4d; } .longLink { /* 좀 더 긴 메뉴 스타일 설정 */ width: 190px; } .submenuLink { /* 하위 메뉴의 a 태그 스타일 설정 */ color: #2d2d2d; background-color: #DDD; /* [변경] 배경색 변경 */ -border: solid 1px black; /* [삭제] 테두리 삭제 */ -margin-right: -1px; /* [삭제] 공백 보정 삭제 */ } .submenu { /* 하위 메뉴 스타일 설정 */ position: absolute; height: 0px; overflow: hidden; transition: height .2s; -webkit-transition: height .2s; -moz-transition: height .2s; -o-transition: height .2s; width: 770px; left: 0;

background-color: #DDD; /* [추가] 하위 메뉴 전체에 배경색 설정 */ } .submenu li { display: inline-block;

} .topMenuLi:hover .submenu { height: 32px; } .submenuLink:hover { color: red; background-color: #dddddd; }

: 이렇게 구현하면 아래와 같이 상위 메뉴에 따라서 하위 메뉴도 전체 화면을 차지하도록 하는 것이 가능하다. 이렇게 한 이후, 혹시 각 하위 메뉴의 시작 지점을 바꿔주고 싶다면, 각 하위 메뉴에 id나 class를 부여한 다음 left 값을 설정해주면 된다.




: 이후에는 각자의 웹페이지 디자인에 맞게 CSS를 수정하면서 맞춰 나가면 될 것이다.




- 다음편 예고

: 다음에는 위와 같이 CSS로 되어있는 메뉴가 아닌 자바스크립트로 되어있는 드랍다운 메뉴를 살펴볼 것이다.









저작자 표시 비영리 동일 조건 변경 허락
신고

이 글을 공유하세요.

  • 2016.08.25 10:35 신고  댓글주소  수정/삭제  댓글쓰기

    감사합니다. 이강좌보고 많은 도움이되었습니다
    근데 시작위치를 바꿔줄려고 하위메뉴에 class를 주어서 left값을주었는데
    뒷배경회색도 같이옮겨가는데 ㅠ 해결방법을좀 가르쳐주시면 안될까영..

    • Unikys 2016.09.23 04:58 신고  댓글주소  수정/삭제

      텍스트 위치를 바꿔주려는거면, 쉽게는 padding-left를 주시면 됩니다. 아니면 하나의 wrapper를 더 만들어서 전체 화면의 회색 배경이 오도록하고, 하위에 텍스트를 뿌려주는 <ul>을 오른쪽으로 밀면 됩니다.

  • 안녕하세요 2016.10.19 13:50 신고  댓글주소  수정/삭제  댓글쓰기

    감사합니다^^ 많은 도움이 되었어요 ! 감사합니다~

  • 안녕하세요 2016.10.19 14:02 신고  댓글주소  수정/삭제  댓글쓰기

    궁금한게 2단메뉴를 만들려면 혹 어떻게해야할가요?
    topMenuLi 안의 submenu안의 li에 마우스를 대면 두번째 2단 메뉴가 나오는식으로요...

    • Unikys 2016.10.21 02:30 신고  댓글주소  수정/삭제

      네, 2단 메뉴는 위의 topMenuLi 아래에 submenu의 height를 수정해줬듯이 submenu아래에 2단째 메뉴를 만들고 적절하게 CSS를 넣으시면 됩니다. CSS 만으로 하기에는 다소 벅차실 수 있으니 자바스크립트로 하는 넣는 것도 좋을 수 있습니다.

  • 안녕하세요 2016.10.27 20:58 신고  댓글주소  수정/삭제  댓글쓰기

    정말 많은 도움 얻고 갑니다ㅠㅠ
    그런데 서브메뉴의 width를 px이 아닌 %로 지정하면 제가 원하는 대로 안나오는 것 같은데 해결방법 아시나요?ㅠㅠ

    • Unikys 2016.10.29 03:27 신고  댓글주소  수정/삭제

      %로 하려면 몇가지 수정이 필요합니다.
      %로 설정하면 부모 <li>의 폭에 맞춰질테니 어떻게든 상위 <li>의 폭은 %로 하고, 그 하위의 <a> 태그 등의 width를 조절하는 식으로 해야합니다. 그런데 이렇게 되면 메인 메뉴의 <li> 자체를 조율하는 것이 어려울 수 있으므로 구조를 잡는게 어려우시면 가장 속편하게는 자바스크립트를 쓰는 것이 좋을 것 같습니다.

  • 궁금합니다 2016.11.14 02:35 신고  댓글주소  수정/삭제  댓글쓰기

    지금 메뉴,서브 메뉴를 만들고 있는데, 메뉴에 마우스 오버시 서브 메뉴는 잘나오는데

    서브메뉴로 마우스를 옮기는 순간 해당 메인메뉴의 색상이 없어져 버립니다..이거 계속 유지시키려면 어떻게 해줘야하나요?

    //그리고 그 만드신 메뉴처럼 메인메뉴에 마우스 오버시 하위메뉴가 서서히?떨어지게끔 나오게는 어떤 css를 써야하나요

    • Unikys 2016.12.01 06:33 신고  댓글주소  수정/삭제

      서브 메뉴를 메인메뉴의 자식노드로 넣으면 서브메뉴에 마우스오버를 하면 메인메뉴에서 이벤트가 전달됩니다. 서서히 떨어지는 것은 transition: height 등을 사용하시면 됩니다.

  • 안녕하십니까 2016.12.01 16:46 신고  댓글주소  수정/삭제  댓글쓰기

    현재 가로메뉴로 사용하고 있습니다. 그런데 글씨색깔이 style.css의 색상으로 씌워져서 소스의 색깔이 나오지 않고있습니다.
    이부분에 대해서 해결방법을 아시는지 여쭤보고싶습니다.

    • Unikys 2016.12.01 17:40 신고  댓글주소  수정/삭제

      1. 소스의 색을 설정하는 css를 style.css보다 아래에 위치 시키면 됩니다.
      2. 위치 이동이 어려우면 색상 적용이 꼭 필요한 부분은 !important를 달면 됩니다.

  • 재영 2016.12.05 12:47 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요
    공부중이었는데 너무 쉽고 친절한 설명에 감명받았습니다. 정말 감사합니다.
    이 다음편 강좌는 언제쯤 작성 예정이실까요?
    기대하고 있습니다.

    • Unikys 2016.12.12 12:17 신고  댓글주소  수정/삭제

      댓글 감사합니다. 최대한 빨리 쓰고는 싶은데 밀려있는글이 몇개가 있어서 이제 이번주에 바쁜일이 끝나면 다시 쓰기 시작할텐데 이 시리즈는 정확히 모르겠네요. ㅠ 그래도 일단 리스트에 올려놓고 쓰기 시작하겠습니다 ㅎㅎ

  • 456123 2017.04.21 15:32 신고  댓글주소  수정/삭제  댓글쓰기

    하위메뉴에 padding-left 값을 넣어서 일일이 지정해 주는 것 말고 자동으로 상위메뉴 아래에 위치시켜줄수는 없나요?

    • Unikys 2017.05.16 06:59 신고  댓글주소  수정/삭제

      상위 메뉴의 자식 엘레먼트로 넣으면 상위 메뉴와 자동으로 위치 시키게 됩니다. 하지만 그러면 소스의 변경이 필요하긴 하겠죠. 위치 조절을 자유롭게 하고 싶으면 자바스크립트를 사용하면 편합니다.

  • 국내산라이츄 2017.05.17 15:45 신고  댓글주소  수정/삭제  댓글쓰기

    메뉴에 마우스를 올리면 자식메뉴들이 전부 다 보이는데 이 현상은 어떻게 해결하나요?

  • 931012 2017.06.05 00:04 신고  댓글주소  수정/삭제  댓글쓰기

    포토슬라이드랑 같이 했는데...........하위카테고리가 포토슬라이드에 가려진건지 하나밖에 안떠여..

질문이나 의견을 댓글로 달아 주세요

티스토리 툴바