-
[JQuery] menu생성, animateVScode/JQuery 2022. 9. 9. 14:57
Tabmenu
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tabmenu.html</title> <style type="text/css"> #tabs{position:relative; margin:100px auto; width:1080px; height:40px; text-align:center; margin-bottom:0;} ul{list-style: none; padding:0; margin:0; display:inline-block;} ul li{width:180px; height:40px; float:left; border-radius:5px 5px 0 0; line-height:40px; text-align:center; font-size:120%; cursor:default; /* border:1px dashed black; */} #content{position:relative; margin:0 auto; width:1080px; height:440px; } .contents{position:absolute; width:1080px; height:440px; left:0px; top:0px; line-height:440px; text-align: center; font-size: 120%;} #content1{background: #ebaa55;} #content2{background: #55ebd1; display:none; } #content3{background: #4fbde3; display:none; } #content4{background: #6ebe6d; display:none; } #content5{background: #95a096; display:none; } #content6{background: #ed8d2a; display:none; } </style> <script src="script/jquery-3.6.0.js"></script> <script src="script/jquery.innerfade.js"></script> <script type="text/javascript"> // 제이쿼리 명령을 이용하여 ul li들을 해당위치에 배치하고 // 각 배경색을 해당 색깔로 맞춤. // 아래 content들을 해당위치에 모두 겹쳐서 배치 // 탭메뉴(ul li) 중 하나를 클릭하면 content를 보이게(show())하고 // 나머지를 감싸줌(hide()) $(function(){ $('li:eq(0)').css('background-color','#ebaa55'); $('li:eq(1)').css('background-color','#55ebd1'); $('li:eq(2)').css('background-color','#4fbde3'); $('li:eq(3)').css('background-color','#6ebe6d'); $('li:eq(4)').css('background-color','#95a096'); $('li:eq(5)').css('background-color','#ed8d2a'); // 선택된 li의 인덱스값으로 'content'+index 연산으로 // show 될 content를 지정(select)함 $('li').click(function(){ var num=$(this).index()+1; $('.contents').hide(); $('#content'+num).show(); }) }); </script> </head> <body> <div id="tabs"> <ul> <li>Menu A</li> <li>Menu B</li> <li>Menu C</li> <li>Menu D</li> <li>Menu E</li> <li>Menu F</li> </ul> </div> <div id="content"> <div class="contents" id="content1">Content A</div> <div class="contents" id="content2">Content B</div> <div class="contents" id="content3">Content C</div> <div class="contents" id="content4">Content D</div> <div class="contents" id="content5">Content E</div> <div class="contents" id="content6">Content F</div> </div> </body> </html>
slidemenu<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SideMenu.html</title> <style type="text/css"> body{background:royalblue;} a{text-decoration: none; display: block; font-size: 40px; margin:5px 0; color:white; transition:0.5s;} .gnb{position:absolute; top:100px; left:50px;} </style> <script src="script/jquery-3.6.0.js"></script> <script type="text/javascript"> // 메뉴에 마우스가 올라가면 해당 메뉴는 opacity를 1로 변경. // 나머지 메뉴는 0.3으로 변경 // 메뉴 영역에서 마우스가 완전히 빠져나가면 // 모든 메뉴의 opacity를 1로 변경 $(function(){ $('a').mouseenter(function(){ var num=$(this).index(); $('a').css('opacity','0.3'); $('a').eq(num).css('opacity','1'); }); $('div').mouseleave(function(){ $('a').css('opacity','1'); }); }); </script> </head> <body> <div class="gnb"> <a>New arrivals</a> <a>Summer Collection</a> <a>Winter Collection</a> <a>Special Offers</a> <a>Trends</a> </div> </body> </html>
<a> 태그에 갖다대면 해당되는 태그를 제외하고 투명해짐 $(선택자).animate({속성명,값})
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Animate.html</title> <style type="text/css"> div {width:50px; height:50px; margin:3px; background-color: orange; position:relative;} </style> <script src="script/jquery-3.6.0.js"></script> <script type="text/javascript"> // 각 div에 마우스가 올라가면 현재 위치에서 // left 값을 500으로 설정해서 오른쪽으로 이동. // 마우스가 빠져나가면 제자리로 돌아옴. $(function(){ /* $('div').mouseenter(function(){ $(this).animate({left:500},1000); }) $('div').mouseout(function(){ $(this).animate({left:0},1000); }) */ $('div').hover( // mouseenter와 mouseout 동시 이벤트 function(){$(this).animate({left:500},1000);}, function(){$(this).animate({left:0},1000);} ); // $(this).css('left','500px'); // 자체적 transition-duration이 없음 }); </script> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </body> </html>
해당<div>에 마우스를 갖다대면 animate가 작동됨 'VScode > JQuery' 카테고리의 다른 글
[JQuery] image (0) 2022.09.09 [JQuery] button, effect (0) 2022.09.09 [JQuery] event (0) 2022.09.09 [JQuery] DOM (0) 2022.09.09 [JQuery] 속성/필터선택자, 배열 (0) 2022.09.09