Project 3 - Customized Rotating Navigation
About:
In this Blog, We will be designing Customized Navigation. I am implementing this using simple Html, CSS and JavaScript , we are not using any frameworks.
for this, I took my Blog name and Blog description, and also I took image of StoneHenge. You guys can use your own data, colors, styles and content you want.
You can find the source code for this below and I have attached the video of the output for reference.
index.html -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css" />
<title>Customized Rotating Navigation</title>
</head>
<body>
<div class="container">
<div class="circle-container">
<div class="circle">
<button id="close">
<i class="fas fa-times"></i>
</button>
<button id="open">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
<div class="content">
<h1>Mini Projects using HTML, CSS and JavaScript for Beginners and intermediate</h1>
<p>In this Blog, we mainly focus on developing projects purely based on HTML, CSS and
JavaScript. We are not using any frameworks. These projects enhance your CSS and JavaScript
skills and is also useful for real time projects. Basic knowledge on HTML, CSS and JavaScript
is enough for these projects to learn. We will be learning step by step through projects.</p>
<h3>StoneHenge</h3>
<img src="./Assets/StoneHenge.jpg" alt="">
</div>
</div>
<nav>
<ul>
<li><i class="fas fa-home"></i> Home</li>
<li><i class="fas fa-user-alt"></i> About</li>
<li><i class="fas fa-envelope"></i> Contact</li>
</ul>
</nav>
<script src="script.js"></script>
</body>
</html>
style.css -
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
* {
box-sizing: border-box;
}
body {
font-family: 'Lato', sans-serif;
background-color: #333;
color: #222;
overflow-x: hidden;
margin: 0;
}
.container {
background-color: #fafafa;
transform-origin: top left;
transition: transform 0.5s linear;
width: 100vw;
min-height: 100vh;
padding: 50px;
}
.container.show-nav {
transform: rotate(-20deg);
}
.circle-container {
position: fixed;
top: -100px;
left: -100px;
}
.circle {
background-color: #1e279c;
height: 200px;
width: 200px;
border-radius: 50%;
position: relative;
transition: transform 0.5s linear;
}
.container.show-nav .circle {
transform: rotate(-70deg);
}
.circle button {
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
height: 100px;
background: transparent;
border: 0;
font-size: 26px;
color: #fff;
}
.circle button:focus {
outline: none;
}
.circle button#open {
left: 60%;
}
.circle button#close {
top: 60%;
transform: rotate(90deg);
transform-origin: top left;
}
.container.show-nav + nav li {
transform: translateX(0);
transition-delay: 0.3s;
}
nav {
position: fixed;
bottom: 40px;
left: 0;
z-index: 100;
}
nav ul {
list-style-type: none;
padding-left: 30px;
}
nav ul li {
text-transform: uppercase;
color: #fff;
margin: 40px 0;
transform: translateX(-100%);
transition: transform 0.4s ease-in;
}
nav ul li i {
font-size: 20px;
margin-right: 10px;
}
nav ul li + li {
margin-left: 15px;
transform: translateX(-150%);
}
nav ul li + li + li {
margin-left: 30px;
transform: translateX(-200%);
}
.content img {
width:1000px;
height:1000px;
}
.content {
max-width: 1000px;
margin: 50px auto;
}
.content h1 {
margin: 0;
}
.content small {
color: #555;
font-style: italic;
}
.content p {
color: #333;
line-height: 1.5;
}
script.js -
const open = document.getElementById('open')
const close = document.getElementById('close')
const container = document.querySelector('.container')
open.addEventListener('click', () => container.classList.add('show-nav'))
close.addEventListener('click', () => container.classList.remove('show-nav'))
OUTPUT-
Comments
Post a Comment
If you any doubts or Modifications I have to do, let me know.