My HTML Code is for navigation bar:
<Nav>
<ul>
<li onclick="showDropDownMenu('dropdown-menu')" class="dropdown nav-icon">
<span class="fa fa-fw fa-bars"></span>
<ul class="dropdown-menu">
<li>Home</li>
<li>Games</li>
<li>Workout</li>
<li>Yoga</li>
<li>About Us</li>
</ul>
</li>
<li class="home nav-icon"><i class="fa fa-fw fa-home"></i></li>
<li class="active nav-btn">Home</li>
<li class="nav-btn">Games</li>
<li class="nav-btn">Stay Fit</li>
<li class="nav-btn">About Us</li>
</ul>
<form class="nav-search">
<input type="search" name="Search" class="text-area" placeholder="Search...">
<span class="fa fa-fw fa-search search-btn"></span>
</form>
</Nav>
And my css for second ul element
nav .dropdown ul{
display: none;
position: absolute;
background: black;
min-width: 150px;
left: 0;
box-shadow: 5px 8px 16px 0px rgba(0,0,0,0.5);
z-index: 1;
transition: visibility 0.3s linear;
}
.show{
display: block;
}
My Js code is
showDropDownMenu.js
function showDropDownMenu(className)
{
document.getElementsByClassName(className)[0].classList.toggle("show");
};
And it doesn't work. dropdown doesn't apear at all. I don't know what's going on. Have been looking for the error for a day now.
But if i use the display.block property it works. Js looks like this --
function showDropDownMenu(className)
{
var x = document.getElementsByClassName(className);
if(x[0].style.display = "none"){
x[0].style.display = "block";
}
else
{
x[0].style.display = "none";
}
}
Above works fine but the problem is I have to double click to one every page reload to make the dropdown furst appear.
Your javascript code is actually working. But the issue is that your css for nav .dropdown ul having display: none have more weight than display: block of .show class when applied. That's why even after the toggleClass gets executed, your element is not getting displayd in DOM. Because even after the display: block of show class is applied, the dsplay: none of nav .dropdown ul will be the active style, since the class selection have more weight. The best way to fix this out is to make .show class more specific. That is instead of show use nav .dropdown ul.show this will give more priority to display property of show class when applied.
function showDropDownMenu(className) {
document.getElementsByClassName(className)[0].classList.toggle("show");
}
nav .dropdown ul {
display: none;
position: absolute;
background: black;
min-width: 150px;
left: 0;
box-shadow: 5px 8px 16px 0px rgba(0, 0, 0, 0.5);
z-index: 1;
transition: visibility 0.3s linear;
}
nav .dropdown ul.show {
display: block;
}
<nav>
<ul>
<li onclick="showDropDownMenu('dropdown-menu')" class="dropdown nav-icon">
Click Here
<span class="fa fa-fw fa-bars"></span>
<ul class="dropdown-menu">
<li>Home</li>
<li>Games</li>
<li>Workout</li>
<li>Yoga</li>
<li>About Us</li>
</ul>
</li>
<li class="home nav-icon"><i class="fa fa-fw fa-home"></i></li>
<li class="active nav-btn">Home</li>
<li class="nav-btn">Games</li>
<li class="nav-btn">Stay Fit</li>
<li class="nav-btn">About Us</li>
</ul>
<form class="nav-search">
<input type="search" name="Search" class="text-area" placeholder="Search...">
<span class="fa fa-fw fa-search search-btn"></span>
</form>
</nav>
The CSS code is wrong, is display: block without quotes.
It's generally accepted as bad practice to use inline event listeners in JavaScript or to put inline CSS styles directly on an HTML element. Keeping your code separated makes it easier to debug and avoids CSS specificity issues. I'd suggest restructuring your code like this (I added comments where code should be changed):
<nav>
<ul>
<!-- Remove event listener from HTML -->
<li class="dropdown nav-icon">
Click Here
<span class="fa fa-fw fa-bars"></span>
<!-- Add 'hide' class to hide dropdown on page load -->
<ul class="dropdown-menu hide">
<li>Home</li>
<li>Games</li>
<li>Workout</li>
<li>Yoga</li>
<li>About Us</li>
</ul>
</li>
<li class="home nav-icon"><i class="fa fa-fw fa-home"></i></li>
<li class="active nav-btn">Home</li>
<li class="nav-btn">Games</li>
<li class="nav-btn">Stay Fit</li>
<li class="nav-btn">About Us</li>
</ul>
<form class="nav-search">
<input type="search" name="Search" class="text-area" placeholder="Search...">
<span class="fa fa-fw fa-search search-btn"></span>
</form>
</nav>
nav .dropdown ul {
/* Remove "display: none" from this selector */
position: absolute;
background: black;
min-width: 150px;
left: 0;
box-shadow: 5px 8px 16px 0px rgba(0, 0, 0, 0.5);
z-index: 1;
transition: visibility 0.3s linear;
}
.show {
/* Remove quotes around 'block' */
display: block;
}
/* Create new hide class */
.hide {
display: none;
}
function showDropDownMenu(className) {
var x = document.querySelector(className);
// Toggle hide and show classes
if(x.classList.contains('hide')) {
x.classList.remove('hide')
x.classList.add('show');
} else {
x.classList.remove('show')
x.classList.add('hide');
}
}
// Get li.dropdown and add click listener to it
// call showDropDownMenu with the dropdown-menu ul on every click
document.querySelector('.dropdown').addEventListener('click', function() {
showDropDownMenu('.dropdown-menu');
});
This works, while also keeping your code neatly separated. If you're familiar with jQuery, you can dispense altogether with the .hide and .show classes, since jQuery provides a toggle() function that does this automatically for you:
<!-- Add jQuery script to the head of your HTML
Get jQuery link at https://code.jquery.com/
-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
// JavaScript file reduced to THREE lines
$('nav ul li.dropdown').click(() => {
$('.dropdown-menu').toggle();
})
If you choose the jQuery route, you should remove the .show and .hide classes from your CSS and HTML, and the nav .dropdown ul would need to have display: none on it:
nav .dropdown ul{
/* Add display: none back if using jQuery */
display: none;
position: absolute;
background: black;
min-width: 150px;
left: 0;
box-shadow: 5px 8px 16px 0px rgba(0,0,0,0.5);
z-index: 1;
transition: visibility 0.3s linear;
}
/* .show{
display: block;
}
.hide {
display: none;
} */
You need to apply display:none inline so the display style property returns something:
function showDropDownMenu(className)
{
var x = document.getElementsByClassName(className);
if(x[0].style.display = "none"){
x[0].style.display = "block";
}
else
{
x[0].style.display = "none";
}
}
nav .dropdown ul {
display: none;
position: absolute;
background: black;
min-width: 150px;
left: 0;
box-shadow: 5px 8px 16px 0px rgba(0, 0, 0, 0.5);
z-index: 1;
transition: visibility 0.3s linear;
}
.show {
display: block;
}
<Nav>
<ul>
<li onclick="showDropDownMenu('dropdown-menu')" class="dropdown nav-icon">
<span class="fa fa-fw fa-bars"></span>
<ul class="dropdown-menu" style="display:none">
<li>Home</li>
<li>Games</li>
<li>Workout</li>
<li>Yoga</li>
<li>About Us</li>
</ul>
</li>
<li class="home nav-icon"><i class="fa fa-fw fa-home"></i></li>
<li class="active nav-btn">Home</li>
<li class="nav-btn">Games</li>
<li class="nav-btn">Stay Fit</li>
<li class="nav-btn">About Us</li>
</ul>
<form class="nav-search">
<input type="search" name="Search" class="text-area" placeholder="Search...">
<span class="fa fa-fw fa-search search-btn"></span>
</form>
</Nav>
Related
I made a drop Menu, the dropped part has display: none; when it be Clicked the JS give it class motherHover what give it display: grid; to make it visible.
But the problem is that the menu appears One-shot.
How to make the drop menu Show up smoothly with pure JS?
function fgf(){
var hoverElement = document.querySelector(".father"),
tragtedElement = document.querySelector("#dds");
tragtedElement.classList.toggle("motherHover");
}
ul{
list-style: none;
}
.father{
}
.mother{
display: none;
}
.asd {
display: grid;
}
.motherHover{
display: grid;
}
<link href="https://meyerweb.com/eric/tools/css/reset/reset200802.css" rel="stylesheet"/>
<ul>
<li class="father" onclick="fgf()">
<button>
Drop Menu
</button>
</li>
<li id="dds" class="mother" >
<ul class="asd">
<i>g</i>
<i>g</i>
<i>g</i>
<i>g</i>
<i>g</i>
</ul>
</li>
</ul>
Its usually done with max-height and transitions.
function fgf(){
let asd = document.querySelector(".asd");
asd.classList.toggle("open");
}
ul{
list-style: none;
}
.asd {
display: grid;
max-height: 0;
transition: max-height 500ms;
overflow: hidden;
background: green;
color: white;
}
.open {
max-height: 100px !important;
}
<link href="https://meyerweb.com/eric/tools/css/reset/reset200802.css" rel="stylesheet"/>
<ul>
<li class="father" onclick="fgf()">
<button>
Drop Menu
</button>
</li>
<li id="dds" class="mother" >
<ul class="asd">
<i>g</i>
<i>g</i>
<i>g</i>
<i>g</i>
<i>g</i>
</ul>
</li>
</ul>
I want to create a menu bar with sub menu using Jquery. There are two item with sub menu. When i click on once i want it slide down and when i click second one then second one need to slide down but first one or all another one need to slide up. I tried following:
HTML
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="footer-lang">
<ul>
<li class="lang">
ENG <i class="fa fa-caret-down" aria-hidden="true"></i>
<ul>
<li>En</li>
<li>Bn</li>
</ul>
</li>
<li class="lang">
USD <i class="fa fa-caret-down" aria-hidden="true"></i>
<ul>
<li>USD</li>
<li>VND</li>
</ul>
</li>
</ul>
</div>
CSS
.footer-lang ul{
display: block;
text-align: center;
}
.footer-lang .lang{
display: inline-block;
}
.footer-lang .lang a{
display: block;
padding: 8px;
color: #000;
}
.footer-lang .lang > ul{
display: none;
position: absolute;
}
Javascript
$(document).ready(function(){
$('.footer-lang .lang a').on('click', function(e) {
$(this).next('ul').slideToggle('slow');
e.preventDefault();
});
});
On click make other submenu to slideUp fast or slow and than toggle see below snippet for more info
$(document).ready(function(){
$('.footer-lang .lang a').on('click', function(e) {
$(".lang > ul").slideUp("fast");
$(this).next('ul').slideToggle('slow');
e.preventDefault();
});
});
.footer-lang ul{
display: block;
text-align: center;
}
.footer-lang .lang{
display: inline-block;
}
.footer-lang .lang a{
display: block;
padding: 8px;
color: #000;
}
.footer-lang .lang > ul{
display: none;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="footer-lang">
<ul>
<li class="lang">
ENG <i class="fa fa-caret-down" aria-hidden="true"></i>
<ul>
<li>En</li>
<li>Bn</li>
</ul>
</li>
<li class="lang">
USD <i class="fa fa-caret-down" aria-hidden="true"></i>
<ul>
<li>USD</li>
<li>VND</li>
</ul>
</li>
</ul>
</div>
one method is to add a class signifying open when clicking it and then close that class before opening another item. something like this would use that:
$(document).ready(function() {
$('.footer-lang .lang a').on('click', function(e) {
e.preventDefault();
// close the open
$('.is-open').removeClass('is-open').slideToggle('slow);
// open the closed
$(this).next('ul').slideToggle('slow');
$(this).addClass('is-open');
});
});
I've been stuck on this for hours and hours and became pretty desperate. So I have this angular2 applicaton made for a school project but what I want to do is when i click on the + button this dropdown menu comes down and when i click on it again, or when I click on a link, it closes again. Right now it just stays open all the time and doesn't do anything when I click it
I have tried many different things, from ng2-dropdown to a javascript file that shows or hides the menu. I am out of options and getting really frustrated on this.
this is the html element in the browser before i click the +
this is the html element in the browser after i click the +
I have done the proper imports for the ng2-dropdown module which should make it work. It might be something small and stupid, but I don't see it.
This is my app.component which has the navigation bar as a template. on click i route to other components html's.
#Component({
selector: 'ls-app',
styleUrls: ['./app/css/fonts.css','./app/css/sass.css'],
template: `
<header id="header">
<nav role='navigation' class="main-nav" id="main-nav">
<ul id="main-nav-list">
<div class="navgroup">
<li><a [routerLink]="['/home']"class="navlogo" href="./leagues/home.component.html"><img class="logo" src="./app/img/logo.png" alt="logo"></a></li>
</div>
<div class="navgroup">
<li>
<a [routerLink]="['/play']"class="navtitle" href="./leagues/play.component.html"><img class="imgMainNav" src="./app/img/play.svg" alt="play">Speel</a>
</li>
<li><a [routerLink]="['/stats']"class="navtitle" href="./leagues/stats.component.html"><img class="imgMainNav" src="./app/img/chart.png" alt="chart">Stats</a></li>
<li><a [routerLink]="['/leagues']"class="navtitle" href="./leagues/join-league.component.html"><img class="imgMainNav" src="./app/img/chart.png" alt="chart">Join League</a></li>
</div>
<div class="navgroup login">
<div class="add-button" dropdown [dropdownToggle]="true">
<div dropdown-open > +</div>
<ul class="dropdown" >
<a [routerLink]="['/account']"href="leagues/account.component.html"><li><i class="fa fa-check-square-o fa-2"></i>Mijn account</li></a>
<a [routerLink]="['/play']"href="leagues/play.component.html"><li><i class="fa fa-comments fa-2"></i>Plaats pronostiek</li></a>
<a [routerLink]="['/leagues']"href="leagues/join-league.component.html"><li><i class="fa fa-clipboard fa-2"></i>Nieuwe competitie</li></a>
<li><i class="fa fa-user-plus fa-2"></i>Shop</li>
<li><i class="fa fa-user-plus fa-2"></i>Log out</li>
</ul>
</div>
<li><a class="navtitle loginnav login-window" onclick="hierkomtdefunctievanjavascriptfile()" ><img class="imgMainNav" src="./app/img/fa-user.png" alt="login">Login/Register</a></li>
</div>
</ul>
</nav>
</header>
And this is my css (actually sass but gets converted when run) for the dropdown class just in case. So when i click on the button the class is .dropdown and when you click it again it should change to .hidden
.dropdown {
position: relative;
top: 25px;
margin: 0 auto;
padding: 5px 0 0 0;
width: 200px;
height: auto;
background: $primary_color1_white;
border: 1px solid $primary_color2_black;
border-radius: 3px;
list-style: none;
&:before {
content: "";
border-width: 1px 0 0 1px;
border-style: solid;
border-color: #A1A4AA;
background: $primary_color1_white;
height: 14px;
width: 14px;
position: absolute;
top: -7px;
transform: translateX(-50%) rotate(45deg);
}
a {
text-decoration: none;
color: $primary_color2_black;
font-size: 1em;
li {
text-align: left;
padding: 10px 15px;
margin: 0;
i {
margin-right: 10px;
}
}
&:hover {
color: #ffffff;
li {
background: linear-gradient(to top right, $primary_color1_white, $melon 30%); } } } }
.hidden{visibility: hidden;}
in your template modify this :
<div class="add-button" dropdown>
<div (click)="toggleDropdown()"> +</div>
<ul class="dropdown" *ngIf="showDropdown">
<a (click)="toggleDropdown()" [routerLink]="['/account']" href="leagues/account.component.html">
<li><i class="fa fa-check-square-o fa-2"></i>Mijn account</li>
</a>
<a (click)="toggleDropdown()" [routerLink]="['/play']" href="leagues/play.component.html">
<li><i class="fa fa-comments fa-2"></i>Plaats pronostiek</li>
</a>
<a (click)="toggleDropdown()" [routerLink]="['/leagues']" href="leagues/join-league.component.html">
<li><i class="fa fa-clipboard fa-2"></i>Nieuwe competitie</li>
</a>
<a (click)="toggleDropdown()" href="">
<li><i class="fa fa-user-plus fa-2"></i>Shop</li>
</a>
<a (click)="toggleDropdown()" href="">
<li><i class="fa fa-user-plus fa-2"></i>Log out</li>
</a>
</ul>
</div>
and then in your component logic:
showDropdown: boolean = false;
toggleDropdown():void {
this.showDropdown = !this.showDropdown;
}
I'm trying to create a football website and I need someone to help me . I want to add a drop-down menu that lists columns of football competitions .Exactly in "competitions " just like this drop-down menu that lists columns.
#Mostafa Baezid Here is the code:
<!-- outer-wrapper start -->
<body>
<nav class='navbar navbar-default'>
<div class='navbar-header'>
<button class='navbar-toggle' data-target='.js-navbar-collapse' data-toggle='collapse' type='button'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'/>
<span class='icon-bar'/>
<span class='icon-bar'/>
</button>
<a class='navbar-brand' href='#'>LOGO</a>
</div>
<div class='collapse navbar-collapse js-navbar-collapse'>
<ul class='nav navbar-nav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>News</a></li>
<li><a href='#'>EUROPE</a></li>
<li><a href='#'>AFRICA</a></li>
<li><a href='#'>WORLDWIDE</a></li>
<li class='dropdown mega-dropdown'>
<a class='dropdown-toggle arrow' data-toggle='dropdown' href='#'>Competitions <span class='glyphicon glyphicon-chevron-down '/></a>
<ul class='dropdown-menu mega-dropdown-menu'><!--megaMenu Wih 3 column start-->
<li class='col-sm-4 nopadding'>
<ul>
<li class='dropdown-header'>France</li>
<li><a href='#'>Demo Link</a></li>
<li><a href='#'>Demo Link</a></li>
<li><a href='#'>Demo Link</a></li>
<li class='divider'/>
</ul>
</li>
<li class='col-sm-4 nopadding'>
<ul>
<li class='dropdown-header'>Europe</li>
<li><a href='#'>Demo Link</a></li>
<li><a href='#'>Demo Link</a></li>
<li><a href='#'>Demo Link</a></li>
<li class='divider'/>
</ul>
</li>
<li class='col-sm-4 nopadding'>
<ul>
<li class='dropdown-header'>INTERNATIONAL</li>
<li><a href='#'>Demo Link</a></li>
<li><a href='#'>Demo Link</a></li>
<li><a href='#'>Demo Link</a></li>
<li class='divider'/>
</ul>
</li>
</ul><!--megaMenu Wih 3 column End-->
</li>
<li><a href='#'>Live Matches</a></li>
<li><a href='#'>Mercato</a></li>
<li><a href='#'>Videos</a></li>
</ul>
</div>
<!-- /.nav-collapse -->
</nav>
<h1 class='c-text'> Mega Menu Demo </h1>
<script type='text/javascript'>$(function () { $('.arrow').click(function () { $('.glyphicon-chevron-down').toggle(); }); }); </script>
</body>
<div id='searchformfix'>
<form action='/search' id='searchform'>
<input name='q' onblur='if (this.value == "") {this.value = "Text to Search...";}' onfocus='if (this.value == "Text to Search...") {this.value = "";}' type='text' value='Text to Search...'/>
</form>
</div>
<div class='clear'/>
<!-- secondary navigation menu end -->
<!-- content wrapper start -->
You can easily do this in bootstrap framework. Demo. This is just an example. You can follow this. If you Have Any question ask me in comment. I will explain for you. Good Luck.
[N.B: Don't use !important on css if you have custom css file for your project. I use !important here because overwrite the css in same page.]
/* CSS used here will be applied after bootstrap.css */
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: 'Open Sans', 'sans-serif';
background: #f0f0f0;
background: white;
}
nav.navbar-default{
background: #35c353;
}
.navbar-nav>li>.dropdown-menu {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.navbar-default .navbar-nav>li>a {
color:white !important;
font-weight: bold;
}
.navbar-default .navbar-nav>li>a:hover{
color:black !important;
}
.mega-dropdown {
position: static !important;
}
.mega-dropdown-menu {
padding: 20px 0px;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
border-color:#35c353;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
color: black !important;
background-color:#35c353 !important;
}
.mega-dropdown-menu:before {
content: "";
border-bottom: 15px solid #20ff4f;
border-right: 17px solid transparent;
border-left: 17px solid transparent;
position: absolute;
top: -15px;
left: 550px;
z-index: 10;
}
.mega-dropdown-menu:after {
content: "";
border-bottom: 17px solid #20ff4f;
border-right: 19px solid transparent;
border-left: 19px solid transparent;
position: absolute;
top: -17px;
left: 548px;
z-index: 8;
}
.mega-dropdown-menu > li > ul {
padding: 0;
margin: 0;
}
.mega-dropdown-menu > li > ul > li {
list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #999;
white-space: normal;
}
.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
text-decoration: none;
color: #444;
background-color: #f5f5f5;
}
.mega-dropdown-menu .dropdown-header {
color: #428bca;
font-size: 18px;
font-weight: bold;
background:#777;
}
h1.c-text{
text-align:center;}
/*Usefull class*/
.nopadding {
padding-left:0 !important;
padding-right:0 !important;
}
.nomargin{
margin-left:0;
margin-right:0;
}
#media (max-width:947px) and (min-width:769px) {
.navbar-nav {
display: inline-flex;
margin: 0;
}
.mega-dropdown-menu:before {
left: 495px !important;
}
.mega-dropdown-menu:after {
left: 495px !important;
}
}
<!DOCTYPE html>
<html>
<head>
<!-- All links cdn's Before Body tag end -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet" />
<head>
<body>
<nav class="navbar navbar-default">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">LOGO</a>
</div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>News</li>
<li>EUROPE</li>
<li>AFRICA</li>
<li>WORLDWIDE</li>
<li class="dropdown mega-dropdown">
Competitions <span class="glyphicon glyphicon-chevron-down "></span>
<ul class="dropdown-menu mega-dropdown-menu"><!--megaMenu Wih 3 column start-->
<li class="col-sm-4 nopadding">
<ul>
<li class="dropdown-header">France</li>
<li>Demo Link</li>
<li>Demo Link</li>
<li>Demo Link</li>
<li class="divider"></li>
</ul>
</li>
<li class="col-sm-4 nopadding">
<ul>
<li class="dropdown-header">Europe</li>
<li>Demo Link</li>
<li>Demo Link</li>
<li>Demo Link</li>
<li class="divider"></li>
</ul>
</li>
<li class="col-sm-4 nopadding">
<ul>
<li class="dropdown-header">INTERNATIONAL</li>
<li>Demo Link</li>
<li>Demo Link</li>
<li>Demo Link</li>
<li class="divider"></li>
</ul>
</li>
</ul><!--megaMenu Wih 3 column End-->
</li>
<li>Live Matches</li>
<li>Mercato</li>
<li>Videos</li>
</ul>
</div>
<!-- /.nav-collapse -->
</nav><!-- /.nav-End -->
<h1 class="c-text"> Mega Menu Demo </h1>
<!-- All Scripts Before Body tag end -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
$('.arrow').click(function () {
$('.glyphicon-chevron-down').toggle();
});
});
</script>
</body>
Add this query this will display the navbar after click on the burger menu on mobile view(media screen 768)
#media only screen and (max-width:768px)
{
.navbar-nav{
display: block !important;
z-index: 1000;
position: absolute !important;
width: 100% ;
border: green !important;
background: #35c353 !important;}
}
I made a tree with child elements and for hide and show them on user click, I use the .show('fast') and .hide('fast') jquery functions.
But I noticed that on firefox the transition between the two state are slowing down but on Chrome it works like a charm.
I have the latest version of firefox.
You should also know that I use different libraries into my website such as bootstrap , datatable.js . I tell you because I see that the slowdown is less pronounced on codepen.io that on my site.
this is the codepen.io with my tree
And that's my javascript code :
$('.tree li.parent_li > span').on('click', function(e) {
var child = $(this).parent('li.parent_li').find(' > ul > li');
if (child.is(":visible")) {
child.hide('fast');
$(this).find('>i').addClass('glyphicon-chevron-right').removeClass('glyphicon-chevron-down');
} else {
child.show('fast');
$(this).find('>i').addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-right');
}
e.preventDefault();
e.stopPropagation();
});
Thanks.
This was my attempt:
$(function(){
$('.tree li.parent_li > span').on('click', function(e) {
var parent = $(this).closest('li.parent_li');
parent.toggleClass("open");
e.preventDefault();
e.stopPropagation();
});
});
.administrationRowTab {
background-color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.tab-pane,
.active {
color: inherit;
}
/*TREE STYLE*/
.tree ul {
list-style: none;
}
.tree .parent_li > span {
cursor: pointer;
}
.tree i {
margin-right: 5px;
}
.parent_li .glyphicon-chevron-down,
.parent_li.open .glyphicon-chevron-right {
display: none;
}
.parent_li.open .glyphicon-chevron-down {
display: inline-block;
}
.parent_li ul {
height: 0;
overflow: hidden;
-webkit-transition: all 500ms linear;
-moz-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
}
.parent_li.open ul {
height: 60px;
overflow: auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div class="row m-t-25">
<div class="container">
<div class="row administrationRowTab">
<ul id="tabUl" class="nav nav-tabs">
<li class="active">Test</li>
</ul>
<div class="tab-content">
<div class="tab-pane active m-t-25" id="tabBuildsConfiguration" style="padding:15px;">
<div class="row pad-10">
<div class="tree">
<ul>
<li class="parent_li">
<span><i class="glyphicon glyphicon-chevron-down"></i><i class="glyphicon glyphicon-chevron-right"></i>Parent 1</span>
<ul>
<li><i class="glyphicon glyphicon-file"></i>Child 1</li>
<li><i class="glyphicon glyphicon-file"></i>Child 2</li>
<li><i class="glyphicon glyphicon-file"></i>Child 3</li>
</ul>
</li>
<li class="parent_li">
<span><i class="glyphicon glyphicon-chevron-down"></i><i class="glyphicon glyphicon-chevron-right"></i>Parent 2</span>
<ul>
<li><i class="glyphicon glyphicon-file"></i>Child 1</li>
<li><i class="glyphicon glyphicon-file"></i>Child 2</li>
<li><i class="glyphicon glyphicon-file"></i>Child 3</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This is pure CSS.
I added two classes: .chiled-hide and .chiled-show to the css, and updated your js script:
Here is a link to codepen example
$(function(){
$('.tree li.parent_li > span').on('click', function(e){
var test = $(this).parent('li.parent_li').hasClass('chiled-hide');
if(test)
{
$(this).parent('li.parent_li').removeClass('chiled-hide').addClass('chiled-show');
$(this).find('>i').addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-right');
}
else
{
$(this).parent('li.parent_li').removeClass('chiled-show').addClass('chiled-hide');
$(this).find('>i').addClass('glyphicon-chevron-right').removeClass('glyphicon-chevron-down');
}
e.preventDefault();
e.stopPropagation();
});
});
.administrationRowTab{
background-color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.tab-pane, .active{
color : inherit;
}
/*TREE STYLE*/
.tree ul{
list-style: none;
}
.tree .parent_li > span { cursor: pointer;}
.tree i {margin-right: 5px;}
.chiled-hide > ul {
display:none;
opacity:0;
transition:opacity 0.5s linear;
}
.chiled-show > ul {
display:block;
opacity:1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row m-t-25">
<div class="container">
<div class="row administrationRowTab">
<ul id="tabUl" class="nav nav-tabs">
<li class="active">Test</li>
</ul>
<div class="tab-content">
<div class="tab-pane active m-t-25" id="tabBuildsConfiguration" style="padding:15px;">
<div class="row pad-10">
<div class="tree">
<ul>
<li class="parent_li">
<span><i class="glyphicon glyphicon-chevron-down"></i>Parent 1</span>
<ul>
<li><i class="glyphicon glyphicon-file"></i>Child 1</li>
<li><i class="glyphicon glyphicon-file"></i>Child 2</li>
<li><i class="glyphicon glyphicon-file"></i>Child 3</li>
</ul>
</li>
<li class="parent_li">
<span><i class="glyphicon glyphicon-chevron-down"></i>Parent 2</span>
<ul>
<li><i class="glyphicon glyphicon-file"></i>Child 1</li>
<li><i class="glyphicon glyphicon-file"></i>Child 2</li>
<li><i class="glyphicon glyphicon-file"></i>Child 3</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>