본문 바로가기

Tutorial + Design

CSS3 메가 드롭다운(mega dropdown) 메뉴 만들기

아마존 같은 대형 온라인 쇼핑사이트에서 주로 있는 메가 드롭다운 메뉴를 만들어 보겠습니다. 




미리보기  |  다운로드





HTML 마크업


클래스 "nav" <ul> 만들고, 각각의 메뉴 아이템을 위해 <a> 태그가 들어간 <li> 추가합니다. 여기서 메가 메뉴가 메뉴 아이템에는 <li>안에 <div> 넣어줍니다.

<ul class="nav">
    <li>
        <a href="#">What's new</a>
        <div>
            Mega Menu Content...
        </div>
    </li>
    <li><a href="#">Top rated</a></li>
    <li>
        <a href="#">Earnings</a>
        <div>
            Mega Menu Content...
        </div>
    </li>
    <li><a href="#">Rings</a></li>
    <li><a href="#">Bracelets</a></li>
    <li><a href="#">All Categories</a></li>
    <li class="nav-search">
        <form action="#">
            <input type="text" placeholder="Search...">
            <input type="submit" value="">
        </form>
    </li>
</ul>



The CSS


모든 브라우저에서 기본적으로 동일한 기본 스타일을 보여주도록 합니다. 

