We Keep Coding

VueJs: Responsive NavBar - 'ToggleButton' does not show elements?

I'm building a single page application in VueJs, and to this i would like to add a responsive NavBar.
Whatever i try and do, it simply dosen't work.
I've tried many solution, the closest i get to my goal is the following:
HTML
<template>
<header>
<nav class="navbar">
<img style="width: 100px; border-radius: 50%;" src="../.." alt="Name here">
Name
<ul class="nav-menu">
<li class="nav-item custom-header-li">
<RouterLink class="custom-header-menu-text" to="#">1</RouterLink>
</li>
<li class="nav-item custom-header-li">
<RouterLink class="custom-header-menu-text" to="#">2</RouterLink>
</li>
<li class="nav-item custom-header-li">
<RouterLink class="custom-header-menu-text" to="#">3</RouterLink>
</li>
<li class="nav-item custom-header-li">
<RouterLink class="custom-header-menu-text" to="#">4</RouterLink>
</li>
<li class="nav-item custom-header-li">
<RouterLink class="custom-header-menu-text" to="#">5</RouterLink>
</li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
</header>
</template>
CSS
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
header {
background-color: #ffffff;
}
.custom-header-li {
list-style: none;
}
.navbar {
min-height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
}
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
gap: 60px;
}
.nav-branding {
text-align: center;
}
.nav-link {
transition: 0.7s ease;
}
.nav-link:hover {
border-bottom: 3px solid #080808;
font-size: 20px;
transition: 0.5s;
color: #080808;
}
.hamburger {
display: none;
cursor: pointer;
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: #080808;
}
#media(max-width:767px) {
.hamburger {
display: block;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
.nav-menu {
position: fixed;
left: -100%;
top: 70px;
gap: 0;
flex-direction: column;
background-color: #080808;
width: 100%;
text-align: center;
transition: 0.3s;
}
.nav-item {
margin: 16px 0;
}
.nav-menu:active {
left: 0;
}
}
</style>
JS
<script>
export default {
setup() {
window.addEventListener("click", function(event){
const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");
hamburger.classList.toggle("active");
navMenu.classList.toggle("active");
})
}
}
</script>
I tried printing, and see that the class changes to 'active' and it does - even the icon changes view, but the list dosen't show up ?
Can anyone see what's wrong with the code?
I've also tried this solution for Vue: https://codepen.io/raphaelbensimon/pen/VGbLed (Excluded the loader/spinner)
Here the problem is that the 'ToggleIcon' just dosen't show up, at all!
Can someone please help? :D

Just make a change in your css to:
.nav-menu.active {
left: 0;
}
It's work. Testing

HTML drop-down menu with icons and text

I have taken over the code from this post. As I have explained there, I have basically no HTML knowledge, yet I have this HTML part of my project that I have to finish.
So, the code creates a bar with a drop-down menu, but I want to extend it to have an icon next to the names. I have looked at these examples but I can't figure out how to combine them. Is there someone who could help?
const projectsTab = document.getElementById('projects')
const tabName = projectsTab.querySelector('.tab-name')
const projectLinks = document.querySelector('.project-links')
projectsTab.addEventListener('click', e => {
const isOpen = projectLinks.classList.contains('open')
if (isOpen) projectLinks.classList.remove('open')
else projectLinks.classList.add('open')
})
// link event listeners
const links = [...projectLinks.children] // turn this into an array
links.forEach(link => link.addEventListener('click', e => {
tabName.innerText = link.innerText
}))
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Segoe UI', sans-serif;
}
nav {
position: fixed;
width: 100%;
height: 50px;
background: #222;
top: 0;
left: 0;
color: white;
display: flex;
}
nav>* {
flex: 1;
}
#logo {
padding-left: 20px;
font-size: 30px;
text-transform: uppercase;
letter-spacing: 2px;
display: flex;
justify-content: flex-start;
align-items: center;
}
nav ul {
display: flex;
list-style: none;
height: 100%;
}
nav ul li {
position: relative;
flex: 1;
background: #222;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: 0.2s;
}
nav ul li:hover {
background: #555;
}
.project-links {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
left: 0;
top: 100%;
width: 100%;
background-color: white;
color: black;
/* This is the height of this div + height of the nav bar */
transform: translateY(-135%);
transition: 0.2s;
z-index: -1;
}
.project-links.open {
transform: translateY(0);
}
.project-link {
height: 50px;
display: flex;
align-items: center;
padding-left: 20px;
text-decoration: none;
color: white;
cursor: pointer;
transition: 0.2s;
background: #222;
color: white;
}
.project-link:hover {
background: #555;
}
<nav>
<div id="logo">Logo</div>
<ul>
<li>About</li>
<li id="projects">
<span class="tab-name">Projects</span>
<div class="project-links">
<a class="project-link" href="#">Link 1</a>
<a class="project-link" href="#">Link 2</a>
<a class="project-link" href="#">Link 3</a>
</div>
</li>
<li>Contact</li>
</ul>
</nav>

