We Keep Coding

Dropdown menu flashes and disappeared on mobile only

I have a sub-menu inside the navbar under the Services nav-item.
The expected behavior is once the Service is clicked, the sub-menu shows up. The actual behavior is: once the Service is clicked, the sub-menu flashes and disappears.
<nav id="main-menu">
<ul class="sf-navbar">
<li>
<a href="#home">
<div data-i18n="nav.home">Home</div>
</a>
</li>
<li>
<a href="#">
<div data-i18n="nav.services.title">Title</div>
</a>
<ul>
<li>
<a href="#service">
<div data-i18n="nav.services.ourservices">Our Services</div>
</a>
</li>
<li>
<a href="#how">
<div data-i18n="nav.services.howwework">How We Work</div>
</a>
</li>
<li>
<a href="#areascontainer">
<div data-i18n="servicearea.title">Service Area</div>
</a>
</li>
<li>
<a href="#why">
<div data-i18n="why.title">Why Choose Us</div>
</a>
</li>
</ul>
</li>
.....
</nav>
JS code:
wei.header = {
init: function(){
wei.header.superfish();
},
superfish: function() {
$( main_menu ).superfish({
popUpSelector : 'ul',
delay : 250,
speed : 350
});
},
...
I have tried to debug it, but have no clue where to start.
Here is the code that I am working on.
http://weistudio.com.au/

For some reason, SuperFish fails here on touchEnd event and only for the menu shown when you at the very top of the page (it works if you scroll page a bit - there is a clone of this menu).
To prevent it you could use something like <a href="#" onTouchEnd="(function (e) {e.preventDefault()})(event)">.
Or move it to an external method and use like this (as you using jQuery already):
$('.header-container').on('touchend', '.sf-with-ul', function (e) {e.preventDefault()})

mmenu: sliding menu clears title on sublevels

I am trying to use mmenu for an application and everything is going great, except the menu title.
As for now, the menu has 1 parent-item, 'Menu A', and the menu hierarchy is the following:
Menu A
A1
A1a
A2
A2a
A2b
First level ('Menu A') slides into Second level (new menu with 'A1' and 'A2'). Third level is vertical and is expanded under its parent. More graphical detail comes up next.
First step (sorry, I'm only allowed to post 2 links, so I removed this screenshot): The initial state of the menu is the parent item A, with no title. OK
Second step: When I click the parent, the title changes to 'Menu A' and the children are loaded into the menu. OK
Third step: Lastly, when I click on a child loaded from the previous step, the title disappears, and I have no clue why. NOT OK Any ideas?
Here follows the javascript and HTML code of my menu:
$("#navigation").mmenu(
{ // options
"extensions": [
"border-full",
"multiline",
"iconbar"
],
navbar: {
title: ''
},
navbars: [
{
position : 'top',
content : ['prev','title']
}
],
},
{ // configuration
offCanvas: {
pageSelector: "#wrapper",
wrapPageIfNeeded: false
}
}
);
<nav class="sort-pages modify-pages" id="navigation">
<ul>
<li class="">
<span>
<span>Menu A</span>
</span>
<ul class="child-menu" id="sub-0">
<li class="">
<span>
<span>A1</span>
</span>
<ul class="child-menu mm-vertical" id="sub-sub-1">
<li class="MenuTransactionLink">
<a href="#" link="a1a">
<span>A1a</span>
</a>
</li>
</ul>
</li>
<li class="">
<span>
<span>A2</span>
</span>
<ul class="child-menu mm-vertical" id="sub-sub-2">
<li class="MenuTransactionLink">
<a href="#" link="a2a">
<span>A2a</span>
</a>
</li>
<li class="MenuTransactionLink">
<a href="#" link="a2b">
<span>A2b</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
I am happy to help with more details, if needed.
Following the developer's Github issue list, i found this in particular:
I think this is because "vertical" panels (all panels when you use slidingSubmenus: false) do not have a navbar. I'll see if I can do something about that.
For now, I guess it's either slidingSubmenus or no title.
(source: github.com/FrDH/jQuery.mmenu/issues/535)
I even tried forcing it using Javascript, by binding an 'on click' event to the menu items:
$('nav a.mm-fullsubopen').on('click', function (e){
var title = $('#navigation').find('.mm-title')[0];
title.text = $('#' + $('.mm-opened.mm-panel.mm-highest').attr('id')).find('.mm-title').text();
$(title).removeClass('mm-hidden')
});
This works for a few miliseconds, until the mmenu plugin overwrites the title with an empty string (see link from third step above). It must have some kind of event that fires after this one, making mine completely useless.
How can I do a workaround to make this behaviour possible?

Foundation 6: Hide the Top Bar when link is clicked

I'm using Foundation 6 for a one-page website. And I'm using a Top Bar to take users to different sections of the website. So when visiting the website on mobile, when I click a link from the collapsed Top Bar, I want the Top Bar to hide after taking the user to a certain section of the website.
Here's my HTML:
<div data-sticky-container>
<div data-sticky data-sticky-on="small" data-options="marginTop:0.9;" style="width: 100%">
<div class="top-bar">
<div class="top-bar-title">
<span data-responsive-toggle="responsive-menu" data-hide-for="medium">
<span class="menu-icon dark" data-toggle></span>
</span>
</div>
<div id="responsive-menu">
<div class="top-bar-section">
<ul class="menu" data-magellan>
<li class="title"><a class="title-link" href="#home">HOME</a></li>
<li class="title"><a class="title-link" href="#events">EVENTS</a></li>
<li class="title"><a class="title-link" href="#about">ABOUT</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
I could have achieved this functionality by using this (I think):
$(function () {
$('.title-link').on('click', function () {
$("#responsive-menu").css({display: none});
});
});
But the problem is when I click the menu icon, Foundation adds and inline style of display: block; and I can't seem to change it through to JS.
Is there a way to override the inline styles, or should I use a different layout? Thanks for the help!

.css() overrides inline style. Just change this line :
$("#responsive-menu").css({display: none});
To :
$("#responsive-menu").css({"display": "none"});
Similar topic for more info : How to override inline css through javascript?

Try this one:
JS:
$(function () {
$('.title-link').on('click', function () {
$("#responsive-menu").toggleClass('myStyle');
});
});
CSS:
.myStyle {
display: block!important;
}
or
.myStyle {
display: none!important;
}
depend what you want to do.

Change max height element after it being clicked

I'm writting a dropdown menu and I wanted to have the dropdown being controlled by javascript.
My dropdown has the sub menu hidden of sight max-height: 0px; and when the correspondent anchor tag is clicked, I change its max-height parameter to 400px, using the following function:
function drop_down(name) {
document.getElementById(name).style.maxHeight = "400px";
}
So far so good. The problem is that the element's max-height, stays at 400px and the sub menu does not hide. So I thought that I should target the click of the mouse and when this happens check if there is any element with 400px and change it back to 0.
$('html').click(function() {
var max_h = document.getElementsByClassName("nav_content");
var i;
for(i = 0 ; i < max_h.length ; i++)
{
if(max_h[i].style.maxHeight == "400px")
{
max_h[i].style.maxHeight = "0px";
}
}
});
What happens is that this function tracks every click, even the one used to display the sub menu. So my question is: is there a way to only activate the second function after I clicked my sub-menu? Because I always want the click that comes after the menu is displayed to close the sub menu.
HTML:
<body>
<div class="nav_container">
<nav class="nav_main">
<div class="logo">
<a href="#">
<img src="../majo.png" alt="logo">
</a>
</div>
<ul class="nav" id="nav">
<li>
Home
</li>
<li>
Consultas
<div id="nav_consul" class="nav_content">
<div class="nav_sub">
<ul>
<li>
Informação Dia a Dia
</li>
<li>
Totais Mensais
</li>
<li>
Tarifário Atual da Rede
</li>
<li>
Data específica
</li>
<li>
Atividade do Sistema
</li>
<li>
Coimas
</li>
</ul>
</div>
</div>
</li>
<li>
Simulações
<div id="nav_simul" class="nav_content">
<div class="nav_sub">
<ul>
<li>
Criar tarifa Simples
</li>
<li>
Criar tarifa Complexa
</li>
<li>
Simular com Nova Tarifa
</li>
</ul>
</div>
</div>
</li>
<li>
Preferências
<div id="nav_prefs" class="nav_content">
<div class="nav_sub">
<ul>
<li>
Lista de acessos
</li>
<li>
Alterar Password
</li>
<li>
Alterar Dados de Conta
</li>
</ul>
</div>
</div>
</li>
<li>
Log Out
</li>
</ul>
</nav>
</div>
<div id="content_main">
</div>
<footer></footer>
<script src="../js/jQuery.js"></script>
<script src="../js/user_menu.js"></script>
<script src="../js/user_nav.js"></script>
<script src="../js/user_clear_sub_menu.js"></script>
</body>

Here is an easy solution:
Create the following CSS-Styles:
.nav_content.visible {
max-height: 400px;
}
.nav_content.invisible {
max-height: 0px;
}
Set the overflow property for your nav_content to hidden:
.nav_content{
overflow: hidden;
}
Now add the class invisible to your submenus, if you want them to be invisible by default (you can do this manually in the markup or by js code):
Manually e.g.:
<div id="nav_prefs" class="nav_content invisible">
or by code (after the elements have been loaded):
$(".nav_content").addClass("invisible);
Now, if you just need to adjust your drop_down function to toggle the element's invisible/visible class:
function drop_down(dropdownID){
$('#'+dropdownID).toggleClass("visible invisible");
}
UPDATE: To make all visible submenus disappear when clicked elsewhere use this piece of code, when the window is loaded:
$(document).on('click', function (e) {
if (!$(e.target).is('.nav_item') && !$(".nav_item").has(e.target).length !== 0) {
$('.nav_content.visible').toggleClass("visible invisible");
}
});
If you only want to have one submenu visible at a time, you can use this version of your drop_down function:
function drop_down(dropdownID) {
$('.nav_content.visible').toggleClass("visible invisible");
$('#' + dropdownID).toggleClass("visible invisible");
}
A working fiddle can be found here
EDIT: Since you used jQuery in your original code, I assumed the answer can use jQuery too

You'll want to create a click handler on your document, then check the target of the click. If the target of the click has a certain class, use the menu behavior. If not, or if it's a sub-menu, close the menu.
Here's a question with multiple examples:
How do I close menu on click and when the user clicks away?
Also, I'd recommend not using max-height to hide and show. Since you're using jquery already, you could just use hide() and show().
One more thing: since you're using jquery already, you don't need to use these calls: document.getElementById(name). You can do a $("#yourId") or for document.getElementsByClassName("nav_content"); you can use $(".your-class")

It looks like you attached click event to entire document. I think you need to change only $('html').click(function() { to something like $('sub-menu-selector').click(function() { to
only activate the second function after I clicked my sub-menu
Aside to that, since it's only piece of jQuery and if you're not using it elsewhere, I would replace this with addEventListener and attachEvent, but maybe that's just me :)

In that case you can use jQuery.not() method to exclude the dropdown menu from your jQuery selection, here's what you need :
$('html').not(document.getElementsByClassName("nav_container")[0]).click(function() {
//As you can pass an element to it
You can also use the :not in your first selector like this:
$('html:not(div.nav_container))

Hide a div on hovering over menu bar

Whenever I hover over the second button in the menu, a "submenu" appears. When it appears, it partially covers the images in a div "container".
The styling of the submenu is such that it is semi-transparent so the images inside the div "container" also appear in the background of the menu, which doesnt look that good.
I know that the simple solution would be to change the location of the div but then the images would not be centered so that is not an option. I was wondering if it is possible that whenever I hover over the buttons that have a submenu, the div "container" hide and appear again when I move my mouse away from the menu. The div "container" should not hide when hovering over first Home button since it does not have a submenu and images should remain hidden as long as the menu is open. Is it possible in javascript or jQuery or CSS3??
HTML Code:
<div id="menu">
<ul class="menu" id="tempMenu">
<li class="Home">Home</li>
<li class="HOme2"><a id="secondElement" href="www.google.com">Home2</a><div>
<ul class="submenu">
<li>
<a id="one" href="">One</a>
</li></br>
<li>
<a id="two" href="">two</a>
</li>
<li>
<a id="three" href="">three</a>
</li>
<li>
<a id="four" href="">four</a>
</li>
<li>
<a id="five" href="">five</a>
</li>
<li>
<a id="six" href="">six</a>
</li>
<li>
<a id="seven" href="">seven</a>
</li>
<li>
<a id="eight" href="">eight</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div id="container">
<div id="box1" class="box">Image1<img src="images/image1.png"></div>
<div id="box2" class="box">Image2<img src="images/image2.png"></div>
</div>
CSS Code:
ul.menu .submenu{
display: none;
position: absolute;
}
ul.menu li:hover .submenu{
display: block;
}

$('.submenu').hover(function() {
$('#container').hide()
}, function() {
$('#container').show()
});

You basically want to detect on the hover event whenever the current menu item (one of the .menu > a elements) contains a submenu (.submenu).
What about :
$('.menu > a').hover(function(){
if ($(this).find('.submenu').length != 0) {
$('#container').hide();
}
}, function(){
$('#container').show();
});
Also, some of your html closing tags have issues, you should ensure that they are all closing in a correct order to prevent unexpected glitches.

firstly give that div 2 class names like-class1,class2
in Css :
.class1{
display: none;
position: absolute;
}
.class2{
display : block;
}
in jquery :
//this would track mouse pointer in/out events
$("#menu").hover( function(event){ $("#div").attr("class","class1"); },
function(event){ $("#div").attr("class","class1"); } );

You forgot to close this
<li class="HOme2"><a id="secondElement" href="www.google.com">Home2</a><div>
to
<li class="HOme2"><a id="secondElement" href="www.google.com">Home2</a></li><div>
for the Jquery i think this will help
$('.submenu').mouseenter(function() {
$('#container').hide()
}).mouseleave(function(){
$('#container').show()
});