CSS와 제이쿼리를 이용한 섹시한 네비게이션바

CSS와 제이쿼리를 이용한 드랍다운 메뉴입니다. 원본이 섹시하다고 했으나 그다지 섹시하지는 않습니다.  원본 출처

html부분입니다.

<div class="container">

<div id="header">

<ul class="topnav">  

    <li><a href="#">Home</a></li>  

    <li>  

        <a href="#">Tutorials</a>  

        <ul class="subnav">  

            <li><a href="#">Sub Nav Link</a></li>  

            <li><a href="#">Sub Nav Link</a></li> 

            <li><a href="#">Sub Nav Link</a></li>  

            <li><a href="#">Sub Nav Link</a></li>  

            <li><a href="#">Sub Nav Link</a></li>  

            <li><a href="#">Sub Nav Link</a></li>  

 

        </ul>  

    </li>  

    <li>  

        <a href="#">Resources</a>  

        <ul class="subnav">  

            <li><a href="#">Sub Nav Link</a></li>  

            <li><a href="#">Sub Nav Link</a></li>

            <li><a href="#">Sub Nav Link</a></li>  

            <li><a href="#">Sub Nav Link</a></li>  

            <li><a href="#">Sub Nav Link</a></li>  

            <li><a href="#">Sub Nav Link</a></li>  

              

        </ul>  

    </li>  

    <li><a href="#">About Us</a></li>  

    <li><a href="#">Advertise</a></li>  

    <li><a href="#">Submit</a></li>  

    <li><a href="#">Contact Us</a></li>  

</ul>

</div>

</div>  

CSS부분입니다.

<style type="text/css">

body {

margin: 0;

padding: 0;

font: 10px normal Arial, Helvetica, sans-serif;

background: #DDD url(body_bg.gif) repeat-x;

}

.container {

width: 960px;

margin: 0 auto;

position: relative;

}

#header {

background: url(header_bg.gif) no-repeat center top;

padding-top: 120px;

}

#header .disclaimer {

color: #999;

padding: 100px 0 7px 0;

text-align: right;

display: block;

position: absolute;

top: 0;

right: 0;

}

ul.topnav {

list-style: none;

padding: 0 20px;

margin: 0;

float: left;

width: 920px;

background: #222;

font-size: 1.2em;

background: url(topnav_bg.gif) repeat-x;

}

ul.topnav li {

float: left;

margin: 0;

padding: 0 15px 0 0;

position: relative; 

}

ul.topnav li a{

padding: 10px 5px;

color: #fff;

display: block;

text-decoration: none;

float: left;

}

ul.topnav li a:hover{

background: url(topnav_hover.gif) no-repeat center top;

}

ul.topnav li span { /*--Drop down 시동*/

width: 17px;

height: 35px;

float: left;

background: url(subnav_btn.gif) no-repeat center top;

}

ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect */

ul.topnav li ul.subnav {

list-style: none;

position: absolute; /*메인메뉴의 영향을 받지 않게 함*/

left: 0; top: 35px;

background: #333;

margin: 0; padding: 0;

display: none;

float: left;

width: 170px;

border: 1px solid #111;

}

ul.topnav li ul.subnav li{

margin: 0; padding: 0;

border-top: 1px solid #252525; /* 베벨효과 */

border-bottom: 1px solid #444; /* 베벨효과 */

clear: both;

width: 170px;

}

html ul.topnav li ul.subnav li a {

float: left;

width: 145px;

background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;

padding-left: 20px;

}

html ul.topnav li ul.subnav li a:hover { 

background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;

}

</style>

제이쿼리부분입니다.

<script type="text/javascript">

$(document).ready(function(){  

  

    $("ul.subnav").parent().append("<span></span>"); //제이쿼리 시동하고 ul.subnav뒤에 비어있는 span태그를 추가  

  

    $("ul.topnav li span").click(function() { //클릭시 다음 이벤트를 subnav에 적용 

  

        $(this).parent().find("ul.subnav").slideDown('fast').show(); //클릭시 subnav을 아래로 내림

  

        $(this).parent().hover(function() {  

        }, function(){  

            $(this).parent().find("ul.subnav").slideUp('slow'); //마우스 벗어났을때 원위치시킴  

        });  

  

        

        }).hover(function() {  

            $(this).addClass("subhover"); //마우스 오버시 subhover 클래스 추가  

        }, function(){  //On Hover Out  

            $(this).removeClass("subhover"); //마우스 아웃시 subhover클래스 제거  

    });  

  

});  

</script>

 

헤드태그에 다음을 삽입하면 별도의 js폴더를 만들지 않아도 됩니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

다음의 링크를 클릭하면 데모를 볼 수 있습니다.

링크

 

sexymenu.egg