페이지 가운데 그리고 화면확대 축소, 윈도우 창 줄이기 늘리면서 축소되지 않게 하려고
display:flex 한곳에다가 정확한 min-width를 줌
자식요소는 >로표현, 자손요소는 공백1칸. 자손으로하게되면 안에있는 모든 같은태그들에 적용되는 위험
메뉴에 호버하면 서브메뉴가 나타나도록하기
(추가로 클릭이랑 마우스 올렸을때 색바뀌는 것도 넣어봤음)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>호버하면 서브메뉴가 나타나도록하는 예제</title>
<script src="../JS/jquery.min.js"></script>
<script>
$(function(){
$('.menu').click(function(){
$(this).children().toggle();
})
$('.menu').hover(function(){
$(this).click();
})
$('.menulist').mouseover(function(){
$(this).css('background','lightyellow');
})
$('.menulist').mouseout(function(){
$(this).css('background','white');
})
})
</script>
<style>
*{margin: 0; padding: 0; color:black; text-decoration: none; list-style: none;}
.menubar{height: 50px; display: flex; background: cornsilk; padding: 10px 10px; min-width: 700px}
.menu{background-color: brown; width: calc(100% / 3); line-height: 50px; text-align: center;
font-size: 30px; font-weight: bold; cursor: pointer; color: white;}
.sub-menu{ display: none;}
.menulist{height: 40px; border: 1px solid brown; position: relative; background: white;}
.menulist:nth-child(1),.menulist:nth-child(2){border-bottom: none;}
.menulist:nth-child(1){border-top: none;}
.bar2{margin:0px 10px;}
.menulist a{
height: 40px;font-size: 20px; line-height: 40px; position: absolute; width: 100%; left: 0;
text-shadow:1px 0px blueviolet; color: black;}
</style>
</head>
<body>
<section>
<header class="menubar">
<div class="menu bar1">메뉴1
<ul class="sub-menu box1">
<li class="menulist"><a href="#">가</a></li>
<li class="menulist"><a href="#">나</a></li>
<li class="menulist"><a href="#">다</a></li>
</ul>
</div>
<div class="menu bar2">메뉴2
<ul class="sub-menu box2">
<li class="menulist"><a href="#">가</a></li>
<li class="menulist"><a href="#">나</a></li>
<li class="menulist"><a href="#">다</a></li>
</ul>
</div>
<div class="menu bar3">메뉴3
<ul class="sub-menu box3">
<li class="menulist"><a href="#">가</a></li>
<li class="menulist"><a href="#">나</a></li>
<li class="menulist"><a href="#">다</a></li>
</ul>
</div>
</header>
</section>
</body>
</html>
구조는 거의 비슷한 상태에서 쌤은 hover호버를 toggle이용해서 한 줄로 끝냄
<script>
$(function(){
$('.main-menu>li').hover(function(){
$(this).find('.sub-menu').toggle();
})
})
</script>'괴발개발 > Javascript+JQuery' 카테고리의 다른 글
| JQ_게시글에 댓글달기 기능예제 (0) | 2021.07.01 |
|---|---|
| JQ_정규표현식 예제 (0) | 2021.07.01 |
| JQ_split(), 박스클릭선택,박스입력선택 등 (0) | 2021.06.30 |
| JQ_다음에서 제공하는 무료 주소찾기창 서비스 (0) | 2021.06.30 |
| JQ_부모창, 자식창(window.open)으로 데이터 주고받기 (0) | 2021.06.30 |