Making an accordion menu its lost its slide down/up function what am I doing wrong?
Can someone check this code
Jquery
$(document).ready(function() {
$('.nav-pills ul li').on('click touchstart', function(e) {
e.preventDefault();
var checkElement = $(this).next();
$('.nav-pills li').removeClass('open');
$(this).closest('li').addClass('open');
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('open');
checkElement.slideUp(300);
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('nav-pills ul ul:visible').slideUp(300);
checkElement.slideDown(300);
}
if($(this).closest('li').find('ul').children().length == 0){
return true;
}
else {
return false;
}
});
});
HTML
<div class="nav-container">
<div class="nav nav-pills nav-stacked">
<ul class="nav nav-pills nav-stacked">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Is Landscape Architecture Right For Me?</a>
<ul class="dropdown-menu">
<li>What Is Landscape Architecture?</li>
<li>I Want to Be a Landscape Architect (Video)
<li>What Skills Do I Need?</li>
<li>Future Career Prospects (U.S. Labor Department)</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">What Does A Landscape Architects Do?</a>
<ul class="dropdown-menu">
<li>Interviews with Leading Landscape Architects</li>
<li>ASLA Professional Awards</li>
<li>ASLA Student Awards</li>
<li>Buy the Book: <em>Becoming A Landscape Architect</em></li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Why Is Their Work So Important?</a>
<ul class="dropdown-menu">
<li>Designing Our Future: Sustainable Landscapes</li>
<li>ASLA Animations</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Where Can I Study?</a>
<ul class="dropdown-menu">
<li>Picking A School</li>
<li>DesignIntelligence Rankings (2013)</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">How Do I Learn More?</a>
<ul class="dropdown-menu">
<li>Graduating Student Surveys</li>
<li>ACE Mentor Program</li>
<li>Find An ASLA Student Chapter</li>
<li>Learn New Software Programs</li>
<li>Local Parks / Conservation Programs</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Personal Stories</a>
<ul class="dropdown-menu">
<li>The Path</li>
<li>Obstacles</li>
<li>Aids</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">About Columbus Circle</a>
<ul class="dropdown-menu">
<li>Learn More About Columbus Circle</li>
<li>Before Photo</li>
</ul>
</ul>
</div>
</div>
</div>
CSS
.nav-pills > li > a {
border-radius: 0px;
line-height: 1.5;
}
.nav-container {
max-width: 26%;
width: 280px;
top: 90px;
left: 45px;
padding: 0;
background-color: #000000;
position: fixed;
z-index: 3;
cursor: pointer;
}
.nav .open>a,
.nav .open>a:hover,
.nav .open>a:focus {
background-color: #f26527;
color: #ffffff;
}
.dropdown > a {
color: #ffffff;
}
.dropdown-menu {
border-radius: 0px;
padding: 0px;
position: relative;
width: 345px;
z-index: 4;
}
.dropdown-menu > li > a {
line-height: 1.3;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #ffffff;
background-color: #f26527;
}
.dropdown-menu li {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica", "Ariel", "sans- serif";
font-weight: 300;
background: #ffffff;
line-height: 1.5;
}
The menu works like and accordion but again has lost its sliding function it just drops down
Thanks
I've encountered this too, and if you tried all the possible solutions here, the answer is that lists cant animate, that if youre trying to animate the list.
Best way is to wrap the lists in a div.
Related
I have built a very minimal menu for a portfolio site trying to keep the navigation clean using clickable layers. Its great except each time the user goes to a new page they have to click away to reopen the menu and submenus again.
I want to try and figure out how to reopen it to the last state it was on when the menu loads on another page. I figure I need to use a cookie to store the click that opened the various submenu but I am stuck on passing a clicked event onto the next page as a variable and then using that to effectively set the menu to where it was left off.
$( document ).ready(function() {
$('.dc-siteSimpleMenu ul li').click(function(ev) {
$(this).find('>ul').slideToggle()
.end().siblings().find('ul').hide();
ev.stopPropagation();
});
$('.dc-siteSimpleMenu-lvl-1 a').click(function(ev) {
$('ul .dc-siteSimpleMenu-lvl-2').hide();
$(this).next('ul .dc-siteSimpleMenu-lvl-2').css({
'display': 'flex',
'flex-direction': 'column',
'flex-wrap': 'wrap',
'height': '55px'
});;
ev.stopPropagation();
});
});
.dc-siteSimpleMenu {
height: 60px;
margin: 0px;
padding: 0px;
width: 100%;
background-color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
line-height: 13px;
letter-spacing: 0em;
text-transform: uppercase;
}
.dc-siteSimpleMenu ul ul {
display: none;
}
.dc-siteSimpleMenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.dc-siteSimpleMenu li ul {
position: absolute;
left: 130px;
width: 130px;
top: 0px;
}
.dc-siteSimpleMenu ul li a {
text-decoration: none;
color: #979797;
transition: 0.25s;
}
.dc-siteSimpleMenu ul li a:hover {
color: #000000;
transition: 0.5s;
}
.dc-siteSimpleMenu-start {
position: fixed;
}
.dc-siteSimpleMenu-start>li>a {
position: relative;
top: 35px;
}
ul.dc-siteSimpleMenu-lvl-2 li {
flex-basis: 25%;
margin-right:30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dc-siteSimpleMenu">
<ul class="dc-siteSimpleMenu-start">
<li><a href='#'>menu</a>
<ul class="dc-siteSimpleMenu-lvl-0">
<li><a href='#'>Item 1 (submenu)</a>
<ul class="dc-siteSimpleMenu-lvl-1">
<li><a href='#'>Item 1-1 (submenu)</a>
<ul class="dc-siteSimpleMenu-lvl-2">
<li><a href='#'>Item 1-1-1 (link)</a></li>
<li><a href='#'>Item 1-1-2 (link)</a></li>
<li><a href='#'>Item 1-1-3 (link)</a></li>
<li><a href='#'>Item 1-1-4 (link)</a></li>
<li><a href='#'>Item 1-1-5 (link)</a></li>
<li><a href='#'>Item 1-1-6 (link)</a></li>
<li><a href='#'>Item 1-1-7 (link)</a></li>
</ul>
</li>
<li><a href='#'>Item 1-2 (submenu)</a>
<ul class="dc-siteSimpleMenu-lvl-2">
<li><a href='#'>Item 1-2-1 (link)</a></li>
<li><a href='#'>Item 1-2-2 (link)</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Item 2 (link)</a></li>
<li><a href='#'>Item 3 (link)</a></li>
<li><a href='#'>Item 4 (link)</a></li>
</ul>
</li>
</ul>
</div>
Here is my jsfiddle https://jsfiddle.net/duncanchard/3gvo02tk/15/
I have Created Mega Menu.
On button click mega menu will create and drop down will come down.
The mega menu content bar will hide slider.
I want to move slider down when menu dropdown appears and and the position of slider is replaced by mega menu content.
Dropdown mega menu is in absolute position. if i change it to relative it will replace position of slider with mega menu dropdown content.But styling navbar is disturbed.
this is navigation code
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse navbar-left">
<ul class="nav navbar-nav">
<li class="dropdown menu-large">
Home <b class="caret"></b>
<ul class="dropdown-menu megamenu row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Software</li>
<li>Desktop</li>
<li class="disabled">Mobile</li>
<li>Tablet</li>
<li class="divider"></li>
<li class="dropdown-header">Hardware</li>
<li>Arduino</li>
<li>Raspberry PI</li>
<li>VoCore</li>
<li>Banana PI</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Nano-Tech</li>
<li>AFM</li>
<li>STM</li>
<li>Nano-Tubes</li>
<li>Nano-Wires</li>
<li>Materials</li>
<li class="divider"></li>
<li class="dropdown-header">A.I.</li>
<li>Artificial Intelligence</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">SaaS</li>
<li>On-Demand</li>
<li>No Software</li>
<li>Cloud Computing</li>
<li class="divider"></li>
<li class="dropdown-header">On-Premise</li>
<li>Data Center</li>
<li>Hosting Environment</li>
<li>Internal IT</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Server-Side</li>
<li>PHP</li>
<li>Java</li>
<li>Python</li>
<li>Ruby</li>
<li>ColdFusion</li>
<li>ASP.NET</li>
<li>GO</li>
<li>Perl</li>
<li>Lasso</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Javascript to open dropdown
<script>
$(document).ready(function() {
jQuery(document).ready(function(){
$(".dropdown").hover(
function() { $('.dropdown-menu', this).stop().fadeIn("fast");
},
function() { $('.dropdown-menu', this).stop().fadeOut("fast");
});
});
}
</script>
css
.menu-large {
position: static !important;
}
.megamenu {
padding: 20px 0px;
width: 100%;
}
.megamenu>li>ul {
padding: 0;
margin: 0;
}
.megamenu>li>ul>li {
list-style: none;
}
.megamenu>li>ul>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: normal;
}
.megamenu>li ul>li>a:hover,
.megamenu>li ul>li>a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.megamenu.disabled>a,
.megamenu.disabled>a:hover,
.megamenu.disabled>a:focus {
color: #999999;
}
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
color: #00A7E8;
}
.megamenu.disabled>a:hover,
.megamenu.disabled>a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
cursor: not-allowed;
}
.megamenu.dropdown-header {
color: #428bca;
font-size: 18px;
}
If you code this in jsFiddle or codepen or just combine html,css,and js code without php then we can see the real problem.
I'm not able to run you code.
But as per your question i can say it may be issue with z-index.
When removing one element out of 3 from the panel of a tile, the 2 elements left are not fully aligned to the right - theres 1 space left.
Before:
before
<ul class="nav navbar-right panel_toolbox">
<li class="dropdown"><i class="fa fa-wrench"></i>
<ul class="dropdown-menu" role="menu">
<li>Settings 1</li>
<li>Settings 2</li>
</ul>
</li>
<li><a class="collapse-link"><i class="fa fa-chevron-up"> </i></a></li>
<li><a class="close-link"><i class="fa fa-close"></i></a></li>
</ul>
After:
after
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"> </i></a></li>
<li><a class="close-link"><i class="fa fa-close"></i></a></li>
</ul>
The CSS for panel_toolbox looks like that:
.panel_toolbox {
float: right;
min-width: 70px; }
.panel_toolbox > li {
float: left;
cursor: pointer; }
.panel_toolbox > li > a {
padding: 5px;
color: #C5C7CB;
font-size: 14px; }
.panel_toolbox > li > a:hover {
background: #F5F7FA; }
and the CSS for navbar-right:
.navbar-right {
margin-right: 0; }
Can it be fixed?
Rod, In the CSS, instead of:
.panel_toolbox > li {
float: left;
cursor: pointer; }
It should be:
.panel_toolbox > li {
float: right;
cursor: pointer; }
Why don't you add a "pull-right" class on each element?
<ul class"nav navbar-right panel_toolbox">
<li class="collapse-link pull-right"></li>
<li class="close-link pull-right"></li>
</ul>
It should helps you
My problem is creating a method that (on clicking a element) collapse all other elements within the nestled list that are not the target element or associated parent containers. I have looked around but nothing works for my list.
Basically I'm trying to collapse all active list elements except the target one.
Using bootstrap to handle a lot of things.
I have a method that makes a list element active on click.
The alert seems to output the ids of elements that need to be affected, and nothing collapses. Suggestions?
List Structure:
- Building
- Floor
- Room
Code:
//JS - Attempt to collapse all elements not clicked:
$('.expandable-menu a').click(function(e) {
var parent = $("#" + e.target.id).attr('data-parent');
$(".expandable-menu a").each(function() {
//if 1. has class active 2.Not target event, 3.Not a parent of target
if ($(this).hasClass('active') && $(this).attr('id') !== (e.target.id) && $(this).attr('id') !== (parent)) {
// alert($(this).attr('id') );
$(this).removeClass('active').addClass('collapsed');
}
});
});
<!--HTML - Example chunk from list:-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<ul>
<li id="level1">
<a id="title-b0" href="#" data-toggle="collapse" data-parent="#title-loc" data-target="#content-b0" class="collapsed" aria-expanded="false">
<span class="glyphicon glyphicon-triangle-right"></span>
Biology
</a>
<ul id="content-b0" class="nav collapse" style="height: 0px;" aria-expanded="false">
<li id="level2">
<a id="title-b0f0" class="" href="#" data-toggle="collapse" data-parent="title-b0" data-target="#content-f0" aria-expanded="true">
<span class="glyphicon glyphicon-triangle-bottom"></span>
Floor 4
</a>
<ul id="content-f0" class="nav collapse in" style="" aria-expanded="true"></ul>
<a id="title-b0f1" class="" href="#" data-toggle="collapse" data-parent="title-b0" data-target="#content-f1" aria-expanded="true">
<span class="glyphicon glyphicon-triangle-bottom"></span>
Floor 3
</a>
<ul id="content-f1" class="nav collapse in" style="" aria-expanded="true">
<li>
<a id="room-select" href="#">
<span class="glyphicon glyphicon-unchecked"></span>
Room 112
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
This example may help you out
$(document).ready(function() {
$('.tree li').each(function() {
if ($(this).children('ul').length > 0) {
$(this).addClass('parent');
}
});
$('.tree li.parent > a').click(function() {
$(this).parent().toggleClass('active');
$(this).parent().children('ul').slideToggle('fast');
});
$('#all').click(function() {
$('.tree li').each(function() {
$(this).toggleClass('active');
$(this).children('ul').slideToggle('fast');
});
});
$('.tree li').each(function() {
$(this).toggleClass('active');
$(this).children('ul').slideToggle('fast');
});
});
a{
cursor:pointer;
}
.tree ul {
list-style: none outside none;
}
.tree li a {
line-height: 25px;
}
.tree > ul > li > a {
color: #3B4C56;
display: block;
font-weight: normal;
position: relative;
text-decoration: none;
}
.tree li.parent > a {
padding: 0 0 0 28px;
}
.tree li.parent > a:before {
background-position: 25px center;
content: "-";
display: block;
height: 21px;
left: 0;
position: absolute;
top: 2px;
vertical-align: middle;
width: 23px;
}
.tree ul li.active > a:before {
background-position: 0 center;
}
.tree ul li ul {
border-left: 1px solid #D9DADB;
display: none;
margin: 0 0 0 12px;
overflow: hidden;
padding: 0 0 0 25px;
}
.tree ul li ul li {
position: relative;
}
.tree ul li ul li:before {
border-bottom: 1px dashed #E2E2E3;
left: -20px;
position: absolute;
top: 12px;
width: 15px;
}
#wrapper {
margin: 0 auto;
width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="wrapper">
<div class="tree">
<button id="all">Toggle All</button>
<ul>
<li><a>First Level</a>
<ul>
<li><a>Second Level</a></li>
<li><a>Second Level</a></li>
<li><a>Second Level</a></li>
</ul>
</li>
<li><a>First Level</a>
<ul>
<li><a>Second Level</a>
<ul>
<li><a>Third Level</a></li>
<li><a>Third Level</a></li>
<li><a>Third Level</a>
<ul>
<li><a>Fourth Level</a></li>
<li><a>Fourth Level</a></li>
<li><a>Fourth Level</a>
<ul>
<li><a>Fifth Level</a></li>
<li><a>Fifth Level</a></li>
<li><a>Fifth Level</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a>Second Level</a></li>
</ul>
</li>
<li><a>First Level</a>
<ul>
<li><a>Second Level</a></li>
<li><a>Second Level</a></li>
</ul>
</li>
</ul>
</div>
</div>
I have a project that requires me to add drop-down navigation. I am using GUMBY and have added the drop-downs.
The problem I am having is as you rollover each main navigation link- the sub-links drop-down but once you mouse over the sub-links - the main navigation color switches back. I've tried to stylize a mouse out event but that doesn't work.
How can I keep the main nav link the same color when you mouseover the sub-links?
http://ffresearch.com/who-we-are-dropdown.html
<style type="text/css">
#nav-orange li a:hover, #nav-orange li:hover a {
background-color: #fac55f !important;
color: white;
}
a.drkgreen:hover { background-color: #1f9390 !important; }
a.ltgreen:hover { background-color: #b3d88c !important; }
a.orange { background-color: #ffffff !important; }
a.orange:hover { background-color: #fac55f !important; }
a.ltblue { background-color: #ffffff !important; }
a.ltblue:hover { background-color: #26bfd0 !important; }
a.grey:hover { background-color: #8a949b !important; }
a.red:hover { background-color: #f16767 !important; }
a.red { background-color: #ffffff !important; }
</style>
<div class="navbar" gumby-fixed="top" id="nav1" style="background-image: url(img/white_banner_shadow4.png); background-position:bottom; background-repeat:repeat;">
<div class="row" >
<a class="toggle" gumby-trigger="#nav1 > .row > ul" href="#"><i class="icon-menu"></i></a>
<h1 class="four columns logo">
<a href="index.html">
<img src="img/FFR-logo3.png" gumby-retina />
</a>
</h1>
<ul class="eight columns" style="margin-top:30px;">
<li class="active">Our Difference</li>
<li style="background-color:#b3d88c; color:#FFF !important;" >Who We Are
<span class="not_mobile"><div class="dropdown">
<ul>
<li>Our Mission</li>
<li>Our Leadership</li>
</ul>
</div></span>
</li>
<li id="nav-orange">What We Do
<span class="not_mobile"><div class="dropdown">
<ul >
<li >Overview</li>
<li>Unique Research Services</li>
</ul>
</div></span>
</li>
<li>Our Capabilities
<span class="not_mobile"><div class="dropdown">
<ul>
<li>Experience</li>
<li>Qualitative</li>
<li>Quantitative</li>
<li>Support Services</li>
</ul>
</div></span>
</li>
<li>Connect</li>
<li>Tips and Tools
<span class="not_mobile"><div class="dropdown">
<ul>
<li>ProTalk™</li>
<li>Best Practice Tips</li>
</ul>
</div></span>
</li>
</ul>
</div>
</div>
in your CSS
change .navbar ul li > a:hover to .navbar ul li:hover > a
and a.orange:hover to li:hover > a.orange
and like so ..
Hope this will help you ..