Toggle Nav-bar
VISHNU VISHWAKARMA
"ENABLING DEVELOPERS TO EXCEL IN THE WORLD OF CANISTER SMART CONTRACT DEVELOPMENT."
// you can toggle anything by adding or removing classes
JS required?:-( code written in?bold)
// classList — shows/gets all classes
// contains — checks classList for specific class
// add — add class
// remove — remove class
// toggle — toggles class
let socialIcons = document.querySelector(‘?.social-icons’)
let navCenter = document.querySelector(‘.nav-center’)
let navHeader = document.querySelector(‘.nav-header’)
let navToggle = document.querySelector(‘.nav-toggle’)
let links = document.querySelector(‘?.links’)
console.log(links.classList)
console.log(navToggle.classList)
// if yoou want to check classlist use queryselector
// you can toggle anything by adding or removing classes
// our concern is nav toggle and links
// we css link element height 0 and there is another class of name showlink?, if i will add this class to link class it start displaying
// i am going to add an event listener on toggle button if click on it will display link items
navToggle.addEventListener(‘click’,function(){
?
// links.classList.add(‘show-links’)
?// if(links.classList.add(‘show-links’)){
?// links.classList.remove(‘show-links’)
?// }else{
?// links.classList.add(‘show-links’)
?// we can remove all line by using toggle keyword}
?
?links.classList.toggle(‘show-links’)
})
HTML required:-
<!DOCTYPE html>
<html>
<head>
?<meta charset=”utf-8">
?<meta name=”viewport” content=”width=device-width”>
?<title>replit</title>
?<! — font-awesome →
?<link
?rel=”stylesheet”
?/>
?<! — styles →
?<link href=”style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
?
?
?<nav>
?<div class=”nav-center”>
?<! — nav header →
?<div class=”nav-header”>
?<img src=”./logo.svg” class=”logo” alt=”logo” />
?<button class=”nav-toggle”>
?<i class=”fas fa-bars”></i>
?</button>
?</div>
?<! — links →
?<ul class=”links “>
?<li>
?<a href=”index.html”>home</a>
?</li>
?<li>
?<a href=”about.html”>about</a>
?</li>
?<li>
?<a href=”projects.html”>projects</a>
?</li>
?<li>
?<a href=”contact.html”>contact</a>
?</li>
?</ul>
?<! — social media →
?<ul class=”social-icons”>
?<li>
?<a href=”https://www.twitter.com”>
?<i class=”fab fa-facebook”></i>
?</a>
?</li>
?<li>
?<a href=”https://www.twitter.com”>
?<i class=”fab fa-twitter”></i>
?</a>
?</li>
?<li>
?<a href=”https://www.twitter.com”>
?<i class=”fab fa-behance”></i>
?</a>
?</li>
?<li>
?<a href=”https://www.twitter.com">
?<i class=”fab fa-linkedin”></i>
?</a>
?</li>
?<li>
?<a href=”https://www.twitter.com”>
?<i class=”fab fa-instagram"></i>
?</a>
?</li>
?</ul>
?</div>
?</nav>
?
?<! — javascript →
?
?<script src=”script.js”></script>
<script src=”https://replit.com/public/js/replit-badge.js" theme=”blue” defer></script>
</body>
</html>
CSS required:-
::after,
::before {
?margin: 0;
?padding: 0;
?box-sizing: border-box;
}
body {
?font-family: var( — ff-secondary);
?background: var( — clr-grey-10);
?background-color?: green;
?color: var( — clr-grey-1);
?line-height: 1.5;
?font-size: 0.875rem;
}
ul {
?list-style-type: none;
}
a {
?text-decoration: none;
}
h1,
h2,
h3,
h4 {
?letter-spacing: var( — spacing);
?text-transform: capitalize;
?line-height: 1.25;
?margin-bottom: 0.75rem;
?font-family: var( — ff-primary);
}
h1 {
?font-size: 3rem;
}
h2 {
?font-size: 2rem;
领英推荐
}
h3 {
?font-size: 1.25rem;
}
h4 {
?font-size: 0.875rem;
}
p {
?margin-bottom: 1.25rem;
?color: var( — clr-grey-5);
}
@media screen and (min-width: 800px) {
?h1 {
?font-size: 4rem;
?}
?h2 {
?font-size: 2.5rem;
?}
?h3 {
?font-size: 1.75rem;
?}
?h4 {
?font-size: 1rem;
?}
?body {
?font-size: 1rem;
?}
?h1,
?h2,
?h3,
?h4 {
?line-height: 1;
?}
}
/* global classes */
/* section */
.section {
?padding: 5rem 0;
}
.section-center {
?width: 90vw;
?margin: 0 auto;
?max-width: 1170px;
}
@media screen and (min-width: 992px) {
?.section-center {
?width: 95vw;
?}
}
main {
?min-height: 100vh;
?display: grid;
?place-items: center;
}
/*
===============?
Navbar
===============
*/
nav {
?background: var( — clr-white);
?box-shadow: var( — light-shadow);
}
.nav-header {
?display: flex;
?align-items: center;
?justify-content: space-between;
?padding: 1rem;
}
.nav-toggle {
?font-size: 1.5rem;
?color: var( — clr-primary-5);
?background: transparent;
?border-color: transparent;
?transition: var( — transition);
?cursor: pointer;
}
.nav-toggle:hover {
?color: var( — clr-primary-1);
?transform: rotate(90deg);
}
.logo {
?height: 40px;
}
?.links a{
?color: var( — clr-grey-3);
?font-size: 1rem;
?text-transform: capitalize;
?letter-spacing: var( — spacing);
?display: block;
?padding: 0.5rem 1rem;
?transition: var( — transition);
}
.links a:hover {
?background: var( — clr-primary-8);
?color: var( — clr-primary-5);
?padding-left: 1.5rem;
}
.social-icons {
?display: none;
}
.links {
?height: 0;
?overflow: hidden;
?transition: var( — transition);
}
.show-links {
?height: 10rem;
}
@media screen and (min-width: 800px) {
?.nav-center {
?max-width: 1170px;
?margin: 0 auto;
?display: flex;
?align-items: center;
?justify-content: space-between;
?padding: 1rem;
?}
?.nav-header {
?padding: 0;
?}
?.nav-toggle {
?display: none;
?}
?.links {
?height: auto;
?display: flex;
?}
?.links a {
?padding: 0;
?margin: 0 0.5rem;
?}
?.links a:hover {
?padding: 0;
?background: transparent;
?}
?.social-icons {
?display: flex;
?}
?.social-icons a {
?margin: 0 0.5rem;
?color: var( — clr-primary-5);
?transition: var( — transition);
?}
?.social-icons a:hover {
?color: var( — clr-primary-7);
?}
}