Resize Navigation Bar

Developer
Olivier C
Size
2,714 Kb
Views
12,144
  1. Resize Navigation Bar Previews
  2. Resize Navigation Bar HTML Codes
  3. Resize Navigation Bar CSS Codes
  4. Resize Navigation Bar JS Codes

How do I make an resize navigation bar?

What is a resize navigation bar? How do you make a resize navigation bar? This script and codes were developed by Olivier C on 19 November 2022, Saturday.

Resize Navigation Bar Previews
IQ Test

Resize Navigation Bar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Resize Navigation Bar</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="nav resizer"> <ul> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> <button></button>
</nav>
<h1>Resize Navigation Bar</h1> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Resize Navigation Bar - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { margin: 0; color: #222; background-color: Tan; font-family: Arial;
}
h1 { text-align: center; line-height: 3;
}
.nav { position: fixed; top: 0; width: 100%; margin: 0; padding: 0; color: #777; background-color: #292929;
}
.nav button { width: 100%; height: 3em; text-align: center; color: #777; background-color: #222; border: none; outline: none; cursor: pointer;
}
.nav button::after { content: ''; display: block; height: 2px; width: 2em; margin: 0 auto; background: Orange; box-shadow: 0 0.8em 0 Orange, 0 -0.8em 0 Orange;
}
.nav ul { display: none; margin: 0; padding: 0;
}
.nav li { display: block; padding: 0.5em; border-bottom: 1px solid #333;
}
.nav a { color: #777; text-decoration: none;
}

Resize Navigation Bar - Script Codes JS Codes

var nav = $('.resizer');
var navCmd = nav.find('button');
var navContent = nav.find('ul');
navContent.hide();
navCmd.on('click touchstart', function() { if (navContent.is(':visible')) { navContent.slideUp(); } if (!navContent.is(':visible')) { navContent.slideDown(); } return false;
});
Resize Navigation Bar - Script Codes
Resize Navigation Bar - Script Codes
Home Page Home
Developer Olivier C
Username olivier-c
Uploaded November 19, 2022
Rating 3
Size 2,714 Kb
Views 12,144
Do you need developer help for Resize Navigation Bar?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Olivier C (olivier-c) Script Codes
Name
Responsive Masonry in CSS only
Signature
Calendar
Table layout
Parallelogram with background-image
A Pen by Olivier C
Animation full CSS
Graphs
Organizational Chart
Mosaic cubes
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!