Develop Reference

Toggle mobile navigation and adress data

Sup guys,
for a while now I have been trying to get this to work in jQuery, but I have no idea how to accomplish that.
It's about the mobile navigation of a basic website.
Basically I am trying to achieve that the mobile navigation closes if we click on the 3 dots with the adress data and the other way around. You can see it in this example:
https://www.templatemonster.com/de/demo/62436.html
Choose the mobile version to see what I mean.
Does anyone know how to do this with jQuery or javascript?
Here is what I have currently:
Adress Data
$('.js--adress-icon').click(function() {
var kont = $('.js--adress-nav');
kont.slideToggle(200);
});
Mobile Navigation
var hamburger = $('#hamburger-icon');
hamburger.click(function() {
var nav = $('.js--main-nav');
nav.slideToggle(200);
hamburger.toggleClass('active');
return false;
});
if ($(window).width() < 768){
$('.main-navigation li a').on('click', function(){
$('.js--main-nav').hide();
$('#hamburger-icon').removeClass('active');
});
};
Thx in advance!

I don't know what your html looks like but this is a simple way to achieve this using css and javascript
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<nav class="menu">
<ul class="active">
<li class="current-item">Home</li>
<li>Menu1</li>
<li>Menu2</li>
</ul>
<a class="toggle-nav" href="#">⁝</a>
</nav>
</body>
then your javascript
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});
then your css
/*----- Toggle Button -----*/
/*----- Menu -----*/
#media screen and (min-width: 860px) {
.menu {
width:100%;
padding:10px 18px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
}
}
.menu ul {
display:inline-block;
}
.menu li {
margin:0px 50px 0px 0px;
float:left;
list-style:none;
font-size:17px;
}
.menu li:last-child {
margin-right:0px;
}
.menu a {
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
color:#777;
transition:color linear 0.15s;
}
.menu a:hover, .menu .current-item a {
text-decoration:none;
color:#66a992;
}
/*----- Responsive -----*/
#media screen and (max-width: 1150px) {
.wrap {
width:90%;
}
}
#media screen and (max-width: 970px) {
.search-form input {
width:120px;
}
}
#media screen and (max-width: 860px) {
.menu {
position:relative;
display:inline-block;
}
.menu ul.active {
display:none;
}
.menu ul {
width:100%;
position:absolute;
top:120%;
left:0px;
padding:10px 18px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
}
.menu ul:after {
width:0px;
height:0px;
position:absolute;
top:0%;
left:22px;
content:'';
transform:translate(0%, -100%);
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:7px solid #303030;
}
.menu li {
margin:5px 0px 5px 0px;
float:none;
display:block;
}
.menu a {
display:block;
}
.toggle-nav {
padding:20px;
float:left;
color:#777;
font-size:20px;
}
.toggle-nav:hover, .toggle-nav.active {
text-decoration:none;
color:#66a992;
}
}
check this fiddle : https://jsfiddle.net/wggs8pf8/

Remove active state from parent when child is clicked and vice versa

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');

After slide up action, font awesome icon does not display

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; }

Onmouseover options menu on each td li tag

Whats the best way to achieve that kinda of 'onmouseover options menu to the right' that exists on the each feed of Google Reader or in Gmail->Inbox, Sent, etc?
Self coded javascript + CSS? Or can jQuery achieve it more easily?

EXAMPLE DEMO
I don't know how much experience you have with jQuery... Here is the code I used in the demo:
$('#nav li').hover(function(){
$('#description').hide();
$('span', this).stop(1).fadeTo(300,1);
},function(){
$('span', this).stop(1).fadeTo(300,0);
});
$('#nav span').click(function(){
var spanPosT = $(this).offset().top;
var spanPosL = $(this).offset().left;
$('#description').css({left:(spanPosL+24)+'px',top:spanPosT+'px'}).fadeTo(300,1);
});
$('#description').mouseout(function(){
$(this).hide();
});
HTML:
<div id="description"></div>
<div id="nav">
<ul>
<li>Option 1<span>+</span></li>
<li>Something 2<span>+</span></li>
<li>Else 3<span>+</span></li>
</ul>
</div>
CSS:
ul{
list-style:none;
}
#nav li{
position:relative;
width:120px;
background:#f3f3f3;
margin:3px 0;
padding:2px 10px;
color:#666;
text-shadow:0px 1px 0px #fff;
cursor:pointer;
}
#nav li:hover{
background:#eee;
}
#nav li span{
display:none;
border-left:1px solid #bbb;
position:absolute;
right:0px;
padding:0 6px;
color:#777;
}
#nav li span:hover{
background:#fff;
color:#444;
}
#description{
display:none;
position:absolute;
z-index:2;
background:#eee;
border:1px solid #777;
width:250px;
height:120px;
padding:15px;
}
If you don't know how to populate the area on-click with the adequate content... let me know