.nav,
.nav a,
.nav ul,
.nav li,
.nav div,
.nav form,
.nav input {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
 
.nav a { text-decoration: none; }
 
.nav li { list-style: none; }


다음 메뉴 컨테이너에 기본 스타일을 주고, <li> float: left 줘서 모두가 동일선상에 있도록 합니다.

.nav {
    display: inline-block;
    position: relative;
    cursor: default;
    z-index: 500;
}
 
.nav > li {
    display: block;
    float: left;
}


이제 공통 스타일로 padding, height, position 등을 잡습니다. 타이포그래피 스타일로 font size, color, text shadow 등을 잡습니다. 백그라운드 색상과 왼쪽/오른쪽 여백도 잡습니다. 부드럽게 이동하는 애니메이션을 주기위해 CSS3 transition 추가합니다. transition 모든 브라우저와 버전을 지원하지는 않기 때문에 프리픽스prefix 사용해 지원하도록 합니다.

.nav > li > a {
    position: relative;
    display: block;
    z-index: 510;
    height: 54px;
    padding: 0 20px;
    line-height: 54px;
 
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #fcfcfc;
    text-shadow: 0 0 1px rgba(0,0,0,.35);
 
    background: #372f2b;
    border-left: 1px solid #4b4441;
    border-right: 1px solid #312a27;
 
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}


메뉴 아이템에 호버시 백그라운드 색상만 바꾸도록 합니다. 메뉴 왼쪽 위아래에만 둥글게 라운드 처리를 하기 위해 :first-child 스도 셀렉터를 사용하고 왼쪽 border 지웁니다. 

.nav > li:hover > a { background: #4b4441; }
 
.nav > li:first-child > a {
    border-radius: 3px 0 0 3px;
    border-left: none;
}


이제 찾기 컨테이너를 스타일링 해봅시다. position: relative 하고, border-left 메뉴 <li> 준것과 같게 합니다. width inherit 적용해서 차일드 인풋에서의 width 사용합니다. 

.nav > li.nav-search > form {
    position: relative;
    width: inherit;
    height: 54px;
    z-index: 510;
    border-left: 1px solid #4b4441;
}


다음으로 텍스트 인풋을 스타일링 합니다. float:left이고 height, padding 등의 값을 정합니다. 텍스트 인풋을 호버 전에는 숨겨두기 위해 width 1px 하고 왼쪽/오른쪽 padding 없앱니다. 그리고 :hover :focus width, padding 값을 정해줍니다. 






.nav > li.nav-search input[type="text"] {
    display: block;
    float: left;
    width: 1px;
    height: 24px;
    padding: 15px 0;
    line-height: 24px;
 
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #999999;
    text-shadow: 0 0 1px rgba(0,0,0,.35);
 
    background: #372f2b;
 
    -webkit-transition: all .3s ease 1s;
    -moz-transition: all .3s ease 1s;
    -o-transition: all .3s ease 1s;
    -ms-transition: all .3s ease 1s;
    transition: all .3s ease 1s;
}
 
.nav > li.nav-search input[type="text"]:focus { color: #fcfcfc; }
 
.nav > li.nav-search input[type="text"]:focus,
.nav > li.nav-search:hover input[type="text"] {
    width: 110px;
    padding: 15px 20px;
 
    -webkit-transition: all .3s ease .1s;
    -moz-transition: all .3s ease .1s;
    -o-transition: all .3s ease .1s;
    -ms-transition: all .3s ease .1s;
    transition: all .3s ease .1s;
}


찾기 확인버튼submit 스타일은 width height 고정시키고, 백그라운드 아이콘을 추가하며, 오른쪽 위아래를 둥글게 라운드 처리해줍니다. transition 넣어서 부드러운 애니메이션을 주도록 합니다.  

.nav > li.nav-search input[type="submit"] {
    display: block;
    float: left;
    width: 20px;
    height: 54px;
    padding: 0 25px;
    cursor: pointer;
 
    background: #372f2b url(../img/search-icon.png) no-repeat center
center;
 
    border-radius: 0 3px 3px 0;
 
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}
 
.nav > li.nav-search input[type="submit"]:hover { background-color:
#4b4441; }


가장 중요한 부분입니다. 메가 메뉴가 드롭다운되는 스타일로 position: absolute, width: 100%, ,display: block, top left 값을 정합니다. 그런 다음 opacity, visibility, overflow 사용해 드롭다운을 감출겁니다. 백그라운드 색상을 넣고 외곽부분을 라운드 처리하고 transition 줍니다. 드롭다운을 감출 display: none 사용하지 않을 이유는 사용할 경우 transition 작동하지 않기 때문입니다. 

.nav > li > div {
    position: absolute;
    display: block;
    width: 100%;
    top: 50px;
    left: 0;
 
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
 
    background: #ffffff;
    border-radius: 0 0 3px 3px;
 
    -webkit-transition: all .3s ease .15s;
    -moz-transition: all .3s ease .15s;
    -o-transition: all .3s ease .15s;
    -ms-transition: all .3s ease .15s;
    transition: all .3s ease .15s;
}


호버시 드롭다운이 보이도록 opacity 1, visibility overflow visible 줍니다.

.nav > li:hover > div {
    opacity: 1;
    visibility: visible;
    overflow: visible;
}



콘텐츠 넣기


<div class="nav-column">
    <h3>Home</h3>
    <ul>
        <li><a href="#">Pampers Diapers</a></li>
        <li><a href="#">Huggies Diapers</a></li>
        <li><a href="#">Seventh Generation</a></li>
        <li><a href="#">Diapers</a></li>
        <li><a href="#">Derbies</a></li>
        <li><a href="#">Driving shoes</a></li>
        <li><a href="#">Espadrilles</a></li>
        <li><a href="#">Loafers</a></li>
    </ul>
</div>
 
<div class="nav-column">
    <h3>Home</h3>
    <ul>
        <li><a href="#">Driving shoes</a></li>
        <li><a href="#">Espadrilles</a></li>
        <li><a href="#">Loafers</a></li>
    </ul>
 
    <h3>Home</h3>
    <ul>
        <li><a href="#">Driving shoes</a></li>
        <li><a href="#">Espadrilles</a></li>
        <li><a href="#">Loafers</a></li>
    </ul>
</div>
 
<div class="nav-column">
    <h3>Home</h3>
    <ul>
        <li><a href="#">Pampers Diapers</a></li>
        <li><a href="#">Huggies Diapers</a></li>
        <li><a href="#">Seventh Generation</a></li>
        <li><a href="#">Diapers</a></li>
        <li><a href="#">Derbies</a></li>
        <li><a href="#">Driving shoes</a></li>
        <li><a href="#">Espadrilles</a></li>
        <li><a href="#">Loafers</a></li>
    </ul>
</div>
 
<div class="nav-column">
    <h3 class="orange">Related Categories</h3>
    <ul>
        <li><a href="#">Pampers Diapers</a></li>
        <li><a href="#">Huggies Diapers</a></li>
        <li><a href="#">Diapers</a></li>
    </ul>
 
    <h3 class="orange">Brands</h3>
    <ul>
        <li><a href="#">Driving shoes</a></li>
        <li><a href="#">Espadrilles</a></li>
    </ul>
</div>


콘텐츠에 스타일을 줍니다. 열마다 width: 20%, padding: 2.5% 주고 float: left 합니다. 

.nav .nav-column {
    float: left;
    width: 20%;
    padding: 2.5%;
}
 
.nav .nav-column h3 {
    margin: 20px 0 10px 0;
    line-height: 18px;
 
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    color: #372f2b;
    text-transform: uppercase;
}
 
.nav .nav-column h3.orange { color: #ff722b; }
 
.nav .nav-column li a {
    display: block;
    line-height: 26px;
 
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #888888;
}
 
.nav .nav-column li a:hover { color: #666666; }



미리보기  |  다운로드






원문: create-css3-mega-menu


Refresh Studio

해외 최신 웹/모바일/UX 디자인 글과 동향을 소개해 드립니다.