Responsive Navigations Menu With HTML, CSS and JavaScript Get source code for free.
Create Responsive Navigations MenuHTML, CSS and JavaScript. Get source code for free and use it in your project. Watch the video in youtube link will be in the video description . Watch the video in youtube link will be in the video description https://youtu.be/BBrU0r8mFXY via @YouTube
index.html
<html lang="en">
<head>
<!-- INSPIRATIONS -->
<!-- https://konte.uix.store/ -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Side Menu</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navitation" id="menu">
<span id="icon">MENU</span>
<ul id="ulid">
<li><a href="index.html">Home</a></li>
<li><a href="tech.html">Technologies</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="youtube.html">Youtube</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<script src="main.js"></script>
</body>
</html>
<head>
<!-- INSPIRATIONS -->
<!-- https://konte.uix.store/ -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Side Menu</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navitation" id="menu">
<span id="icon">MENU</span>
<ul id="ulid">
<li><a href="index.html">Home</a></li>
<li><a href="tech.html">Technologies</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="youtube.html">Youtube</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<script src="main.js"></script>
</body>
</html>
style.css
*{
margin: 0;
padding: 0;
}
.navitation{
width: 100%;
/* height: 100px; */
background: rgb(51, 43, 51);
overflow: hidden;
font-size: 1.5rem;
}
#icon{
color: white;
display: none;
}
.navitation ul{
text-align: center;
text-transform: uppercase;
}
.navitation li{
list-style: none;
display: inline-block;
text-align: center;
/* margin: 35px 5px; */
padding: 35px 10px;
}
.navitation li:hover{
cursor: pointer;
background: rgb(22, 20, 22);
}
.navitation a{
/* margin-top: 50px; */
text-decoration: none;
color: rgb(255, 255, 255);
}
@media (max-width:768px){
#icon{
display: block;
margin: 25px 0 20px 25px;
}
#ulid{
display: none;
}
}
margin: 0;
padding: 0;
}
.navitation{
width: 100%;
/* height: 100px; */
background: rgb(51, 43, 51);
overflow: hidden;
font-size: 1.5rem;
}
#icon{
color: white;
display: none;
}
.navitation ul{
text-align: center;
text-transform: uppercase;
}
.navitation li{
list-style: none;
display: inline-block;
text-align: center;
/* margin: 35px 5px; */
padding: 35px 10px;
}
.navitation li:hover{
cursor: pointer;
background: rgb(22, 20, 22);
}
.navitation a{
/* margin-top: 50px; */
text-decoration: none;
color: rgb(255, 255, 255);
}
@media (max-width:768px){
#icon{
display: block;
margin: 25px 0 20px 25px;
}
#ulid{
display: none;
}
}
main.js
const menu = document.getElementById('menu');
const ul = menu.querySelectorAll('ul');
const ulid = document.getElementById('ulid');
const li = menu.querySelectorAll('li');
const icon = document.getElementById('icon');
console.log(li);
if (window.innerWidth <= 768) {
icon.addEventListener('click', e => {
if(icon.textContent == "MENU"){
console.log('menu button is working');
ulid.style.display = 'block';
icon.textContent = 'CLOSE';
stylingElements();
isOpen = false;
}else{
console.log('close button is working');
icon.textContent = 'MENU';
menu.style.height = '72px';
ulid.style.display = 'none';
}
});
function stylingElements() {
menu.style.height = '1024px';
ul.forEach(element => {
element.style.textAlign = 'left';
element.style.height = '100%';
element.style.fontSize = '1rem';
element.style.background = 'rgb(51, 43, 51)';
});
li.forEach(element => {
element.style.display = 'block';
element.style.textAlign = 'left';
element.style.margin = '15px 0 0 15px';
});
}
}
const ul = menu.querySelectorAll('ul');
const ulid = document.getElementById('ulid');
const li = menu.querySelectorAll('li');
const icon = document.getElementById('icon');
console.log(li);
if (window.innerWidth <= 768) {
icon.addEventListener('click', e => {
if(icon.textContent == "MENU"){
console.log('menu button is working');
ulid.style.display = 'block';
icon.textContent = 'CLOSE';
stylingElements();
isOpen = false;
}else{
console.log('close button is working');
icon.textContent = 'MENU';
menu.style.height = '72px';
ulid.style.display = 'none';
}
});
function stylingElements() {
menu.style.height = '1024px';
ul.forEach(element => {
element.style.textAlign = 'left';
element.style.height = '100%';
element.style.fontSize = '1rem';
element.style.background = 'rgb(51, 43, 51)';
});
li.forEach(element => {
element.style.display = 'block';
element.style.textAlign = 'left';
element.style.margin = '15px 0 0 15px';
});
}
}
No comments: