This is a tricky question to phrase but I'll try my best:
If you go to http://msukkar.tumblr.com and resize your window (if you're using a desktop/laptop) until the hamburger menu icon appears then click on it to get the drop-down menu, click on it again to hide it. You'll find that when you resize your window back up full-width the original navigation is gone.
I'm curious as to how I can prevent this exactly. I'm adept at HTML & CSS but very new to Javascript.
The Javascript that I used is:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
/* prepend menu icon */
$('#menu_wrapper').prepend('<img id="mobile_menu" src="http://msukkar.com/wp-content/themes/pptitan/images/mobile_menu.png" alt="">');
/* toggle nav */
$("#mobile_menu").on("click", function () {
$("#menu_border_wrapper").slideToggle();
$(this).toggleClass("active");
});
});
});
</script>
The HTML for the menu is
<div id="menu_wrapper">
<!-- Begin logo -->
<a id="custom_logo" class="logo_wrapper" href="http://msukkar.com" style="font-family: 'Oswald', sans-serif; letter-spacing: 1px; font-size: 14px; margin-top: 16px; ">
MATT SUKKAR
</a>
<!-- End logo -->
<!-- Begin main nav -->
<div id="nav_wrapper">
<div class="nav_wrapper_inner">
<div id="menu_border_wrapper">
<div class="menu-home-container">
<ul id="main_menu" class="nav">
<li id="menu-item-1235" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1235">
<a href="http://msukkar.tumblr.com" style="color: #ff0000">
Blog
</a>
</li>
<li id="menu-item-1485" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1235">
<a href="http://msukkar.com/contact/">
Contact
</a>
</li>
</ul>
</div>
<select>
<option selected="selected" value="">
- Main Menu -
</option>
<option selected="selected" value="http://msukkar.tumblr.com">
Blog
</option>
<option value="http://msukkar.com/contact/">
Contact
</option>
</select>
</div>
</div>
</div>
I hope I explained that well enough for you all. Thanks in advance for your help and if need be I'll try to clarify further.
Here's your problem:
$("#menu_border_wrapper").slideToggle();
Which shows and hides your menu when you click the hamburger.
The problem is that when you are in desktop view, your entire menu is contained within #menu_border_wrapper and is displayed as it should. Then you resize down to mobile and click the hamburger. On your first click, #menu_border_wrapper slides down and your menu becomes visible. On your second click, #menu_border_wrapper slides up and your menu becomes invisible. This is fine on mobile since the hamburger icon itself isnt contained within #menu_border_wrapper, but when you resize the window back to desktop, the menu is gone! Remeber how on the second click the menu was sliding up and was set to display: none. Well now since your desktop size menu is contained within #menu_border_wrapper, it's not there anymore.
There are probably a lot of ways you can solve this. Move the actual menu buttons outside #menu_border_wrapper on desktop aswell, make two completely unique menues for mobile and desktop or set #menu_border_wrapper to display: block !important on desktop.
Hope it helps!
Related
i've stumbled into a problem where I am not unable to close my mobile navigation menu.
I am using jQuery Full Page for my front-end. My mobile menu opens when clicked on:
<nav class="menu col-xs-4 pull-right">
<a href="#">
<span>Menu</span>
<button>
<span>toggle menu</span>
</button>
</a>
</nav>
With jQuery code of:
$('nav, .mobile-menu--close').click(function(e){
$('body').toggleClass('menu-open');
});
But it does nothing on closing with .mobile-menu--close
<a href="#" class="mobile-menu--close">
<span>Close</span>
<span class="mobile-menu--close-x"></span>
</a>
It is inside an aside element which is outside of main
...
<div class="background-image landing-mantas col-xs-8 pull-right">
</div>
</div>
</div>
</main>
<aside class="mobile-menu">
<ul>
<li>
Homepage
</li>
<li>...
With mobile-open class it translates X 100% and brings aside.mobile-menu from X100% to 0%. So basically it swaps these with positions.
I've read answers with disabling touch-actions: none and so on. Nothing does seem to help.
Full preview of web could be found here
Keep in mind that this is wop so please view it in responsive view to get the point. But it should do the trick.
Remove this style and try
.mobile-menu {
z-index: -1;
}
As I can see from the link you provided. When menu-open is applied then your navigation is not clickable, so you need to set z-index of menu-open to higher that the z-index of your content (I am assuming the the page is inside the content class) -
.menu-open{
z-index: 1111;
}
.content{
z-index: 1000;
}
I am having an issue which i would like to solve. i have created a menu for an ecommerce site. The menu works fine. Unfortunately i cannot copy the whole code here cos it is too much but i made a short version and a picture to present the structure of the menu.
The main concept is when a button is clicked on the main nav a dropdown menu opens which has 2 columns. The left site has further buttons and the right side is where the div containers will be shown depending on the active list item on the left side. That is where the issue occours.
Because the container opens by hovering on the list item not by clicking it. When the mouse is over the li it gets highlighted but when the mouse is out the highlight color disappears.
I would like to keep the active li item highlighted until the mouse hovers on another li item.
Somehow i should get the row(item) which is hovered, change the css class for highlighted and keep until another row gets hovered. Then remove the css class and do the same with the new active list.
Hope i mad it clear. :-)
here are the html codes and the structure.
<nav class="navbar navbar-default" role="navigation">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="button1"> </a>
<div class="dropdown-menu">
<div class="col-sm-3">
<ul class="submenu-list">
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<div class="col-sm-9" id="submenubox1">
<h3>Subbox Title</h3>
<div>Content</div>
</div>
<div class="col-sm-9" id="submenubox2">
<h3>Subbox Title</h3>
<div>Content</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
The code im trying is the following using the menu.aim javascript:
<script src="jquery.menu-aim.js" type="text/javascript"></script>
<script>
var $menu = $(".dropdown-menu");
$menu.menuAim({
activate: activateSubmenu,
deactivate: deactivateSubmenu
});
function activateSubmenu(row) {
var $row = $(row);
// Keep the currently activated row's highlighted look
$row.find("a").addClass("maintainHover");
}
function deactivateSubmenu(row) {
//remove the row's highlighted look
$row.find("a").removeClass("maintainHover");
}
</script>
however this code is not working. Im am not sure if this would be the right way to solve this thought.
Also i have tried to use to css code:
ul.class li:hover{
background-color: red !important;
}
But this is not working either.
Here is a similar example what iam trying to achieve.
https://rawgit.com/kamens/jQuery-menu-aim/master/example/example.html
Any help would be appropriated.
Thank you!
Use jQuery to add an active class to the hovered item -
$('.submenu-list-item:not(.active)').on('mouseover', function() {
$(this).parent().find('.submenu-list-item.active').removeClass('active');
$(this).addClass('active');
});
This will add active class only when hovered over items of the same parent i.e. same submenu
Somewhat I can understand your question. I have tried this plugin. It may satisfy your need.
Bootstrap Submenu
Thanx for all replies.
With the help of Rohit answer I made it work.
However I had to change a line.
$(this).parent().find('.submenu-list-item.active').removeClass('active');
this line was not working for me unfortunatelly.
It did not remove the highlighted item once another got hovered on. Instead of this I removed the class from all items(a) in the ul.
$('.submenu-list-item:not(.active)').on('mouseover', function() {
$(".submenu-list a").removeClass();
$(this).addClass('active');
});
Anyway thanks for the bootstrap answer as well. I will learn some new stuffs from there.
I downloaded Fancybox pluging from http://fancyapps.com/fancybox and used for open my gallery images in popup.
and also I used fixed navigation when scrolling.
My problem is, when I click on images, it will open in a popup window. It is ok.
But, fixed navigation menu is still appear on the popup window.
![problem][1]
Navigation Menu HTML
<div class="nav-container">
<div id="nav">
<ul>
<li>Home</li>
<li>shop</li>
<li>Gallery</li>
<li>Facilities</li>
<li>Terms</li>
<li>Contact</li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
Navigation Menu Javascript
jQuery("document").ready(function($){
var nav = $('.nav-container');
$(window).scroll(function () {
if ($(this).scrollTop() > 136) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
});
});
Because of that navigation, user can't close the popup window.
Guys,
please help me to solve this.
Your navigation menu is probably set as position: fixed. This makes it have a z-index which is, by default, above every position:static placed elements (which is the default).
What you should do is edit the CSS of the lightbox so it has position: relative which should make it go above your navigation (assuming it's later in the DOM).
If it's still showing up below your navigation, check what the z-index of your f-nav class is, and change the z-indexof your lightbox so it's higher than the one of the navigation.
I'd like the functionality of the Bootstrap tabbable nav but I want to style each tab with a background image and text underneath. In fact, what I'd really like is to just put my photoshop images right in each tab and set the active state to my selected image.
I'm having a very difficult time doing this. Is it going to take a lot of custom work to get this working with this component?
I thought I could just try with some CSS but it's not giving me the correct formatting I want:
ul.nav.nav-tabs li {
display:inline-block;
background:url(../images/skypeIcon.png) no-repeat left center;
background-size:20px auto;
font-size:15px;
padding:2px 0 2px 28px
}
By the way, I'm using Bootstrap 2.3 so I can't use Bootstrap 3 Navbar Generator.
I can use a div tag inside my a tag and put whatever content I want in there.
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab1" data-toggle="tab">
<div>
<img src="<%=context%>/images/defaultAvatar.png"/>
<br/>
Computer
</div>
</a>
</li></ul>
On my website europebathroom.com I have a horizontal main menu. When I hover over one of the menu-items a dropdown appears. When I hover over another menu-item the drop-down of that menu-item appears, as it should of course.
However, I don't want this to happen when you accidentaly quickly touch another menu-item.
I want it to be like the horizontal menu on the following link: badkamerwinkel.nl.
So, there should be a delay in the change of the dropdown by some milliseconds on hover, to avoid annoying situations if you accidentaly touch another menu-item.
Is there a script I can use to do this? I am not very experienced yet, my apologies.
Thank you so much in advance, and please know this is my first post on this great support site, so any criticism and tips are welcome to make my next posts better!
Mike
EDIT:
The menu works approximately like the menu below.
<ul class="main">
<li class="item1">
<div class="submenu1">...</div>
</li>
<li class="item2">
<div class="submenu2">...</div>
</li>
<li class="item3">
<div class="submenu3">...</div>
</li>
</ul>
.submenu1{
display:none;
}
.main .item1:hover .submenu1{
display:block;
}
.submenu2{
display:none;
}
.main .item2:hover .submenu2{
display:block;
}
So if you hover item1 the submenu1 shows, if you hover item2 the submenu2 shows immediately. Is there a way to delay this action by a few milliseconds? Thanks!
You can use JQuery hoverIntent plugin to delay the animations. I have used this to create a similar kind of behavior.
check it out here