I need need a way to get my active state to work properly in my sidebar.
Currently my problems are:
When a li is clicked, all children (.sub-menu) receive the active state state.
When a li (not sub-menu) is clicked after having clicked a submenu li the active state of the clicked submenu li is not removed.
Hope you can help.
$("#sidebar li").click(function(){
$(this).siblings().removeClass('active');
$(this).addClass('active');
$('#sidebar li').children().removeClass('active');
});
html
<div class="col-md-4" id="sidebar">
<?php
if (is_page('gulvservice')){
wp_nav_menu(array('menu'=>'gulvservice' ));
} elseif (is_page('malerservice')) {
wp_nav_menu(array('menu'=>'malerservice' ));
} elseif (is_page('industrilakering')) {
wp_nav_menu(array('menu'=>'industrilakering' ));
}
?>
<!-- <?php wp_nav_menu( array( 'theme_location' => 'gulvservice' ) ); ?> -->
<div class="gulvservice-kontaktinfo">
<p>EM. Meyers Eftf. A/S</p>
<p>CVR: 82510028</p>
<p>Tlf.: 36349500 / 40384053</p>
<p>E-mail: gulve#meyers.dk</p>
</div>
</div>
rendered html:
Found solutions to both problems.
1:
I achieved this using pseudo elements through css instead of jquery.
The reason i made some :before elements was due to some indentation on my sub-menu list items.
CSS:
#sidebar ul li{
text-align: left;
padding-left:25px;
position:relative;
}
#sidebar ul li a{
text-decoration: none;
color:white;
text-align:left;
position:relative;
z-index:100000;
}
#sidebar ul li:hover:after:not(.submenu){
content: "";
width:100%;
height:50px;
position:absolute;
top:0;
left:0;
z-index:100;
background: rgba(0,0,0,0.4);
}
#sidebar ul li.active:after{
content: "";
width:100%;
height:50px;
position:absolute;
top:0;
left:0;
z-index:100;
background: rgba(0,0,0,0.4);
}
#sidebar ul li ul li:hover:after{
content: "";
width:100%;
height:50px;
padding-left:25px;
position:absolute;
top:0;
left:0;
z-index:100;
background: rgba(0,0,0,0.4);
}
#sidebar ul li ul li:hover:before{
content: "";
width:25px;
height:50px;
position:absolute;
top:0;
left:-25px;
z-index:100;
background: rgba(0,0,0,0.4);
}
#sidebar ul li ul li.active:after{
content: "";
width:100%;
height:50px;
padding-left:25px;
position:absolute;
top:0;
left:;
z-index:100;
background: rgba(0,0,0,0.4);
}
#sidebar ul li ul li.active:before{
content: "";
width:25px;
height:50px;
position:absolute;
top:0;
left:-25px;
z-index:100;
background: rgba(0,0,0,0.4);
}
2: Credit goes to #mark.hch
First remove active class from all list items.
Next add active class to the clicked list item.
$('#sidebar li').removeClass('active');
$(this).addClass('active');
Related
Currently developing a website that contains a drop down navigation menu with jQuery. However I'm having an issue where the drop down isn't displaying on top of the other elements when I hover over the parent link... I think it's pretty obvious that it's a z-index issue but I have been stumped for a while now so any help would be appreciated.
HTML
<div class="navigation">
<ul>
<li>Link 1</li>
<li>Parent 1
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</ul>
</div>
CSS
.navigation {
position:relative;
background-color:#4F4F4F;
width:100%;
min-width:910px;
box-shadow: 0px 2px 3px rgba(0,0,0, .4);
z-index:10;
overflow-y:hidden;
overflow-x:auto;
height:auto;
}
.navigation ul {
margin:0;
padding:0;
list-type:none;
text-align:center;
position:relative;
}
.navigation ul li {
display:inline-block;
padding-left: 52px;
position:relative;
z-index:11;
}
.navigation ul li a {
display:block;
height:29px;
color:#fff;
text-decoration:none;
font-family: cabinmedium;
font-size:13px;
padding-top:18px;
position:relative;
z-index:11;
}
.navigation ul ul {
position:absolute;
width:auto;
display:none;
box-shadow: 0px 1px 1px #999;
margin-left:-10px;
background-color:#89c63b;
text-align:left;
padding-left:10px;
padding-right:10px;
z-index:11;
}
.navigation ul ul li {
display:block;
background-color:#89c63b;
padding:0;
width:auto;
min-width: 100px;
position:relative;
z-index:11;
}
jQuery
$(document).ready(function() {
$(".navigation ul li").hover(function() {
$(this).find("ul").stop().fadeToggle(400);
})
});
NOTE: I included the jQuery just incase but I have tested and it does infact fade in/out the navigation elements as it needs to.
Any ideas anybody?
'navigation' class will be as like below code without 'overflow-y', 'overflow-x'
.navigation {
position: relative;
background-color: #4F4F4F;
width: 100%;
min-width: 910px;
box-shadow: 0px 2px 3px rgba(0,0,0, .4);
z-index: 10;
/* overflow-y: hidden; */
/* overflow-x: auto; */
height: auto;
}
demo
The below code achieves a slide up and down action on the selected 'element' but for some reason after slide up, the fa-chevron-down font awesome icon does not display:
function showHideChatBox(element){
var e = jQuery(element).parents(".box1").children(".box1-body");
var t = 0;
if(jQuery(element).hasClass("collapse")) {
jQuery(element).removeClass("collapse").addClass("expand");
t = jQuery(element).children(".fa-chevron-down");
t.removeClass("fa-chevron-down").addClass("fa-chevron-up");
e.slideUp(200);
}
else {
jQuery(element).removeClass("expand").addClass("collapse");
t = jQuery(element).children(".fa-chevron-up");
t.removeClass("fa-chevron-up").addClass("fa-chevron-down");
e.slideDown(200);
}
}
I don't think you are approaching this correctly, you should be referencing the toggle class to properly 'toggle' the font awesome chevron icons. Try using the jQuery toggle class like so:
JS
$(function () {
$('.dropdown_icon').click(function () {
$("#dropdown").slideToggle('fast');
$(this).children(".fa-chevron-down, .fa-chevron-up").toggleClass( 'fa-chevron-down fa-chevron-up');
});
});
Which is a simplified version of the answer to this question: Change class on inactive icon - jquery
HTML
<div id="header">
<ul class="hdr_link_icons">
<li class="dropdown_icon">
Dropdown<i class="fa fa-chevron-down"></i>
</li>
</ul>
<ul class="dropdown_area" id="dropdown">
<li>Your Account <span class="hdr_link_arrow">»</span></li>
<li>Corporate Sales <span class="hdr_link_arrow">»</span></li>
<li>Got a voucher? <span class="hdr_link_arrow">»</span></li>
</ul>
</div>
CSS
body { margin:0; padding:0; }
ul { margin:0; padding:0; }
#header { height:auto; width:100%; overflow:hidden; border-bottom:1px dashed #c1c1c1; padding:5px 0; }
#header .header_logo { height:40px; width:auto; float:left; }
#header .hdr_link_icons { height:40px; width:auto; float:right; list-style:none; background-color: yellow; }
#header .hdr_link_icons li { height:40px; width:70px; float:right; list-style:none; border-right:1px solid #ebebeb; padding:0 0 0 5px; cursor:pointer; position:relative; }
#header .hdr_link_icons li i { position:absolute; right:7px; top:15px; color:#666666; }
#header .hdr_dropdown_area { height:auto; width:100%; background:#F5F2F2; border-top:5px solid #712D55; position:absolute; top:51px; right:0; }
#header .hdr_dropdown_area li { height:auto; float:none; border-bottom:1px dotted #c1c1c1; font-family:tahoma, arial; padding:10px 0; margin:0 0 0 10px !important; text-align:left; text-transform:capitalize; }
#header .hdr_dropdown_area li:last-child { border:none; }
#header .hdr_dropdown_area li a { color:#333333; text-decoration:none; }
#header .dropdown_area { display:none; }
I have a mobile site I'm working on. I finally got the JS code to work for showing submenu on click rather than hover. Now I'm having trouble positioning the submenu directly under the main menu. I researched the best i can, found that i need to make the main menu position "relative" and submenu "absolute". I've been going in circles trying to figure apply that, but no luck. The code is a bit messy so pardon me. I'm just a noob.
HTML
<html>
<head>
<link rel="stylesheet" href="phone.css">
</head>
<body>
<img class="smlogo" alt="" src="clearlogo123.png">
<div id="menuclick" class="smenu_div">
<ul>
<li>Menu
</div>
<div id="hiddenMenu" class="smenu_div" style="display: none;">
<ul>
<li>1Submenu</li>
<li>2Submenu</li>
</ul>
</div>
</li>
</ul>
<br>
<script>
var hidden = true;
document.getElementById('menuclick').onclick = function () {
document.getElementById('hiddenMenu').style.display = (hidden) ? 'block' : 'none';
hidden = !hidden;
};
</script>
</body></html>
CSS
.smenu_div ul
{
padding:0px;
margin-top:35px;
margin-right:40px;
font-family:georgia;
font-size:60px;
color:#ffffff;
list-style:none;
text-indent:15px;
text-align:center;
width:35%;
float:right;
overflow:hidden;
position: relative;
display: block;
}
.smenu_div ul li
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background:#000000;
line-height:justified;
border-bottom:1px solid #333;
margin-top: 10px;
z-index: 50;
position:relative;
}
.smenu_div li ul
{
position:absolute;
float:right;
}
.smenu_div ul li a
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-decoration:none;
color:#ffffff;
display:block;
position:relative;
}
.smenu_div ul li a:hover
{
color:#000000;
background:#fdff30;
}
.smenu_div ul li#active
{
position:relative;
color:#000000;
background:#fdff30;
}
Try changing your HTML so that you dont have a div ending in the middle of the first li.
Then if you put an ID directly onto the hidden menu, you can use the javascript to directly hide / show the hidden menu
http://jsbin.com/fexazihe/1/edit?html,css,js,output
HTML
<body>
<img class="smlogo" alt="" src="clearlogo123.png">
<div id="menuclick" class="smenu_div">
<ul>
<li>
Menu
<ul id='hiddenMenu'>
<li>1Submenu</li>
<li>2Submenu</li>
</ul>
</li>
</ul>
</div>
</body>
CSS
.smenu_div ul
{
padding:0px;
margin-top:35px;
margin-right:40px;
font-family:georgia;
font-size:60px;
color:#ffffff;
list-style:none;
text-indent:15px;
text-align:center;
width:35%;
overflow:hidden;
position: relative;
display: block;
}
.smenu_div ul li
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: rgba(0,0,0,0);
line-height:justified;
border-bottom:1px solid #333;
margin-top: 10px;
z-index: 50;
position:relative;
}
/* Changed this so that your hidden menu is hidden by default */
.smenu_div li ul
{
display: none;
position: relative;
width: 100%;
background: transparent;
}
.smenu_div ul li a
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-decoration:none;
color:#ffffff;
background: #000000;
display:block;
position:relative;
}
.smenu_div ul li a:hover
{
color:#000000;
background:#fdff30;
}
.smenu_div ul li#active
{
position:relative;
color:#000000;
background:#fdff30;
}
JS
<script>
var hidden = true;
document.getElementById('menuclick').onclick = function () {
document.getElementById('hiddenMenu').style.display = (hidden) ? 'block' : 'none';
hidden = !hidden;
};
</script>
I have a bit of a problem and I am struggling to solve it for some time now.
Top menu is working... strange.
To see the problem go to: proba.dalipro.com.
JS for controlling menu:
var timeoutID;
jQuery(function(){
jQuery('.dropdown').mouseenter(function(){
jQuery('.sublinks').stop(false, true).hide();
window.clearTimeout(timeoutID);
var submenu = jQuery(this).parent().next();
submenu.css({
position:'absolute',
top: jQuery(this).offset().top + jQuery(this).height() + 'px',
left: jQuery(this).offset().left + 'px',
zIndex:100
});
submenu.stop().slideDown(300);
submenu.mouseleave(function(){
jQuery(this).slideUp(300);
});
submenu.mouseenter(function(){
window.clearTimeout(timeoutID);
});
});
jQuery('.dropdown').mouseleave(function(){
// timeoutID = window.setTimeout(function() {jQuery('.sublinks').stop(false, true).hide();}, 250); // just hide
timeoutID = window.setTimeout(function() {jQuery('.sublinks').stop(false, true).slideUp(300);}, 250); // slide up
});
});
and css for menu:
/* CSS For Dropdown Menu Start */
#menu_top ul
{
list-style:none;
padding:0px;
margin:0px;
}
#menu_top ul li
{
display:inline;
float:left;
}
#menu_top ul li a
{
color:#ffffff;
background:#990E00;
margin-right:5px;
font-weight:bold;
font-size:12px;
text-decoration:none;
display:block;
width:100px;
height:25px;
line-height:25px;
text-align:center;
border: 1px solid #560E00;
}
#menu_top ul li a:hover
{
color:#cccccc;
background:#560E00;
font-weight:bold;
text-decoration:none;
display:block;
width:100px;
text-align:center;
border: 1px solid #000000;
}
#menu_top ul li.sublinks a
{
color:#000000;
background:#f6f6f6;
border-bottom:1px solid #cccccc;
font-weight:normal;
text-decoration:none;
display:block;
width:100px;
text-align:center;
margin-top:2px;
}
#menu_top ul li.sublinks a:hover
{
color:#000000;
background:#FFEFC6;
font-weight:normal;
text-decoration:none;
display:block;
width:100px;
text-align:center;
}
#menu_top ul li.sublinks
{
display:none;
position: relative;
}
/* CSS For Dropdown Menu End */
What I need to do to fix drop down function?
Take left out of the submenu css:
submenu.css({
position:'absolute',
top: jQuery(this).offset().top + jQuery(this).height() + 'px',
zIndex:100
});
Also, change #menu_top ul and #menu_top ul li in your style sheet to:
#menu_top ul
{
list-style:none;
padding:0px;
margin:0px;
float: left
position: relative;
}
#menu_top ul li
{
}
I have an issue with superfish which makes the dropdown menu not appear at all in ONLY IE8. It shows up in everything else (even IE6) but not IE8. I didn't modify the source JS at all and I'm calling a div called "subnav" where my list is displayed.
What SHOULD happen is when I mouse-over the menu-item, it changes the dropdown menu's CSS to "visibility: visible, display:block" and displays the menu. In IE8, nothing happens and no CSS is changed at all.
Any ideas what could be causing it? I'm also using the supersubs plugin for superfish.
Here is the css:
#navbar ul{
margin:10;
padding:0;
width:1000px;
}
#navbar li{
float:left;
color:#191919;
list-style-type:none;
text-transform:uppercase;
background:transparent url('../images/common/layout/nav-separator.jpg') center right no-repeat;
padding:10px 0;
}
#navbar li.last{
background:none;
}
#navbar ul li a{
padding: 12px 33px;
color: #fff;
text-decoration: none;
}
#navbar ul li a:hover{
color:#05af0d;
background:transparent url(../images/common/layout/nav-hover-highlight.png) top center no-repeat;
}
#navbar ul li a.hover-arrow:after{
margin-left:10px;
content:url(../images/common/nav-arrow.png);
}
#navbar ul li:hover a.hover-arrow:after{
margin-left:10px;
content:url(../images/common/nav-arrow-roll.png);
}
#navbar ul li a.hover-arrow:hover{
background:#000 url('../images/common/layout/nav-separator.jpg') right 9px no-repeat;
}
#navbar ul li p{
margin:0;
display:inline-block;
}
/*Sub Nav Lists */
.subnav {
display:none;
visibility:hidden;
}
#navbar ul li ul{
margin:0; padding:0;
position: absolute;
left: auto; top: 40px;
background: #333;
z-index: 99;
}
#navbar ul li ul li{
background:none;
}
#navbar ul li ul li a{
padding:0px 3px;
display:inline-block;
margin:0;
width:150px;
text-transform:capitalize;
}
#navbar ul li ul li a:hover{
background-color:#a7a7a7;
color:#000;
border:none;
background-image:none;
font-weight:bold;
}
Here is how it's going on the page:
<div id="navbar">
<ul class="topnav">
<li id="item 1"><p></p>
<ul class="subnav"></subnav>
</li>
<li id="item 2"><p></p>
<ul class="subnav"></subnav>
</li>
etc...
</ul>
</div>
Not sure if this will address the problem you're seeing, but I noticed in your html snippet that the UL elements with the subnav class aren't being closed with an appropriate tag. First thing I'd try is replacing them with:
<ul class="subnav"></ul>
Any other errors may not be being handled by IE8 as graciously as other browsers. Try running your page through a validator (ie: The W3C Markup Validator)