Build this neon fullscreen navigation using HTML, CSS and JavaScript
Build this neon fullscreen navigation using HTML, CSS and JavaScript.
Perfect for beginners and frontend developers learning animations.
إنشاء fulls
Build this neon fullscreen navigation using HTML, CSS and JavaScript.
Perfect for beginners and frontend developers learning animations.
إنشاء fullscreen navigation بال html,css and js كود سهل وبسيط جربه عندك مستنى اى
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>dotted-loader</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<span class="icon">
<span></span>
<span></span>
<span></span>
</span>
<nav class="links">
<span class="close">x</span>
<a class="active" href="#">Home</a>
<a href="#">Services</a>
<a href="#">Portfilio</a>
<a href="#">about us</a>
</nav>
<script src="control.js"></script>
</body>
</html>
css
* {
box-sizing: border-box;
}
body {
height: 100vh;
background-color: #050510;
color: #ffffff;
}
.icon {
width: 50px;
height: 50px;
background-color: #eee;
display: flex;
cursor: pointer;
flex-direction: column;
justify-content: space-around;
align-items: center;
padding: 8px;
position: fixed;
}
.icon span {
width: 100%;
background-color: #777;
height: 4px;
transition: 0.5s;
}
.icon:hover span {
background-color: #333;
}
nav {
position: fixed;
top: 0;
left: 0;
display: flex;
z-index: 9999;
width: 100%;
height: 100%;
background-color: #0a0a1a;
flex-direction: column;
justify-content: center;
/* align-items: center; */
transform: translatey(-100%);
transition: 0.5s;
}
nav a {
color: #00eaff;
text-decoration: none;
background-color: #0c0c24;
font-size: 35px;
flex-basis: 80px;
width: 100%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
transition: 0.3s ease;
}
nav a.active {
color: #ff00ff;
background: rgba(255, 0, 255, 0.1);
text-shadow: 0 0 20px #ff00ff;
}
nav a:hover {
color: #00ffaa;
background: rgba(0, 255, 170, 0.08);
text-shadow: 0 0 15px #00ffaa;
}
.links .close {
color: white;
border: 1px solid white;
position: fixed;
top: 20px;
right: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
cursor: pointer;
transition: 0.5s;
}
.links .close:hover {
color: indianred;
border: 1px solid indianred;
}
.open {
transform: translatey(0);
}
.x {
transform: translateX(-100%);
}
javaScript
let open = document.querySelector(".icon");
let close = document.querySelector(".close");
let nav = document.querySelector("nav");
open.onclick = function () {
nav.classList.add("open");
};
close.onclick = function () {
nav.classList.remove("open");
};
شوف الفيديو على القناه
ادخل على القناه هتلاقى تأثيرات ومشاريع كتير front-end developer
