JAVA/Jquery

Jqeury 메뉴만들기

왕왕왕왕 2015. 8. 5. 20:12


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style type="text/css">

.menu {

width: 150px;

height: 50px;

text-align: center;

float: left;

cursor: pointer;

background-color: #74D19D;

}


.menu_on {

background-color: #288C28;

font-weight: bold;

}

</style>

</head>

<body>

<script

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


<script type="text/javascript">

$(document).ready(function() {

$(".menu").mouseover(function() {

$(this).addClass("menu_on");

});


$(".menu").mouseout(function() {

$(this).removeClass("menu_on");

});

});

</script>



<div class="menu">메뉴1</div>

<div class="menu">메뉴2</div>

<div class="menu">메뉴3</div>

<div class="menu">메뉴4</div>

<div class="menu">메뉴5</div>



</body>

</html>