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

* 이전의 드랍다운 메뉴 만들기를 하고나서 의외로 많은 질문이 들어온 것이 가로형 메뉴는 어떻게 만드느냐에 대한 내용이었는데, 이 부분은 이전의 메뉴를 그대로 수정해서는 은근히 어려울 수 있어서 이 부분에 대하여 한번 더 정리해보고자 한다. 이번의 글의 목적은 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;  
    }

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

• LECTURES
  • 속깊은 자바스크립트 강좌
  • 밑바닥부터 홈페이지 만들기
  • 안드로이드 앱 개발
• |
• GUEST BOOK
• |
• TAG CLOUD
  • 자바스크립트
  • 강좌
  • K100D
• |
• MEDIA LOG
• |
• LOCATION LOG

: 이렇게 구현하는 경우 주의할 점이 있다면, 서브 메뉴가 펼쳐질 때 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;  
    }

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

• LECTURES
  • 속깊은 자바스크립트 강좌
  • 밑바닥부터 홈페이지 만들기
  • 안드로이드 앱 개발
• |
• GUEST BOOK
• |
• TAG CLOUD
  • 자바스크립트
  • 강좌
  • K100D
• |
• MEDIA LOG
• |
• LOCATION LOG

: 그러면 위와 같이 테두리가 있는 스타일을 조금 수정해서 아주 조금은 더 화면 전체로 하위가 내려오는 것과 같은 느낌을 주려면 아래와 같이 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 값을 설정해주면 된다.

• LECTURES
  • 속깊은 자바스크립트 강좌
  • 밑바닥부터 홈페이지 만들기
  • 안드로이드 앱 개발
• |
• GUEST BOOK
• |
• TAG CLOUD
  • 자바스크립트
  • 강좌
  • K100D
• |
• MEDIA LOG
• |
• LOCATION LOG

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

- 다음편 예고

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