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 디자인 글과 동향을 소개해 드립니다.