Assuming you want to use Font Awesome icons, just add the proper i tag referencing the right icon beside the text in the corresponding a tags.
const projectsTab = document.getElementById('projects')
const tabName = projectsTab.querySelector('.tab-name')
const projectLinks = document.querySelector('.project-links')
projectsTab.addEventListener('click', e => {
const isOpen = projectLinks.classList.contains('open')
if (isOpen) projectLinks.classList.remove('open')
else projectLinks.classList.add('open')
})
// link event listeners
const links = [...projectLinks.children] // turn this into an array
links.forEach(link => link.addEventListener('click', e => {
tabName.innerText = link.innerText
}))
document.addEventListener("click", e => {
if(!projectsTab.contains(e.target)){
projectLinks.classList.remove("open");
}
})
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Segoe UI', sans-serif;
}
nav {
position: fixed;
width: 100%;
height: 50px;
background: #222;
top: 0;
left: 0;
color: white;
display: flex;
}
nav>* {
flex: 1;
}
#logo {
padding-left: 20px;
font-size: 30px;
text-transform: uppercase;
letter-spacing: 2px;
display: flex;
justify-content: flex-start;
align-items: center;
}
nav ul {
display: flex;
list-style: none;
height: 100%;
}
nav ul li {
position: relative;
flex: 1;
background: #222;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: 0.2s;
}
nav ul li:hover {
background: #555;
}
.project-links {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
left: 0;
top: 100%;
width: 100%;
background-color: white;
color: black;
/* This is the height of this div + height of the nav bar */
transform: translateY(-135%);
transition: 0.2s;
z-index: -1;
}
.project-links.open {
transform: translateY(0);
}
.project-link {
height: 50px;
display: flex;
align-items: center;
padding-left: 20px;
text-decoration: none;
color: white;
cursor: pointer;
transition: 0.2s;
background: #222;
color: white;
}
.project-link:hover {
background: #555;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<nav>
<div id="logo">Logo</div>
<ul>
<li>About</li>
<li id="projects">
<span class="tab-name">Projects</span>
<div class="project-links">
<a class="project-link" href="#"><i class="fa fa-envelope"></i> Link 1</a>
<a class="project-link" href="#"><i class="fa fa-envelope"></i> Link 2</a>
<a class="project-link" href="#"><i class="fa fa-envelope"></i> Link 3</a>
</div>
</li>
<li>Contact</li>
</ul>
</nav>
To close the dropdown when the user clicks elsewhere, add an event listener for click and check whether the target is a subchild of projectsTab.

Since your dropdown menu elements are already flex containers, you can simply add an image at the beginning of each of them, give them a class (icon) and change a bit the padding. Here I put icon { padding: 3px; } and I removed the 20px padding at the beginning of menu elements, because it squished the images against the text.
I also added some JavaScript to close the menu when you click elsewhere.
const projectsTab = document.getElementById('projects')
const tabName = projectsTab.querySelector('.tab-name')
const projectLinks = document.querySelector('.project-links')
projectsTab.addEventListener('click', e => {
const isOpen = projectLinks.classList.contains('open')
if (isOpen) projectLinks.classList.remove('open')
else projectLinks.classList.add('open')
})
addEventListener('click', e => {
var target = e.target;
if (!(target.classList.contains('project-link') || target.classList.contains('project-link') || target.classList.contains('tab-name') || target.id == "projects")) {
projectLinks.classList.remove('open');
} else {
e.stopPropagation();
}
});
// link event listeners
const links = [...projectLinks.children] // turn this into an array
links.forEach(link => link.addEventListener('click', e => {
tabName.innerText = link.innerText
}))
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Segoe UI', sans-serif;
}
nav {
position: fixed;
width: 100%;
height: 50px;
background: #222;
top: 0;
left: 0;
color: white;
display: flex;
}
nav>* {
flex: 1;
}
#logo {
padding-left: 20px;
font-size: 30px;
text-transform: uppercase;
letter-spacing: 2px;
display: flex;
justify-content: flex-start;
align-items: center;
}
nav ul {
display: flex;
list-style: none;
height: 100%;
}
nav ul li {
position: relative;
flex: 1;
background: #222;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: 0.2s;
}
nav ul li:hover {
background: #555;
}
.project-links {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
left: 0;
top: 100%;
width: 100%;
background-color: white;
color: black;
/* This is the height of this div + height of the nav bar */
transform: translateY(-135%);
transition: 0.2s;
z-index: -1;
}
.project-links.open {
transform: translateY(0);
}
.project-link {
height: 50px;
display: flex;
align-items: center;
padding-left: 5px;
text-decoration: none;
color: white;
cursor: pointer;
transition: 0.2s;
background: #222;
color: white;
}
.project-link:hover {
background: #555;
}
.icon {
padding-right: 3px;
}
<nav>
<div id="logo">Logo</div>
<ul>
<li>About</li>
<li id="projects">
<span class="tab-name">Projects</span>
<div class="project-links">
<a class="project-link" href="#"><img class="icon" src="http://lorempixel.com/20/20/cats/">Link 1</a>
<a class="project-link" href="#"><img class="icon" src="http://lorempixel.com/20/20/cats/">Link 2</a>
<a class="project-link" href="#"><img class="icon" src="http://lorempixel.com/20/20/cats/">Link 3</a>
</div>
</li>
<li>Contact</li>
</ul>
</nav>

