We Keep Coding

How to change which ionicon is displayed upon menu toggle

What I'm trying to do is have the 'menu-outline' ionicon display on my website, until it is clicked and the menu is toggled, where the 'close-outline' icon will replace it, and vice versa. I'm using jQuery.
I know you can toggle classes, but my ionicons are not defined by their classes, but by their names:
<a class="menu-button js-menu-button"><ion-icon name="menu-outline"></ion-icon></a>
My jQuery so far only toggles the menu but does nothing with the icon:
$(".js-menu-button").click(function() {
var nav = $(".js-main-nav");
var icon = $(".js-menu-button ion-icon");
/* appear and disappear */
nav.slideToggle(200);
});
Is there any way I can toggle the name of the icon? Or is there another way to do this? Thanks for any suggestions.

You can toggle the name of the icon like this:
$(".js-menu-button").click(function() {
var nav = $(".js-main-nav");
var icon = $(".js-menu-button ion-icon");
if (icon.attr("name") == "menu-outline") {
icon.attr("name", "close-outline");
}
else {
icon.attr("name", "menu-outline")
}
/* appear and disappear */
nav.slideToggle(200);
});
Another possibility is this:
$(".js-menu-button").click(function() {
var nav = $(".js-main-nav");
var icon = $(".js-menu-button ion-icon");
icon.attr('name', function(index, attribute){
return attribute == "menu-outline" ? "close-outline" : "menu-outline";
});
/* appear and disappear */
nav.slideToggle(200);
});

Hide menu after click in betheme

I have an overlay menu (Wordpress betheme)
After I click on a menu item it doesn't close automatically.
Can anybody help to close the menu after the click?
/* ---------------------------------------------------------------------------
* Menu | Overlay
* --------------------------------------------------------------------------- */
$('.overlay-menu-toggle').click(function(e) {
e.preventDefault();
$(this).toggleClass('focus');
$('#Overlay').stop(true, true).fadeToggle(500);
var menuH = $('#Overlay nav').height() / 2;
$('#Overlay nav').css('margin-top', '-' + menuH + 'px');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Overlay">
<nav id="overlay-menu">
<ul id="menu-felso-menu" class="menu overlay-menu">
<li id="menu-item-112" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-112">Miért mi?</li>
</ul>
</nav>
</div><a class="overlay-menu-toggle" href="#"><i class="open icon-menu-fine"></i>TOGGLE</a>

this worked for me with the Side Slide menu. Just put the code in the JS window in the "Theme Options" and adapt the menu IDs to your code. Betheme does nothing else than slide in and out the mobile menu (e.g. right: -250px;), slide the whole body to the left (e.g. left: -125px;) and display a dark "body_overlay" when the menu is active. I have links with #anker and links for normal subpages so I addressed each #anker separately (#menu-item-155).
The class .icon-menu-fine is from the burger menu to get things working again after closing the menu through JS.
jQuery( document ).ready( function( $ ) {
$('#menu-item-155 a').click(function(e) {
e.preventDefault();
$(this).toggleClass('focus');
$('#Side_slide').stop(true, true).fadeToggle(500);
$('#Side_slide').css('right', '-250px');
$('body').css('left', '0px');
$('#body_overlay').css('display', 'none');
});
$('.icon-menu-fine').click(function(e) {
e.preventDefault();
$('#Side_slide').css('right', '0px');
$('body').css('left', '-125px');
$('#body_overlay').css('display', 'block');
$('#Side_slide').css('display', 'block');
});
});

I've just copied part of BeTheme code, that closes menu with a little modifications.
Just put this code in the JS window in the "Theme Options" > "Custom CSS & JS":
jQuery(document).ready(function($) {
/* Close Side Menu on item click */
$('#Side_slide .menu-item a').click(function(e) {
e.preventDefault()
/* globals jQuery, mfn */
var mobileInitW = (mfn.mobileInit) ? mfn.mobileInit : 1240
var slide = $('#Side_slide')
var overlay = $('#body_overlay')
var ssMobileInitW = mobileInitW
var pos = slide.hasClass('left') ? 'left' : 'right'
var shiftSlide = -slide.data('width')
var shiftBody = shiftSlide / 2
var duration = 300
if (pos === 'left') {
slide.animate({ 'left': shiftSlide }, duration)
$('body').animate({ 'right': 0 }, duration)
} else {
slide.animate({ 'right': shiftSlide }, duration)
$('body').animate({ 'left': 0 }, duration)
}
overlay.fadeOut(300)
// if page contains revolution slider, trigger resize
if ($('.rev_slider').length) {
setTimeout(function() {
$(window).trigger('resize')
}, 300)
}
})
})

This is what worked for me. It seems the action button that is used will go to the set anchor on the page but wouldn't close the slide menu. Really weird behavior. Not sure ever why you would like that effect, especially when a dark overlay is placed over the page.
It seemed for in my case I needed to remove all the dollar signs. Manuel had the solution just had to change things because of the $'s
Of course, you will see I had to adjust the initial tag that I wanted to be detected for the closing of the slider.
jQuery(document).ready(function()
{
jQuery('a.action_button.scroll').click(function(e) /* Change this line with the ones below for different menu behaviours*/
{
e.preventDefault();
jQuery(this).toggleClass('focus');
jQuery('#Side_slide').stop(true, true).fadeToggle(500);
jQuery('#Side_slide').css('right', '-250px');
jQuery('body').css('left', '0px');
jQuery('#body_overlay').css('display', 'none');
});
jQuery('.icon-menu-fine').click(function(e)
{
e.preventDefault();
jQuery('#Side_slide').css('right', '0px');
jQuery('body').css('left', '0px');
jQuery('#body_overlay').css('display', 'block');
jQuery('#Side_slide').css('display', 'block');
});
});
Really sweet stuff. It was super sweet seeing the menu close finally on click.
Of course, I have since adjusted it so that if any menu element is clicked/touched on then the slide menu will disappear with the below adjustment to the above code.
jQuery('ul#menu-main-menu-1').click(function(e)
I found the most pleasing behavior was to use this one though as it will trap any click on the menu and close it.
jQuery('div#Side_slide').click(function(e)
btw: this code is inserted into the "Theme Options --> Custom CSS & JS --> JS

Only wants to close menu by background div & button

I have two divs:
First div: its the background div ".menu_bg" (width + height 100%)
Second div: its the content (maybe width + height 40%)
So, if I click the "first div / background div" I want that the "first & second div" fades out. My Problem is, that this also happened when I only click the "second div / the content div".
Thats my code:
(function(window) {
'use strict';
var body = document.body,
mask = document.createElement("div"),
toggleSlideTop = document.querySelector(".toggle-slide-top"),
slideMenuTop = document.querySelector(".slide-menu-top"),
activeNav;
mask.className = "mask";
/* slide menu top */
toggleSlideTop.addEventListener("click", function() {
classie.add(body, "smt-open");
document.body.appendChild(mask);
activeNav = "smt-open";
});
/* hide active menu */
[].slice.call(document.querySelectorAll(".close-menu, .menu_bg")).forEach(function(el, i) {
el.addEventListener("click", function() {
classie.remove(body, activeNav);
activeNav = "";
document.body.removeChild(mask);
});
});
})(window);
Whats wrong?
UPDATE:
I create a fiddle.

It seems like your second div is nested to the first one. In this case any event fired on the second div will propagate up to all parent elements, until you call event.stopPropagation() method. So what you need is to call this method from click listener added to nested element. Somthing like:
document.querySelector('ul').addEventListener('click', function(e) {
e.stopPropagation();
});

Controling Menu Text Overflow in Jquery

I am new to JQuery. I'm using a menu bar shown in the following link
http://tympanus.net/Tutorials/UIElements/LargeDropDown/
The source code can be downlloaded from
http://tympanus.net/codrops/2010/07/14/ui-elements-search-box/
I have attatched the code and files to my project.
The problem is that when i first open the page, it showing the contents in the right way as shown in the image below
and on mouse enter the list item expands and shows the sub details below correctly
but when i move the mouse away from the item, the text overflows and comes down. if it is a single word then there is no problem but it there are two or more words this happens. You can see this in the image below
I'm also giving the javascript code
<!-- The JavaScript -->
<script type="text/javascript" src="Styles/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
/**
* the menu
*/
var $menu = $('#ldd_menu');
/**
* for each list element,
* we show the submenu when hovering and
* expand the span element (title) to 510px
*/
$menu.children('li').each(function () {
var $this = $(this);
var $span = $this.children('span');
$span.data('width', $span.width());
$this.bind('mouseenter', function () {
$menu.find('.ldd_submenu').stop(true, true).hide();
$span.stop().animate({ 'width': '510px' }, 300, function () {
$this.find('.ldd_submenu').slideDown(300);
});
}).bind('mouseleave', function () {
$this.find('.ldd_submenu').stop(true, true).hide();
$span.stop().animate({ 'width': $span.data('width') + 'px' }, 300);
});
});
});
</script>
Can you please help me out???

You could try to add a min-width via CSS for your li (W3School min-width). The following code affects all your li coming after your ul with the id ldd_menu.
#ldd_menu li {
min-width:200px
}
You could also use for only one specific li.
<li style="min-width:200px">
Or via jquery in your each-block (jQuery CSS)
$span.css("min-width", "200px");

Sub-menu navigation toggle bug

I have a main navigation menu with a sub-menu that appears on hover, the problem I have is that on hovering on and off the menu sub-menu flickers between the slide and fade states provided by its function (menuHover) - I have a fiddle which is viewable here
The function itself is:
///<summary>
///drop down menu navigation
///</summary>
var menuHover = {
//initialise our function
init: function(){
var menuItem = $(".navItem");
//each menu item
menuItem.each(function(){
//checks to see if we have sub-navigation items
var $this = $(this),
hasSub = $this.children(".subNav"),
isSub = hasSub.length > 0;
//toggle visibility on sub items when hovered
if(isSub){
$this.hover(
//on hover
function(){
hasSub.slideDown("fast");
},
// off hover
function(){
hasSub.fadeOut(350);
});
}
});
}
};
Any help would be gratefully appreciated!

Stop using JS for menus! Use CSS instead!
The basics: http://www.seoconsultants.com/css/menus/tutorial/
Example I made(Copyrighted, do not just copy it): http://tinkerbin.com/W0iL32hh