제이쿼리 메뉴

제이쿼리 메뉴

HTML

<main id="wrap">

<header>

<div class="header_area">

<div class="header_inner">

<ul class="one_depth-list">

<li>

<a href="javscript:;">menu1</a>

</li>

<li>

<a href="javscript:;">menu2333</a>

</li>

<li class="on">

<a href="javscript:;">menu2143</a>

</li>

<li>

<a href="javscript:;">me</a>

</li>

</ul>

<span class="line"></span>

</div>

</div>

</header>

</main>

CSS

body{ margin:0; padding:0; }

a{ text-decoration: none; }

ul, ol{ list-style: none; margin:0; padding:0;}

header{ width:100%;}

.header_area{ margin: 10px 0;}

.header_inner{ width:1280px; margin:0 auto;}

.one_depth-list{ width:100%; text-align: center; }

.one_depth-list li{ display: inline-block; margin: 0 24px;}

.one_depth-list li a{ display:block; font-size:24px; color:#666;}

.one_depth-list li a:hover,

.one_depth-list li a:active{ color:red;}

.one_depth-list:after{ content: ''; display:block; clear: both;}

.line{ display:none; position: absolute; top:40px; left:0; display:inline-block; width:auto; height: 5px; background:red; }

SCRIPT

var _w;

var _oneDech;

var _line;

function init()

{

create();

addEvent();

}

function create()

{

_w = $( window );

_oneDech = $( ".one_depth-list" ).children( "li" );

_line = $( ".line" );

_oneDech.each( function( $index ){

if( $( this ).hasClass( "on" ))

{

showOver( $index, false );

}

});

}

function addEvent()

{

_oneDech.on( "mouseenter", oneDechHover );

}

function oneDechHover( $e )

{

var index = $( this ).index();

showOver( index, true );

}

function showOver( $index, $isMotion )

{

var index = $index;

var posX = _oneDech.eq(index).offset().left;

var indexWidth = _oneDech.eq(index).width();

var mTime = 0;

if( $isMotion ) mTime = 0.35;

TweenMax.to( _line, mTime, { opacity:1, display:"block", left: posX, width: indexWidth, ease:Expo.easeInOut });

}

예제샘플 : http://ux.adqua.co.kr/ux/ixkfo86/test/gnb/menu.html