This is actually pretty easy just like the example you linked to first add the link to the icon library inside the <head></head> tag of your html:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
then add the <i/> tag inside the <a></a> tag of your drop down. Your html code should look like so
<nav>
<div id="logo">Logo</div>
<ul>
<li>About</li>
<li id="projects">
<span class="tab-name">Projects</span>
<div class="project-links">
<a class="project-link" href="#"><i class="fa fa-home"/>Link 1</a>
<a class="project-link" href="#"><i class="fa fa-search"/>Link 2</a>
<a class="project-link" href="#"><i class="fa fa-globe"/>Link 3</a>
</div>
</li>
<li>Contact</li>
</ul>
</nav>

Javascript event listener overwrites another event listener

so I am trying to create a multilevel navigation for a mobile device and I am running into some issues. I am still learning javascript so please bare with me. Here is a link to the codepen:
https://codepen.io/maciekmat/pen/yLepYKq
So when you press the menu in the top right, a menu will open down. Then I would like to be able to go into sub categories. For example click Test Open, .active class will be assigned, and another menu slides in. Now I would like to have a go back button that essentially removes the .active class.
However what I think is happening, the event listener listens to the whole parent, and anywhere you click inside the subnavigation, it registers it as a click, and runs the .active class. When I click to go back, its like .active is removed and applied back instantly. Any help please?
I tried doing the event.currentEvent !== event.target if statement but had no luck
const nav = document.getElementById('menuIcon')
const dropdown = document.getElementById('menuDropdown')
nav.addEventListener('click', function() {
dropdown.classList.toggle('nav-is-toggled')
});
const grabNavLinks = document.querySelectorAll('.sub-nav-link');
const grabBackLinks = document.querySelectorAll('.nav-link.back');
const subNavLinks = Array.from(grabNavLinks);
const backLinks = Array.from(grabBackLinks);
for (let i = 0; i < subNavLinks.length; i++) {
subNavLinks[i].addEventListener("click", function() {
this.querySelector('.sub-nav').classList.add('active');
});
}
for (let i = 0; i < backLinks.length; i++) {
backLinks[i].addEventListener("click", function() {
document.querySelector('.sub-nav').classList.remove('active');
});
}
#import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400;600;700&display=swap");
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: "Open sans", sans-serif;
background: #F9F9F9;
box-sizing: border-box;
}
a, p, h1, h2, h3 {
margin: 0;
padding: 0;
text-decoration: none;
}
ul, li {
padding: 0;
margin: 0;
}
header {
background: white;
padding: 24px 30px;
display: flex;
flex-direction: column;
z-index: 10;
position: relative;
}
.top-nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.top-nav .logo {
background: url("images/tcb-logo-brand.svg") no-repeat;
width: 150px;
height: 50px;
background-size: contain;
background-position: center;
}
.top-nav .navigation {
display: flex;
justify-content: space-between;
width: 132px;
height: 26px;
}
.top-nav .navigation .nav-item {
width: 23px;
height: 26px;
margin-left: 10px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.top-nav .navigation .nav-item.menu {
background-image: url("images/menu-icon.svg");
}
.top-nav .navigation .nav-item.notification {
background-image: url("images/bell-icon.svg");
}
.top-nav .navigation .nav-item.my-account {
background-image: url("images/acc-icon.svg");
}
.search {
margin-top: 16px;
}
.search input[type=search] {
outline: none;
border: none;
background: #F6F6F6;
width: 100%;
height: 50px;
font-size: 16px;
padding: 10px 0 10px 20px;
background-image: url("images/search-icon.svg");
background-repeat: no-repeat;
background-position: right 15px top 50%;
}
.search input[type=search]::placeholder {
color: #B7B7B7;
}
span.nav-title {
display: none;
}
nav.main-nav {
width: 100%;
background: #F6F6F6;
transform: translateY(-100%);
z-index: 0;
position: relative;
transition: all 0.3s ease-in-out;
position: absolute;
padding-bottom: 50px;
overflow: hidden;
}
nav.main-nav ul {
padding-top: 2px;
position: relative;
}
nav.main-nav li {
list-style: none;
}
nav.main-nav a {
color: #6D6D6D;
font-size: 16px;
width: 100%;
height: 100%;
display: block;
padding: 18px 30px;
border-bottom: 1px solid #E9E9E9;
}
nav.main-nav li.nav-link.arrow {
background: url("images/right-arrow.svg") no-repeat;
background-position: right 30px top 50%;
}
nav.main-nav ul.sub-nav {
background: #cecece;
width: 100%;
display: flex;
flex-direction: column;
transform: translateX(100%);
overflow: hidden;
visibility: hidden;
opacity: 0;
position: absolute;
top: 0;
left: 0;
transition: transform 0.2s ease;
}
.sub-nav-link > .sub-nav.active {
transform: translateX(0);
visibility: visible;
opacity: 1;
}
nav.nav-is-toggled {
position: static;
opacity: 1;
transform: translateY(0);
transition: all 0.3s ease-in-out;
}
<header>
<div class="top-nav">
<div class="logo"></div>
<div class="navigation">
<div id="menuIcon" class="nav-item menu">test</div>
<div class="nav-item notification"></div>
<div class="nav-item my-account"><span class="nav-title">My Account</span></div>
</div>
</div>
<div class="search">
<input type="search" name="search" id="search" placeholder="Search by store...">
</div>
</header>
<nav id="menuDropdown" class="main-nav">
<ul class="main-nav-ul">
<li class="nav-link">Test</li>
<li class="nav-link arrow sub-nav-link">Test Open
<ul class="sub-nav">
<li class="nav-link back">Go Back</li>
<li class="nav-link">Test</li>
<li class="nav-link">Test</li>
<li class="nav-link">Test</li>
</ul>
</li>
<li class="nav-link">Test</li>
<li class="nav-link">Test</li>
<li class="nav-link arrow sub-nav-link">Test Open
<ul class="sub-nav">
<li class="nav-link back">Go Back</li>
<li class="nav-link">Test</li>
<li class="nav-link">Test</li>
</ul>
</li>
<li class="nav-link">Test</li>
</ul>
</nav>
<script src="navigation.js"></script>

Go read on event bubbling and how it bubbles through the DOM tree. However due to the way it passes from parent to child (that's it bubbles down the tree) you should call event.stopPropagation(); So that the previous event doesnt bubble into the backLinks event listener.
This is what you should do
for (let i = 0; i < backLinks.length; i++) {
backLinks[i].addEventListener("click", function(event) {
event.stopPropagation();
document.querySelector('.sub-nav').classList.remove('active');
});
}

Javascript menu on click

I have a div with an image and a hidden navbar inside it. When i click on the div i want it to show the hidden menu but for some reason it doesnt work. Ideally, i would like the navbar to slide out from the right but at the moment just want it to appear wehn I click the button.
The menu is hidden using display: none; and i tried to get it to reapper using the javascript .style but for some reason it will not work.
My Code
var menu = document.querySelectorAll(".navigation-mobile");
function onMenuClick() {
menu.style.display = "inline";
}
.navigation-mobile {
display: none;
list-style-type: none;
width: 300px;
overflow: hidden;
float: right;
position: relative;
z-index: 1;
background-color: #2a3b4d;
height: 100%;
top: -20px;
padding-left: 0;
}
.navigation-mobile a:hover {
text-decoration: none;
}
.nav-elements-mobile {
font-family: 'Lato', sans-serif;
font-size: 16px;
padding: 10px;
padding-left: 0;
padding-bottom: 20px;
padding-top: 20px;
border-bottom: 1px solid white;
padding-left: 10px;
}
a .nav-elements-mobile {
display: block;
color: #ffffff;
width: 300px;
}
a .nav-elements-mobile:hover {
background-color: #243342;
}
.mobile-nav-button {
display: none;
position: relative;
top: 15px;
right: 25px;
width: 35px;
height: 35px;
float: right;
}
#menu-icon {
width: 30px;
height: 30px;
}
.mobile-nav-button:hover {
cursor: pointer;
}
#media screen and (max-width: 1040px) {
.navigation {
display: none;
}
.mobile-nav-button {
display: inline;
}
}
<div class="mobile-nav-button" onclick="onMenuClick();">
<img id="menu-icon" src="Images/Home Page/MenuButton.png" />
<ul class="navigation-mobile">
<a href="">
<li class="nav-elements-mobile">Home</li>
</a>
<a href="">
<li class="nav-elements-mobile">Find a Team</li>
</a>
<a href="">
<li class="nav-elements-mobile">Contact Us</li>
</a>
<a href="">
<li class="nav-elements-mobile">Gallery</li>
</a>
<a href="">
<li class="nav-elements-mobile">Forms</li>
</a>
</ul>
</div>

