메뉴 만들기

아이디어 : 

  1. 사용 언어 : (html / CSS / jQuery)
  2. 네모 블럭(메뉴)들을 4 X 3형태로 배치
  3. 블럭에 마우스 오버시, 해당 블럭은 커지고 나머지 블럭들은 투명해짐
  4. 마우스 아웃시, 원래 크기로 돌아가고 나머지 블럭들도 원상태로
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $(function() {
        //마우스 오버시
        $("img").on("mouseover", function() {
            //메뉴 확대
            $(this).stop().animate({
                width : "150px",
                height : "150px",
                opacity : 1
            }, 500);
            
            //나머지 메뉴들 투명하게...
            $("img[id!= " + $(this).attr("id") + "]").stop().animate({
                width : "100px",
                height : "100px",
                opacity : 0.4
            }, 500);
        });
    
        //마우스 아웃시
        $("img").on("mouseout", function() {
            //메뉴 크기 되돌리기
            $(this).stop().animate({
                width : "100px",
                height : "100px",
                opacity : 1
            }, 500);
            
            //나머지 메뉴 투명도 되돌리기
            $("img[id!= " + $(this).attr("id") + "]").stop().animate({
                width : "100px",
                height : "100px",
                opacity : 1
            }, 500);
        });
    });
</script>
<style type="text/css">
body {
    text-align: center;
}

img {
    width: 100px;
    height: 100px;
}

.red {
    background-color: red;
}

.green {
    background-color: green;
}

.blue {
    background-color: blue;
}
</style>
</head>
<body>
    <img id="c1" class="red" />
    <img id="c2" class="red" />
    <img id="c3" class="red" />
    <img id="c4" class="red" />
    <br />
    <img id="c5" class="green" />
    <img id="c6" class="green" />
    <img id="c7" class="green" />
    <img id="c8" class="green" />
    <br />
    <img id="c9" class="blue" />
    <img id="c10" class="blue" />
    <img id="c11" class="blue" />
    <img id="c12" class="blue" />
</body>
</html>

최종형태 :

(마우스 오버시)

댓글

댓글 쓰기