메뉴 개선할 점
1) 기능 수정 및 추가
2) 상/ 하위 메뉴 설정
3) .photo 이미지 잘리는 지점 정리
지금 상태 코드
<!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>PM</title>
<link rel="stylesheet" href="./00_PM.css">
</head>
<body>
<nav>
<div id="horizontal-underline"></div>
<a href="#">About</a>
<a href="#">Menu</a>
<a href="#">Store</a>
<a href="#">PetMeeting</a>
<a href="#">Personal</a>
</nav>
<nav>
<div id="vertical-underline"></div>
<a href="#">About</a>
<a href="#">Menu</a>
<a href="#">Store</a>
<a href="#">PetMeeting</a>
<a href="#">Personal</a>
</nav>
<section>
<h1>START P.M.</h1>
<img class="photo" src="https://i.pinimg.com/564x/7f/b7/56/7fb756260e4a7c7129f3de8881ae9624.jpg">
</section>
<script src="./00_PM.js"></script>
</body>
</html>body{
margin: 0px;
width: 2000px;
}
nav a {
text-decoration: none;
color: black;
margin: 1em;
font-size: 2em;
}
nav:first-child{
display: flex;
justify-content: center;
}
nav:nth-child(2){
display: flex;
flex-direction: column;
align-items: center;
}
#horizontal-underline{
position: absolute;
width: 0;
background-color: teal;
top: 0px;
left: 0px;
height: 4px;
transition: 0.5s;
}
#vertical-underline{
position: absolute;
left:0;
height: 4px;
width: 0;
border-radius: 3px;
transition: 0.5s;
background-color: violet;
top:0;
}
section{
height: 800px;
background: url(https://i.pinimg.com/564x/1c/77/36/1c7736ee034814b51ce3c7e7b2ef2a09.jpg) fixed;
}
.photo{
position: absolute;
top: 400px;
}
h1{
font-size: 6em;
width: 10px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
color: rgb(0, 22, 16);
position: absolute;
top: 80px;
left: 400px;
animation: slide 2s ease-out;
}
@keyframes slide {
from{
left: -100px;
opacity: 0;
}
to {
left: 400px;
opacity: 1;
}
}
@keyframes disappear {
from{
left: 400px;
opacity: 1;
}
to{
left: -100px;
opacity: 0;
}
}let verticalBar = document.getElementById("vertical-underline");
let horizontalBar = document.getElementById("horizontal-underline");
let horizontalMenus = document.querySelectorAll("nav:first-child a");
let verticalMenus = document.querySelectorAll("nav:nth-child(2) a");
function verticalIndicator(e) {
verticalBar.style.left = e.offsetLeft + "px";
verticalBar.style.width = e.offsetWidth + "px";
verticalBar.style.top = e.offsetTop + e.offsetHeight + "px";
}
function horizontalIndicator(e) {
horizontalBar.style.left = e.offsetLeft + "px";
horizontalBar.style.width = e.offsetWidth + "px";
horizontalBar.style.top = e.offsetTop + e.offsetHeight + "px";
}
horizontalMenus.forEach((menu) =>
menu.addEventListener("click", (e) =>
horizontalIndicator(e.currentTarget)
)
);
verticalMenus.forEach((menu) =>
menu.addEventListener("click", (e) => verticalIndicator(e.currentTarget))
);
let mainText = document.querySelector("h1");
window.addEventListener("scroll",function () {
let value = window.scrollY;
console.log("scrollY,value");
if(value>400){
mainText.style.animation="disappear 1s ease-out forward";
}else{
mainText.style.animation="side 1s ease-out"
}
});
참고 자료 제공 '코딩알려주는 누나'님
https://www.youtube.com/watch?v=O54PjSD9BUg
https://www.youtube.com/watch?v=ru5FGYuycwY
참고한 이미지 제공 사이트
Awoo Pet Essentials
Modern eco-friendly essentials for you and your dog.
awoopets.com
저작권 없는 사진 사이트
참고자료 제공 : 랑이언니 [프리랜서 디자이너 신현경]
이미지 검색 & 무료 이미지 - PxHere
pxhere.com
무료이미지, 저작권 없는 이미지, 무료 이미지 사이트 | Pexels
www.pexels.com
아름다운 무료 이미지 및 사진 | Unsplash
어떤 프로젝트를 위해서든 다운로드 및 사용할 수 있는 아름다운 무료 이미지 및 사진입니다. 어떤 로열티 프리 또는 스톡 사진보다 좋습니다.
unsplash.com
Little Visuals
Free, high resolution images. Little Visuals began life as a passion project of Nic Jackson. Tragically, Nic died suddenly in November 2013. Whilst Nic didn’t get the chance to maintain and grow Little Visuals himself, this website remains accessible to
littlevisuals.co
picjumbo: Free Stock Photos
Free stock photos and images for your projects and websites.️ Beautiful 100% free high-resolution stock images with no watermark.
picjumbo.com
DesignersPics - Free Photographs for your commercial and personal works
Free photographs for your personal and commercial use. This includes Websites, Presentations, Brochures/Packaging/labels, HTML/PSD Templates, T-Shirts, Billboards/banners, Decoration in stores/offices/public areas...etc
www.designerspics.com
Gratisography - Free High-Resolution Photos
Hundreds of free high-resolution pictures you can use on your personal and commercial projects, free of copyright restrictions. New photos added every week!
gratisography.com