document.querySelectorAll returns you node list of all the matching elements. And there is no any property of style on the node list. What you need is document.querySelector which will return you just the first matching node and you can apply style properties to hide, show or whatever.
Or you can use document.querySelectorAll(selector)[0] to get the first selector if you want
ps. If you want to add the sliding effect. It would be easy with jquery. Just replace the menue.style.display=block with $(".navigation-mobile").slideDown() and that should give you sliding affect
var menu = document.querySelector(".navigation-mobile");
function onMenuClick() {
menu.style.display = "block";
}
.navigation-mobile {
display: none;
list-style-type: none;
width: 300px;
overflow: hidden;
float: right;
position: relative;
z-index: 1;
background-color: #2a3b4d;
height: 300px;
top: -20px;
padding-left: 0;
}
.navigation-mobile a:hover {
text-decoration: none;
}
.nav-elements-mobile {
font-family: 'Lato', sans-serif;
font-size: 16px;
padding: 10px;
padding-left: 0;
padding-bottom: 20px;
padding-top: 20px;
border-bottom: 1px solid white;
padding-left: 10px;
}
a .nav-elements-mobile {
display: block;
color: #ffffff;
width: 300px;
}
a .nav-elements-mobile:hover {
background-color: #243342;
}
.mobile-nav-button {
display: none;
position: relative;
top: 15px;
right: 25px;
width: 35px;
height: 35px;
float: right;
}
#menu-icon {
width: 30px;
height: 30px;
}
.mobile-nav-button:hover {
cursor: pointer;
}
#media screen and (max-width: 1040px) {
.navigation {
display: none;
}
.mobile-nav-button {
display: inline;
}
}
<div class="mobile-nav-button" onclick="onMenuClick();">
<img id="menu-icon" src="Images/Home Page/MenuButton.png" />
<ul class="navigation-mobile">
<a href="">
<li class="nav-elements-mobile">Home</li>
</a>
<a href="">
<li class="nav-elements-mobile">Find a Team</li>
</a>
<a href="">
<li class="nav-elements-mobile">Contact Us</li>
</a>
<a href="">
<li class="nav-elements-mobile">Gallery</li>
</a>
<a href="">
<li class="nav-elements-mobile">Forms</li>
</a>
</ul>
</div>

