I have this problem on this website: http://www.gruppoedico.it/Default.aspx
The top menu has some dropdown functionality (on "Gruppo", "Attività ", "Videoguide" and "Contatti"). It works like a charm on every browser exept the ones on ios7 (maybe ios6 too, I haven't tried), where the menu works on the page I linked, but not on every other page of the menu (you can try it just navigating on one of the pages from the menu).
I tried using the hover effect of css (no-js) and got the same result. Actually i'm using this script:
$(document).ready(function () {
$("nav li").click(function () {
$(".hover").removeClass('hover');
if ($(this).find("ul").hasClass('hover')) {
$(this).find("ul").removeClass('hover');
} else {
$(this).find("ul").addClass('hover');
}
});
});
I'm experiencing this problem only on apple devices.
UPDATE
I think i found the problem, it's the transition on the ul that in some way interfer with the click event. I'll try to find a solution.
Related
Looking at Ben Kemens jquery-menu-aim, I stumbled upon an example at codepen.
This (codepen) works and allows the user time to pass from the main menu to the sub menu BUT if you move away from the menu completely the submenu still keeps showing i.e. it (the submenu) won't go away (display:none).
So, I recreated the same example at codepen on JsFiddle and changed the Javascript
from:
$(document).click(function() {
$('a.hover').removeClass('hover');
$('.popover').css('display', 'none');
}
to:
$(document).click(function() {
$('a.hover').removeClass('hover');
$('.nav ul ul').css('display', 'none');
}
Now, if you click anywhere on the web page, apart from the menu/sub menu, the sub menu disappears as it should.
Problem: The sub menu won't reappear if you hover the main menu again.
How do I solve this?
Edit: Is there an alternate jQuery / Javascript to jquery-menu aim?.
I think what you want needs enter and exit instead of activate and deactivate.
Have you read the documentation?
Here is your Fiddle Updated.
$menu.menuAim({
enter: activateSubmenu,
exit: deactivateSubmenu
});
I want to have the option to close a mobile menu by clicking outside of the menu on this site http://test1.wasodesign.com/
I searched StackOverflow and the web, and found this solution
<script>$(document).click(function(event) {
if(!$(event.target).closest('.collapse.in').length) {
if($('.collapse.in').is(":visible")) {
$('.collapse').hide();
}
}
})
</script>
I applied it, and the issue is that it does close on mobile when clicking outside of the menu but then I cannot reopen the menu afterward.
Is there any reason? How can I resolve this?
Thanks
you could try something like:
$('body').on("click", ".dropdown-menu", function() {
$('.dropdown-menu').hide()
$('.collapse').hide()
});
With this the menu should open when you click on the button.
$('.dropdown-menu').on("click",function() {
$('.collapse').show()
$('.dropdown-menu').show()
});
one of those two should work if not leave a comment.
I am relatively new to learning HTML, CSS and JavaScript. I am creating a sort of test site, just for learning purposes and have started diving in to mobile responsive websites.
I have a test site which has a mobile navigation button hidden, with a CSS media query to set the display to block and hide the normal navigation menu. I also have list items for the mobile navigation menu. To show/hide this, I've created a .toggleClass() jQuery function:
function clicktouchmenu()
{
$('#menuico').on('click touch', function()
{
var $mobmen = $(".mobilemenu");
$mobmen.toggleClass('clicked');
});
};
The above is working, but I wanted to add a .slideToggle() to the menu for effect. If I add this in underneath the .toggleClass() as $('.clicked').slideToggle(); the menu acts a bit strange, if I click on the menu icon, nothing happens, but repeatedly clicking, it seems to kick in to life and start working sliding up and down.
As I am fairly new to this, I expect I am doing this completely wrong, or over complicating something which is probably quite simple.
Try removing the clicked class and using only slideToggle() on the mobilemenu like so:
$('#menuico').on('click touch', function()
{
var $mobmen = $("#mobilemenu")
$mobmen.slideToggle();
});
I think the problem is that if the clicked class is toggling whether or not the menu is shown then it's interfering with slideToggle(). This is because the purpose of slideToggle() is to make something look like it's sliding in and out of view (aka toggling whether or not it's hidden but with an animation). So you only need one or the other but slideToggle() obviously includes the animation.
I've added a fiddle, but it's just a demo as I don't know what your HTML or CSS is like:
fiddle: https://jsfiddle.net/668mucca/3/
Link to the entry on slideToggle() in the jQuery docs for good measure: http://api.jquery.com/slidetoggle/
I'm creating a one-page website and I've found a small script for smooth scrolling and it works perfectly. But, if you leave the homepage and go to a single post or eventpage, the navigation doesn't work anymore because the anchor isn't on the existing page.
And another issue, when scrolling manually, it would be awesome if the active link could change class like it does when you click it.
Can anyone help me fix this issue? Thanks!
jQuery(document).ready(function($) {
$("#primary-menu li a").click(function(event) {
event.preventDefault();
$('#primary-menu li').removeClass('current_page_item ');
$(this).parent().addClass('current_page_item');
$('html,body').animate( { scrollTop:$(this.hash).offset().top - 68 } , 1000);
} ); } );
This is the website I am working on.
http://ankursinha.net/TestSite/index.php
It's stacking up properly, it's responsive, everything is fine apart from the following.
When I visit this site from my phone or tablet, the navbar shows 3 lines, I click that and all the links show up, and then when I click the "LOGIN", it drops down and shows me Faculty Log In and Student Log In, but when I click one of these, it toggles and closes the dropdown thing.
I know this is happening due to:
data-toggle="collapse" data-target=".nav-collapse"
But how do I fix this and make it like a proper link to navigate through the site on smartphones and tablets? All the browsers had the same problem!
I checked with Responsinator and the same problem occurs there also.
Thank You
Fixed by adding (replace) this piece of code on bootstrap-dropdown.js (at the end of the script) :
$(function () {
$('html').on('click.dropdown.data-api', clearMenus)
$('body').on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api touchstart.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
})
Basically stops the touch event on a dropdown from bubbling to the next element, which would be the HTML tag and has the clearMenus function.