■ 메뉴바 나오기
<style>
a{
text-decoration: none;
color: inherit;
}
li{
width: 100px;
background-color: beige;
width: 100px;
height: 50px;
align-content: center;
}
.menu{
text-align: center;
}
ul{
list-style: none;
padding: 0;
margin: 0;
}
.menu > ul{
display: flex;
}
.menu> ul>li{
position: relative;
}
.menu > ul > li > ul{
position: absolute;
display: none;
left: 0;
top: 100%;
}
</style>
<body>
<nav class="menu">
<ul>
<li>
<a href="#">1메뉴 1</a>
<ul>
<li><a href="">2메뉴 1</a></li>
<li><a href="">2메뉴 2</a></li>
<li><a href="">2메뉴 3</a></li>
</ul>
</li>
<li>
<a href="#">1메뉴 2</a>
<ul>
<li><a href="">2메뉴 1</a></li>
<li><a href="">2메뉴 2</a></li>
<li><a href="">2메뉴 3</a></li>
</ul>
</li>
<li>
<a href="#">1메뉴 3</a>
<ul>
<li><a href="">2메뉴 1</a></li>
<li><a href="">2메뉴 2</a></li>
<li><a href="">2메뉴 3</a></li>
</ul>
</li>
</ul>
</nav>
<script>
$(".menu > ul >li").mouseover(
function(){
$(this).find("ul").stop().slideDown(200);
}
).mouseout(
function(){
$(this).find("ul").stop().slideUp(200)
}
);
</script>
</body>
○ 자식이 아닌것 나오게 하기
<style>
*{
text-align: center;
}
a{
text-decoration: none;
color: inherit;
}
li{
width: 100px;
background-color: beige;
width: 100px;
height: 50px;
align-content: center;
}
ul{
list-style: none;
padding: 0;
margin: 0;
}
.menu > ul{
display: flex;
}
.in{
display: flex;
position: relative;
}
.in > ul{
display: none;
position: absolute;
left: 0%;
top: 0%;
}
</style>
<body>
<nav class="menu">
<ul>
<li>
<a href="#">1메뉴 1</a>
</li>
<li>
<a href="#">1메뉴 2</a>
</li>
<li>
<a href="#">1메뉴 3</a>
</li>
</ul>
</nav>
<div class="in">
<ul class="in0">
<li><a href="">1-1</a></li>
<li><a href="">1-2</a></li>
<li><a href="">1-3</a></li>
</ul>
<ul class="in1">
<li><a href="">2-1</a></li>
<li><a href="">2-2</a></li>
<li><a href="">2-3</a></li>
</ul>
<ul class="in2">
<li><a href="">3-1</a></li>
<li><a href="">3-2</a></li>
<li><a href="">3-3</a></li>
</ul>
</div>
<script>
$(".menu > ul >li").mouseover(
function(){
$(".in"+$(this).index()).stop().slideDown(200);
$(".in"+$(this).index()).css("display","flex");
}
).mouseout(
function(){
$(".in"+$(this).index()).stop().slideUp(200)
}
);
</script>
■ 메뉴바 모두 나오게 하기
<style>
a{
text-decoration: none;
}
li{
width: 100px;
padding: 10px 0px;
}
.menu{
text-align: center;
}
ul{
list-style: none;
padding: 0;
margin: 0;
}
.menu > ul{
display: flex;
width: 100%;
justify-content: center;
background-color: aqua;
}
.menu> ul>li{
position: relative;
}
.menu > ul > li > ul{
margin-top: 30px;
position: relative;
display: none;
}
</style>
<body>
<nav class="menu">
<ul>
<li>
<a href="#">1메뉴 1</a>
<ul>
<li><a href="">2메뉴 1</a></li>
<li><a href="">2메뉴 2</a></li>
<li><a href="">2메뉴 3</a></li>
</ul>
</li>
<li>
<a href="#">1메뉴 2</a>
<ul>
<li><a href="">2메뉴 1</a></li>
<li><a href="">2메뉴 2</a></li>
<li><a href="">2메뉴 3</a></li>
</ul>
</li>
<li>
<a href="#">1메뉴 3</a>
<ul>
<li><a href="">2메뉴 1</a></li>
<li><a href="">2메뉴 2</a></li>
<li><a href="">2메뉴 3</a></li>
</ul>
</li>
</ul>
</nav>
<script>
$(".menu > ul >li").mouseover(
function(){
$("ul > li > ul").stop().slideDown(200);
}
).mouseout(
function(){
$("ul > li > ul").stop().slideUp(200)
}
);
</script>
</body>
'HTML + CSS > JQuery' 카테고리의 다른 글
| JQuery - 이미지 슬라이드 효과 (0) | 2024.07.10 |
|---|---|
| JQuery - 이미지 페이드 인 아웃 (0) | 2024.07.10 |
| JQuery - 팝업창 나오게 하기 (0) | 2024.07.10 |
| JQuery - 이미지 트렌지션 (0) | 2024.07.10 |
| JQuery 함수 기본 (0) | 2024.06.19 |