Additional Navigation bar on click

I have a navigation bar with the section "Contracts" and I was wondering if it were possible, and how would I go about adding an additional navigation bar to expand underneath when this button is tagged, (For example, on the Apple Store site, when you click a product, this adds another bar)
I can provide my entire CSS style sheet if needed! I think this will require JavaScript but I'm trying to keep it as pure CSS for now!
All help is greatly appreciated!
HTML Code: This is the Navigation HTML
<header>
<div class="title">
<img src="img/logo2.png"/>
</div>
<div class="navbar">
<ul>
<li style="float: left">Home</li>
<li>Contracts</li>
<li>About Us</li>
<li>Other</li>
<li> Release Notes</li>
<li> <a target="_blank" href="http://www.phpartnership.com">Pinnacle Health Partnership</a></li>
</ul>
</div>
</header>
Creates this
CSS Code: My entire stylesheet
body {
background-color: #fff;
margin: 0;
font-family: Arial;
color: #333;
}
header {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar {
display: block;
text-align: center;
}
.navbar ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
}
.navbar li {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.navbar li:before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
bottom: 0;
background: white;
height: 4px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.navbar li:hover:before, navbar li:focus:before, .navbar li:active:before {
left: 0;
right: 0;
}
.navbar li a {
padding: 25px;
display: block;
height: 100%;
color: white;
text-decoration: none;
}
.title {
height: 80px;
padding: 2px;
background-color: #fff;
}
.container {
margin-top: 150px;
padding-top: 50px;
}
.home {
margin-top: 10px;
text-align: center;
padding: 40px !important;
}
.wrap {
width: 100%;
margin: 0 auto;
}
.left_col {
float: left;
width: 50%;
}
.right_col {
float: right;
width: 50%;
}
.right_col img {
width: 80%;
margin-top: 50px;
border: 2px solid black;
border-radius: 5px;
}
.left_col img {
width: 80%;
margin-top: 50px;
border: 2px solid black;
border-radius: 5px;
}
This is the JavaScript I tried to use to hide and show the div on click
<script>
$(index.php).ready(function(){
``$("#contract").click(function(){
$("<div class="contracts">").toggle();
});
});
</script>

guess you want smth like this : jsfiddle
first add jQuery to your local environment
use this <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
add it in the head section of your html. for more info check how to install jQuery
added html inside the .navbar
<ul class="aditional">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
added css :
.aditional {
position:absolute;
top:100%;
width:100%;
background:#000;
display:none;
}
.aditional li {
color:#fff;
}
added js :
$('.navbar ul li:nth-child(2) a').click(function() {
$(".aditional").slideToggle()
});
OR if you want a more responsive solution
check this :jsfiddle with target
use data-target on the li a like this
<li>Contracts</li>
<li>About Us</li>
added html :
<ul class="aditional contracts">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
<ul class="aditional aboutus">
<li>about</li>
<li>about</li>
<li>about</li>
<li>about</li>
</ul>
jq added :
$('.navbar ul li a').click(function() {
$(".aditional").slideUp()
var target = '.' + $(this).data('target');
$(target).slideDown();
})
OR u can target the href of the li a. simply add this
<li>Contracts</li>
<li>About Us</li>
------
<ul class="aditional" id ="contract">
....
<ul class="aditional" id ="about">
....
and js :
$('.navbar ul li a').click(function() {
$(".aditional").slideUp()
var target = $(this).attr('href');
$(target).slideDown();
})
see here jsfiddle
one of these solutions should work for you . let me know