I have a drop down menu that I want to slide down when the Menu button is clicked and slide up when it's clicked again. Also slide up when clicking anywhere else in the document.
This is what I got so far: jsfiddle
HTML:
<nav>
<a class="dropdown-toggle" href="#" title="Menu">Menu</a>
<ul class="dropdown">
<li>Menu Item</li>
<li>Menu</li>
<li>Settings</li>
<li>Search</li>
</ul>
</nav>
Jquery:
$(function() {
// Dropdown toggle
$('.dropdown-toggle').click(function() {
$(this).next('.dropdown').toggle(function() {
$('.dropdown').stop().animate({
top: '100%'
}, 'slow');
});
});
$(document).click(function(e) {
var target = e.target;
if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle')) {
$('.dropdown').toggle(function() {
$('.dropdown').stop().animate({
top: '-100px'
}, 'slow');
});
}
});
});
The problem with what I did is the animation happens only once and only when clicking to open the drop down menu.
I am not sure if you are aware but there are .slideUp(), .slideDown() and .slideToggle() methods available in jQuery to do this sliding animation up and down business.
Below is the snippet for your reference:
var dropdownToggle = $('.dropdown-toggle');
var dropdown = dropdownToggle.next('.dropdown');
$(function() {
dropdown.slideUp(0);
$(document).on('click', function(e) {
var target = e.target;
if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle')) {
if (dropdown.is(':visible')) {
dropdown.stop(true).slideUp();
}
}
});
dropdownToggle.on('click', function() {
dropdown.stop(true).slideToggle();
});
});
body { padding: 2em; }
a {
text-decoration: none;
color: #000;
}
nav { position: relative; }
.dropdown-toggle {
padding: .5em 1em;
background: #777;
border-radius: .2em .2em 0 0;
}
ul.dropdown {
position: absolute;
top: 100%;
margin-top: .5em;
background: #777;
min-width: 12em;
padding: 0;
border-radius: 0 0 .2em .2em;
}
ul.dropdown li { list-style-type: none; }
ul.dropdown a {
text-decoration: none;
padding: .5em 1em;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<nav><a class="dropdown-toggle" href="#" title="Menu">Menu</a>
<ul class="dropdown">
<li>Menu Item</li>
<li>Menu</li>
<li>Settings</li>
<li>Search</li>
</ul>
</nav>
Notes:
You had CSS transition applied on the same element and you were also trying to apply animation via the use of .animate() method of jQuery on the same element. Both were conflicting each other. I have removed the CSS transition parts.
I also have removed the height: 0 part and you will notice that there is a dropdown.slideUp(0) line up there which basically applies a .slideUp() animation of 0 duration to immediately set height: 0 on the element.
Hope this helps.
Answering my own question for anyone who's interested, this is the code:
$(function() {
$('.dropdown').hide();
$('.dropdown-toggle').click(function(e) {
$('.dropdown').slideToggle(400);
$('.dropdown-toggle').slideDown('active');
$('.dropdown').toggleClass('is-active');
return false;
});
$(document).click(function() {
if ($('.dropdown').is(':visible')) {
$('.dropdown', this).slideUp();
$('.dropdown').removeClass('is-active');
}
});
});
body {
padding: 2em;
}
a {
text-decoration: none;
color: #000;
}
nav {
position: relative;
}
.dropdown-toggle {
padding: .5em 1em;
background: #777;
border-radius: .2em .2em 0 0;
}
.dropdown {
position: absolute;
margin-top: .5em;
background: #777;
min-width: 12em;
padding: 0;
top: 0;
left: 0;
-webkit-transform: translateY(-60px);
-ms-transform: translateY(-60px);
transform: translateY(-60px);
transition: transform .3s
}
.dropdown.is-active {
-webkit-transform: translateY(30px);
-ms-transform: translateY(30px);
transform: translateY(30px);
display: block
}
ul.dropdown li {
list-style-type: none;
}
ul.dropdown a {
text-decoration: none;
padding: .5em 1em;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav><a class="dropdown-toggle" href="#" title="Menu">Menu</a>
<ul class="dropdown">
<li>Menu Item
</li>
<li>Menu
</li>
<li>Settings
</li>
<li>Search
</li>
</ul>
</nav>
I used toggleClass and removeClass to add the animation I wanted and that's translate (the idea originally from Slide and Push Menu tutorial):
-webkit-transform: translateY(-60px);
-ms-transform: translateY(-60px);
transform: translateY(-60px);
transition: transform .3s
Related
I have already asked this question but didn't get any answers so I'll try once again.
I have built a navigation menu on WordPress using jQuery to have a slide down/up animation on the submenus. I am using flexbox on the submenus which is what seems to cause the problems. When I change it to block it works fine but the design is not what I am looking for.
The problem and how to recreate it: The first time you refresh the page (or run the code on jsfiddle) and hover over the menu, the submenu will slide down over the height it should stop at and snap back after that. After that all the other submenus work fine. It's just I would like to fix that snap back since it does not look that good.
Does anyone have an idea why this is happening and/or how to fix it?
Link for the jsfiddle where you can test the problem yourself: https://jsfiddle.net/u2zs38oL/
And the code for the jsfiddle below:
HTML:
<header>
<nav class="main-navigation" id="desktop-navigation">
<div class="container-fluid">
<div class="menu-menu-1-container">
<ul id="menu-menu-2" class="d-flex justify-content-center">
<li
class="has-mega-menu menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-92">
Test
<ul class="sub-menu">
<li
class="mega-menu-column menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-93">
Test
<ul class="sub-menu">
<li
class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-94">
Test</li>
</ul>
</li>
<li
class="mega-menu-column menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-149">
Test
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-150">
Test</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
CSS:
header .main-navigation {
display: block;
margin-left: 1rem!important;
margin-right: 1rem!important;
text-transform: uppercase;
}
header .main-navigation > div {
background: #000;
position: relative;
}
header .menu-menu-1-container {
height: 50px;
white-space: initial;
}
header #menu-menu-2 {
list-style: none;
margin: 0;
flex-direction: row;
}
header #menu-menu-2 > .menu-item {
padding: 0 20px;
height: 50px;
border-bottom: 3px solid;
border-color: #000;
display: flex;
align-items: center;
justify-content: center;
}
header #menu-menu-2 .menu-item:hover {
border-color: red;
transition: 0.1s ease-in-out;
}
header #menu-menu-2 > li:hover > a {
color: red;
}
header .has-mega-menu > .sub-menu {
position: absolute;
background: #fff;
top: 50px;
left: 0;
width: 100%;
display: none;
box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
}
header #menu-menu-2 li, header #menu-menu-2 ul {
list-style: none;
padding: 0;
}
header #menu-menu-2 li a {
text-decoration: none;
}
header #menu-menu-2 > li > a {
color: #fff;
}
header .has-mega-menu a {
color: #000;
}
header .mega-menu-column {
margin-left: 10px;
margin-top: 25px;
margin-bottom: 25px;
padding: 0 15px!important;
}
header .mega-menu-column > a {
position: relative;
font-weight: 600;
letter-spacing: 1px;
padding-bottom: 10px;
pointer-events: none;
}
header .mega-menu-column > a::before {
content: "";
position: absolute;
height: 1px;
width: 14px;
bottom: 0;
background-color: #000;
opacity: 0.2;
}
header .mega-menu-column ul {
margin-top: 20px;
}
header .mega-menu-column ul li {
padding: 5px 0!important;
}
header .mega-menu-column ul a {
color: grey;
font-weight: 400;
line-height: 25px;
transition: all 0.3s ease-in-out;
text-transform: capitalize;
display: block;
}
header .mega-menu-column ul li a:hover {
-webkit-transition: -webkit-transform 0.3s ease-in-out;
-moz-transition: -moz-transform 0.3s ease-in-out;
-ms-transition: -ms-transform 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
-webkit-transform: translateX(5px);
-moz-transform: translateX(5px);
-ms-transform: translateX(5px);
-o-transform: translateX(5px);
transform: translateX(5px);
color: #000;
border-bottom: 1px solid red;
}
.d-flex {
display: flex;
}
.justify-content-center {
justify-content: center;
}
jQuery:
jQuery(document).ready(function() {
jQuery('.main-navigation .has-mega-menu').hover(function() {
jQuery(this).has('.sub-menu').children('.sub-menu').stop().slideDown({start: function() {
jQuery(this).css('display', 'flex');
}, duration: 250
});
jQuery(this).children('.sub-menu').css('z-index', '3')
}, function() {
jQuery(this).has('.sub-menu').children('.sub-menu').stop().slideUp(250);
jQuery(this).children('.sub-menu').css('z-index', '2')
});
});
I found a way around this problem (at least for my case). So I found if on page reload, the submenu that is hidden and shown, has display flex instead of none then there seems to be no problems with the snapping. But obviously I do not want to start with the menu opened.
So what I did was set the submenu to flex and hid the menu with z-index until the jQuery has loaded and then hid (set display none) the submenu with jQuery. Then when hovering over the menu item toggled the slideDown and added higher z-index to that object.
Fiddle can be found here: https://jsfiddle.net/e319ydkm/
Changes I made to the original code:
header .has-mega-menu > .sub-menu {
display: none -> flex;
z-index: -1;
}
.hide-under {
background: #fff;
z-index: 1;
height: 1000px;
}
jQuery('.main-navigation .has-mega-menu > .sub-menu').hide();
This of course is not a perfect solution and I couldn't really figure out what is causing it other than that it is caused by flexbox (probably). I will not mark this reply as an answer since this isn't really the solution.
I am coding a mobile menu to display when a menu toggle is clicked. This solution is currently working on smaller desktop windows (Chrome and Safari), but does not work on iOS (Safari). I tested the javascript event on mobile by using alert('You have clicked the menu toggle') in the $('.menu-toggle') function and it works, which leads me to believe this is a CSS issue.
See my code below:
HTML:
<div class="mobile-nav-container">
<div id="mobile-logo-home">
<img src="images/Chuck_Logo_V1.png" alt="Chuck Guth Site Logo" width="132px" height="35px">
</div>
<nav class="mobile-nav">
<ul>
<li class="mobile-menu-item">Home</li>
<li class="mobile-menu-item">About</li>
<li class="mobile-menu-item">Buyer Information</li>
<li class="mobile-menu-item">Search Homes</li>
<li class="mobile-menu-item">Featured Listings</li>
<li class="mobile-menu-item">Mortgage Calculator</li>
<li class="mobile-menu-item">Seller Information</li>
<li class="mobile-menu-item">Home Valuation</li>
<li class="mobile-menu-item">West Pasco</li>
<li class="mobile-menu-item">North Pinellas</li>
<li class="mobile-menu-item">Gulf Beaches</li>
<li class="mobile-menu-item">Contact</li>
</ul>
</nav>
</div>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
CSS:
/* Hide regular menu by default */
.site-nav, .reg-logo {
display: none;
}
header::after {
content: '';
clear: both;
display: block;
}
.mobile-logo {
position: relative;
float: left;
margin: 0;
top: -.25em;
left: 1em;
cursor: pointer;
}
.mobile-nav {
position: absolute;
width: 100%;
top: -.5em;
background: #f1f1f1;
clip-path: circle(0px at top right);
-webkit-clip-path: circle(0px at top right);
transition: clip-path ease-in-out 750ms;
-webkit-transition: clip-path ease-in-out 750ms;
}
.mobile-nav--open {
clip-path: circle(250% at top right);
-webkit-clip-path: circle(250% at top right);
display: block;
}
.mobile-nav ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
}
.mobile-nav ul li a {
border-bottom: 1px solid #333333;
}
/* .mobile-nav li:last-child {
border-bottom: none;
} */
.mobile-nav a {
color: #333333;
padding: 1em 1em 1em 1em;
text-decoration: none;
font-size: .875em;
}
.mobile-nav a:hover,
.mobile-nav a:focus {
background: #f1f1f1;
color: #a5c5c3;
}
.menu-toggle {
position: absolute;
padding: 1.25em;
top: 0em;
right: .5em;
cursor: pointer;
font-size: .75em;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background: #333333;
height: 3px;
width: 1.75em;
border-radius: 3px;
transition: all ease-in-out 500ms;
-webkit-transition: all ease-in-out 500ms;
}
.hamburger::before {
transform: translateY(-6px);
-webkit-transform: translateY(-6px);
}
.hamburger::after {
transform: translateY(3px);
-webkit-transform: translateY(3px);
}
.open .hamburger {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.open .hamburger::before {
opacity: 0;
}
.open .hamburger::after {
transform: translateY(-3px) rotate(-90deg);
-webkit-transform: translateY(-3px) rotate(-90deg);
}
JavaScript:
<!-- Begin mobile nav JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$('.menu-toggle').click(function() {
$('.mobile-nav').toggleClass('mobile-nav--open', 500);
$(this).toggleClass('open');
});
$('.mobile-menu-item').click(function() {
$('.mobile-nav').removeClass('mobile-nav--open', 500);
})
</script>
<!-- End mobile nav JS -->
Thanks for any and all help!
Answering my own question - after clearing my browser's cache it appears to be working fine.
I am trying to display ellipsis for a breadcrumb. Lets take the li element home/content/breadcrumb it should show as home/.../breadcrumb. And the ellipsis(...) show be clickable and if user clicks that it should expand.
Not sure how to do that and one of my friend suggested that "write an onClick function using jQuery and inside the function just write code for addClass and removeClass and style those classes in css to show ellipsis."
.hide {
display: none;
}
<div class="breadcrumbs">
<ol>
<li>
Home
</li>
<li>
Components
</li>
<li>
Breadcrumbs
</li>
</ol>
</div>
I have no idea what it mean by. Can some one help?
Thanks in advance.
This is pure CSS...
.breadcrumbs ol {
list-style-type: none;
padding: 0;
margin: 0;
}
.breadcrumbs li {
position: relative;
display: none;
float: left;
padding: 0;
margin: 0;
font-size: 0.8125rem;
padding-right: 7px;
color: #999;
}
.breadcrumbs li:first-child,
.breadcrumbs li:last-child {
display: inline-block;
}
.breadcrumbs li:first-child {
margin-right: 7px;
}
.breadcrumbs li:first-child::after {
content: "/... /";
display: block;
position: absolute;
top: 50%;
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
transform: translate(0, -50%);
margin-top: 0;
right: -10px;
}
.breadcrumbs li a {
line-height: 14px;
height: 14px;
padding: 10px 6px;
height: 14px;
color: #666;
text-decoration: none;
}
.breadcrumbs li a:hover {
text-decoration: underline;
}
<div class="breadcrumbs">
<ol>
<li>
Home
</li>
<li>
Components
</li>
<li>
Breadcrumbs
</li>
</ol>
</div>
This should accomplish what you're after.
$('.hide').click(function() {
$('.hide').toggleClass('hidden');
});
.hidden a { display: none; }
ol { list-style: none; }
li {
display: inline-block;
}
li:after {
content: '/';
}
.hidden:after {
content: '... /';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="breadcrumbs">
<ol>
<li>
Home
</li>
<li class="hide hidden">
Components
</li>
<li>
Breadcrumbs
</li>
</ol>
</div>
Edit
Changed the jQuery selector from .breadcrumbs to .hide. Allows only the ... / to be clicked and not the entire breadcrumb.
I am not sure why you want to do still but still you can try this.
Add a class for all li between home and breadcrumb. Let it be hidden-breadcrumbs.
.hidden-breadcrumbs{
display:none;
}
<li class="expander">...</li>
$('.expander'.click(function(){
$(this).hide();
$('.hidden-breadcrumbs').show();
});
I made a slideToggle menu with the icon and, when the user clicks on the icon it will rotate down, but, when I click one of the icons all the icons rotate. How do I rotate only the clicked icon, not all of them?
$(document).ready(function() {
// toggle slide down nav
$('.nav-sidebar ul:has(li)').addClass('sub-menu');
$('.dropmenu').on('click', function() {
$(this).next('.sub-menu').slideToggle(200);
$(this).parent().siblings().children().next().slideUp();
return false;
});
// arrow rotate
$('.dropmenu').on('click', function() {
// $('.dropmenu').removeClass('openmenu');
// $(this).addClass('openmenu');
if ($('.dropmenu').hasClass('openmenu')) {
$('.dropmenu').removeClass('openmenu');
} else {
$('.dropmenu').addClass('openmenu');
}
});
});
.nav-sidebar {
list-style: none;
padding: 0;
margin: 0;
}
.nav-sidebar>li>a,
.sub-menu>li>a {
display: block;
color: #838F9A;
text-transform: capitalize;
padding: 0 30px;
line-height: 3.5em;
}
.sub-menu>li>a {
line-height: 2.5em;
}
.nav-sidebar>li>a:hover,
.nav-sidebar>li>a:focus,
.sub-menu>li>a:hover,
.sub-menu>li>a:focus {
color: #4FC1E9;
}
.dropmenu:after {
font-family: 'FontAwesome';
font-size: 16px;
content: "\f105";
vertical-align: middle;
float: right;
margin-right: -10px;
transition: all .3s ease;
}
.openmenu:after {
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.sub-menu {
display: none;
list-style: none;
padding: 10px 30px;
margin: 0;
background-color: #1D232B;
position: relative;
}
.open-menu>.sub-menu {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<ul class="nav-sidebar">
<li>
Place
<ul>
<li>Published
</li>
<li>Schedule
</li>
<li>My Place
</li>
</ul>
</li>
<li>
Place
<ul>
<li>Published
</li>
<li>Schedule
</li>
<li>My Place
</li>
</ul>
</li>
</ul>
External example that I made: https://jsfiddle.net/y6adghh3/
$(document).ready(function() {
// toggle slide down nav
$('.nav-sidebar ul:has(li)').addClass('sub-menu');
$('.dropmenu').on('click', function() {
$(this).toggleClass('openmenu');// arrow rotate
$(this).next('.sub-menu').slideToggle(200);
$(this).parent().siblings().children().removeClass('openmenu').next().slideUp();
return false;
});
});
.nav-sidebar {
list-style: none;
padding: 0;
margin: 0;
}
.nav-sidebar>li>a,
.sub-menu>li>a {
display: block;
color: #838F9A;
text-transform: capitalize;
padding: 0 30px;
line-height: 3.5em;
}
.sub-menu>li>a {
line-height: 2.5em;
}
.nav-sidebar>li>a:hover,
.nav-sidebar>li>a:focus,
.sub-menu>li>a:hover,
.sub-menu>li>a:focus {
color: #4FC1E9;
}
.dropmenu:after {
font-family: 'FontAwesome';
font-size: 16px;
content: "\f105";
vertical-align: middle;
float: right;
margin-right: -10px;
transition: all .3s ease;
}
.openmenu:after {
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.sub-menu {
display: none;
list-style: none;
padding: 10px 30px;
margin: 0;
background-color: #1D232B;
position: relative;
}
.open-menu>.sub-menu {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<ul class="nav-sidebar">
<li>
Place
<ul>
<li>Published
</li>
<li>Schedule
</li>
<li>My Place
</li>
</ul>
</li>
<li>
Place
<ul>
<li>Published
</li>
<li>Schedule
</li>
<li>My Place
</li>
</ul>
</li>
</ul>
Your selector $('.dropmenu') in the .on('click' function is selecting any element on the page with the class dropmenu. You need to make sure it only selects the element being clicked. Luckily you can reference the clicked element via this.
The following code should work:
$(document).ready(function() {
// toggle slide down nav
$('.nav-sidebar ul:has(li)').addClass('sub-menu');
$('.dropmenu').on('click', function() {
$(this).next('.sub-menu').slideToggle(200);
$(this).parent().siblings().children().next().slideUp();
return false;
});
// arrow rotate
$('.dropmenu').on('click', function() {
if ($(this).hasClass('openmenu')) {
$(this).removeClass('openmenu');
} else {
$(this).addClass('openmenu');
}
});
});
Just change the click handler to reference the clicked element using 'this'.
$('.dropmenu').on('click', function() {
if ($(this).hasClass('openmenu')) {
$(this).removeClass('openmenu');
} else {
$(this).addClass('openmenu');
}
});
});
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