$('element').hover(function(){
//code
});
Or
$('element').on('hover', function(){
//code
});

Do you mean that the background-color changes when a mouse is over the menu?
Then you can use CSS
eg
a:hover {
background-color: #ccc;
}
https://developer.mozilla.org/en/CSS/%3Ahover

Here is Example
HTML:
<div id="hoverable"><span id="arrow"></span>Hoverable
<ul id="options">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</div>
CSS:
#hoverable
{
text-align: left;
padding:5px;
background:#eee;
border:1px solid #ddd;
width:120px;
height:30px;
position:relative;
line-height:28px;
}
#options
{
position:absolute;
display:none;
list-style:none;
background:#ddd;
width:100px;
display:none;
margin:0;
padding-left:15px;
border:1px solid #333;
color: #000;
}
#options li
{
padding: 5px 0 5px 5px
}
#arrow
{
width:15px;
height:15px;
border-radius: 3px;
background:#fff;
float:right;
margin-right:8px;
margin-top:8px;
display:none
}
jQuery:
$(function() {
$("#hoverable").on('mouseenter',
function(e) {
$(this).css({
background: '#000',
opacity: 0.8,
color: '#fff'
}).find('#arrow').show().css({
display: 'block'
});
}).on('mouseout',
function(e) {
if ($('#arrow').is(':visible') && !$('#options').is(':visible')) $('#arrow:visible').hide();
$(this).css({
background: '#eee',
opacity: 1,
color: '#000'
});
});
$('#arrow').on('click',
function() {
if ($('#options', $(this).parent()).is(':visible')) {
$('#options').hide();
} else {
$(this).parent().find('#options').show().css({
top: $(this).parent().height() + 'px',
left: $(this).position().left + 'px'
});
}
}).on('mouseenter',
function() {
$(this).show().parent().css({
background: '#000',
opacity: 0.8,
color: '#fff'
});
});
});

Dropdown menu fails in ie7

My jquery dropdown menu is fails in IE7 or IE8 Compatibility view.
I use this jquery for the dropdown menu in the below link:
var timeout = 1000;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('.menu ul > li').bind('mouseover', jsddm_open)
$('.menu').bind('mouseout', jsddm_timer)});
document.onclick = jsddm_close;
http://www.urbanlifefeed.com/cruise_ulf/
And this is the css:
div.menu { height:49px;}
div.menu ul {
/*width:886px;
margin:0 7px;*/
width:921px;
margin:0;
background:url(images/nav_bg.gif) repeat-x 0 0;
float:left;
border-left: 1px solid #FFFFFF;
}
div.menu ul li {
font-family:"Myriad Pro", Arial, Helvetica, sans-serif;
font-size:21px;
line-height:49px;
padding:0 12px;
text-transform:uppercase;
float:left;
border-right: 1px solid #FFF;
position:relative;
}
div.menu ul li ul
{
position:absolute;
top:49px;
left:0;
width:280px;
border:0px;
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
background:url(images/sub_nav_bg.png) repeat 0 0;
z-index:999999 !important;
visibility:hidden;
float:none;
display:inline-block;
}
div.menu ul li ul li:hover {background:url(images/sub_nav_bg.png) repeat 0 0;}
div.menu ul li ul li
{
border:0px;
border-bottom:1px solid #f4c726;
width:256px;;
float:left;
}
div.menu ul li ul li a
{ color:#f4c726; text-transform:capitalize;}
div.menu ul li:hover{
background:url(images/nav_roll_bg.png) repeat-x center 0;
}
div.menu ul li a {
color:#FFF;
text-decoration:none;
float:left;
height:49px;
width:100%;
}
div.menu ul li a:hover{
color:#fbf0cc;
}

Looks to me like the menu is sitting behind the slider container. You could use the z-index attribute to ensure that the menu block always appears above the slider block. For example, the div that holds the slider you can set a z-index of 1, and then set the menu a z-index of 2 or above.