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.
Related
So the issue is I use data-target in the anchor(a) tag instead of href, so I am not able to style it when its active . So I usually use 'a:active{styling}' , but its not working for this one.
Here is the JS fiddle: https://jsfiddle.net/sp1vh94u/4/
Here is the code:
<ul >
<li>
<a data-target="#a" aria-controls="a" role="tab" data-toggle="tab">A</a>
</li>
<li>
<a data-target="#b" aria-controls="b" role="tab" data-toggle="tab">B</a>
</li>
<li>
<a data-target="#c" aria-controls="c" role="tab" data-toggle="tab">C</a>
</li>
</ul>
Everything is working just fine, I need help with the styling thats all. :)
If you want avoid href then it is possible with JS.
const as = document.querySelectorAll('.nav-tabs a')
as.forEach(a => a.addEventListener('click', e => {
e.target.classList.add('visited');
}))
<!-- begin snippet: js hide: false console: true babel: false -->
.nav-tabs a{
cursor: pointer;
text-decoration: none;
color: black;
}
.nav-tabs a:hover{
color: orange;
}
.nav-tabs a:active{
color: red;
}
.visited {
color: white !important;
background: red;
}
<div class="navcontent" role="tabpanel">
<ul id="BarTab" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
Mat
</li>
<li role="presentation">
Bat
</li>
<li role="presentation">
Cat
</li>
</ul>
</div>
I did the "expand/collapse all" function, everything is working well, except the arrow. It doesn't pointing to the correct direction. I'm not sure how to do that, so I leave it empty on my code. My issue is shown below.
(Red box represents the click action)
Click "View all", can see the expanders are opened. The arrows pointing down.
Click "A" to collapse the expander, and the arrow pointing up.
Click "Collapse all", the expanders are collpased. Now you can see my problem, "A" arrow is pointing up and the rest are pointing down.
Hoping that some of you could provide me with some advice. Thanks!
$(".aq_epdtitle").click(function() {
$('.aq_expandct').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".aq_epdtitle1").click(function() {
$('.aq_expandct1').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".aq_epdtitle2").click(function() {
$('.aq_expandct2').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".expandall").click(function() {
$('.aq_expandct').slideDown().toggleClass('active');
$('.aq_expandct1').slideDown().toggleClass('active');
$('.aq_expandct2').slideDown().toggleClass('active');
});
$(".collapseall").click(function() {
$('.aq_expandct').slideUp().removeClass('active');
$('.aq_expandct1').slideUp().removeClass('active');
$('.aq_expandct2').slideUp().removeClass('active');
});
ul { list-style-type: none; margin:0; padding: 0; }
.eservices_left ul li{display:inline;}
.aq_expandct, .aq_expandct1, .aq_expandct2 {
display: none;
padding : 5px;
}
.aq_epdtitle, .aq_epdtitle1, .aq_epdtitle2{
background:#ccc url('https://image.ibb.co/jUyN5Q/arrow_up_grey.png') no-repeat;
background-position:right 0px;
cursor:pointer;
padding: 0 10px;
margin: 10px 0;
}
.collapsed .aq_epdtitle, .collapsed .aq_epdtitle1, .collapsed .aq_epdtitle2{
background-image:url('https://image.ibb.co/d669kQ/arrow_down_grey.png');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="expandall">View all</div>
<div class="collapseall">Collapse all</div>
<ul>
<li class="mobexpand collapsed">
<div class="aq_epdtitle">A</div>
<ul class="aq_expandct">
<li>A1</li>
<li>A2</li>
</ul>
</li>
<li class="mobexpand collapsed">
<div class="aq_epdtitle1">B</div>
<ul class="aq_expandct1">
<li>B1</li>
<li>B2</li>
</ul>
</li>
<li class="mobexpand collapsed noborder">
<div class="aq_epdtitle2">C</div>
<ul class="aq_expandct2">
<li>C1</li>
<li>C2</li>
</ul>
</li>
</ul>
Just add $('.mobexpand').addClass('collapsed'); ($(".expandall").click) in show all function
and $('.mobexpand').removeClass('collapsed'); ($(".collapseall").click) and in collsapse all function as bellow
$(".aq_epdtitle").click(function() {
$('.aq_expandct').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".aq_epdtitle1").click(function() {
$('.aq_expandct1').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".aq_epdtitle2").click(function() {
$('.aq_expandct2').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".expandall").click(function() {
$('.aq_expandct').slideDown().toggleClass('active');
$('.aq_expandct1').slideDown().toggleClass('active');
$('.aq_expandct2').slideDown().toggleClass('active');
$('.mobexpand').removeClass('collapsed');
});
$(".collapseall").click(function() {
$('.aq_expandct').slideUp().removeClass('active');
$('.aq_expandct1').slideUp().removeClass('active');
$('.aq_expandct2').slideUp().removeClass('active');
$('.mobexpand').addClass('collapsed');
});
ul { list-style-type: none; margin:0; padding: 0; }
.eservices_left ul li{display:inline;}
.aq_expandct, .aq_expandct1, .aq_expandct2 {
display: none;
padding : 5px;
}
.aq_epdtitle, .aq_epdtitle1, .aq_epdtitle2{
background:#ccc url('https://image.ibb.co/jUyN5Q/arrow_up_grey.png') no-repeat;
background-position:right 0px;
cursor:pointer;
padding: 0 10px;
margin: 10px 0;
}
.collapsed .aq_epdtitle, .collapsed .aq_epdtitle1, .collapsed .aq_epdtitle2{
background-image:url('https://image.ibb.co/d669kQ/arrow_down_grey.png');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="expandall">View all</div>
<div class="collapseall">Collapse all</div>
<ul>
<li class="mobexpand collapsed">
<div class="aq_epdtitle">A</div>
<ul class="aq_expandct">
<li>A1</li>
<li>A2</li>
</ul>
</li>
<li class="mobexpand collapsed">
<div class="aq_epdtitle1">B</div>
<ul class="aq_expandct1">
<li>B1</li>
<li>B2</li>
</ul>
</li>
<li class="mobexpand collapsed noborder">
<div class="aq_epdtitle2">C</div>
<ul class="aq_expandct2">
<li>C1</li>
<li>C2</li>
</ul>
</li>
</ul>
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
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 ..
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.