I am working on a menu in a fixed header and am having difficulty with the way it is displaying. The menu is a set of 4 main links that when clicked will pop up another div that contains more links. The pop up div is set to cover the initial main link and drop down below it -- similar to the horizontal navigation menu for www.huffingtonpost.com .
The problem I'm having is that the .png background image for the drop down menu covers the initial main link that the user clicked on. For instance if a user clicks on the "Research Tools" the resulting pop up menu background covers the "Research Tools" link, keeping the user from being able to see what menu they are currently in.
It also causes some issues with a user trying to click on another main navigational link, like going from having the "Research Tools" menu active and trying to click on the "Instruction Resources" link -- the background image covers part of that link, rendering it almost unclickable. Is there a way to get the 4 main navigational links to stay on top of the pop up menu div?
Here is an image of the issue I'm encountering: http://imgur.com/BlN0jbz
I have tried messing around with the z-index, but nothing seems to work. I've attached the important clips of code in a fiddle http://jsfiddle.net/gevBe/ if more details are needed, let me know. Here is the javascript portion of what is included in the fiddle:
$(document).ready(function () {
$('#toggleLink').on("click", function () {
$('#showme1').slideToggle(600);
$('#showme2,#showme3,#showme4').hide(400);
});
$('#toggleLink2').on("click", function () {
$('#showme2').slideToggle(600);
$('#showme1,#showme3,#showme4').hide(400);
});
$('#toggleLink3').on("click", function () {
$('#showme3').slideToggle(600);
$('#showme1,#showme2,#showme4').hide(400);
});
$('#toggleLink4').on("click", function () {
$('#showme4').slideToggle(600);
$('#showme1,#showme2,#showme3').hide(400);
});
$('#toggleLink,#toggleLink2,#toggleLink3,#toggleLink4').on("click", function () {
$('#cover').show();
});
$('#cover,.button1,.button2,.button3,.button4').click(function () {
$('#showme1,#showme2,#showme3,#showme4').hide(400);
$('#cover').hide();
});
});
I edited your jsfiddle. Check the #showme2. Just increased the top of it.
I assume you are using z index wrong.
Z-index is used to determine what "layer" the element is on. Say we have two absolute or fixed positioned elements with z-index:1 and z-index:2. The one with z-index:1 will be displayed over the one with z-index:2.
If your dropdown box covers the initial link you should make it so it appears below the initial link. You can do that by using top
#yourbox{
top:10px;
}
The code above pushes the element with id yourbox 10px away from the top.
On a side note, using tables to make a navigation menu is a bit awkward. I suggest you use such construction
<ul>
<li>Link one</li>
<li>Link two</li>
</ul>
ul li {
display:inline;
}
That will give the same result - horizontally positioned elements. Except it looks less clumsy.
Related
I have a mobile menu on a one page that did not close after a tap on a menu item (menus are all redirecting to sections of the one page with anchor tags). I managed to do it by adding a footer script:
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('#offcanvas-wrapper li a').click(function(){
$('#offcanvas-wrapper').toggleClass('hide');
});
});
</script>
However, now if I want to open the mobile menu again, the menu reappears briefly after a tap/click, and then I have to click on the menu icon again to make the menu visible.
This only happens on mobile (reduce your window size to reproduce the glitch).
Here is the link of the one pager:
the one pager
Here is a 30 seconds video of the issue:
video of the issue
Why is the menu reappearing? How can I resolve this? I can handle CSS, Html and a bit of javascript.
Anyone can point me in the right direction?
I wanted to just comment but I don't have enough reputiton yet to do so.
It seems like you have an "open" class that stays on the menu element when you click on a menu option. The open class disappears however when you click outside of the menu. So that could be the issue.
I used jQuery-One-Page-Nav for a one page scrolling menu. In my page there are two menus on either side of a logo. So, I have to use jQuery-One-Page-Nav twice. If I click any menu, it scrolls this area and shows the menu button for the current page as active. But when I scroll to any area of the second menu, the menu button for the active page in that menu is not being activated.
Here is the link to jQuery-One-Page-Nav: jQuery-One-Page-Nav.
Here, I have attached an image. Please click to view.
Please give some solutions for this problem.
Here is my code:
/*ONE page menu one*/
$('#nav').onePageNav({
currentClass: 'current',
scrollOffset: 75
});
/*ONE page menu two*/
$('#mav').onePageNav({
currentClass: 'current',
scrollOffset: 75
});
You don't need two navbars for that page. You didn't post your code, but if you are using li then give the first left three li a class identifer and give the second right three a class identifier and then use css to position them using float: left and float: right.
If you are using bootstrap then you may use navbar-left and navbar-right classes.
I have a horizontal sub menu with 8 options (can't add more or it drops to a second line), but now it needs more and i want a particular effect. I want the last option to be an arrow and the whole menu slide horizontally to the left when the arrow is clicked to show more options and a left arrow to slide back.
I have researched for a few days and have found a few examples similar, but just haven't worked in my case. Also, alot of answers to this similar thing involved plug-ins or carousel's and I don't think those are going to work for my particular site.
Right now I have it working kind of how I want but it's not the right effect. I'm using .hide() and .show() in my jQuery function and basically used the class: "firstSide" for the first part of the menu you can see after it drops down from the main menu, and class="slideSide" for the 2nd part. I've also tried .slideToggle() and playing with the widths but haven't got it to work right.
This is my codepen that I've started as an example: CodePen
This codepen isn't pretty but it works for this example, this is my function in it:
$('#arrowRight').on('click', function () {
$('.firstSide').hide(function () {
$('.slideSide').show();
$('#blankSub1').show();
});
});
$('#arrowLeft').on('click', function () {
$('.slideSide').hide(function () {
$('.firstSide').show();
});
});
Also I have the class slideSide set so that it doesn't display along with the first part of the menu or else its all on a 2nd line which i don't want as the width of the 8 menu options is about the full width of the whole site.
.slideSide {
display: none;
}
The desired effect I want can be seen on: http://store.apple.com/us/iphone
I've tried to see how this works but have not figured it out, below is a screen shot of the menu I'm talking about on that page.
Any help or advise would be appreciated as I'm kind of stuck.
Check out this fiddle.
Is this what you are looking for?
you nest a ul within a div and make use of overflow:hidden on the div.
Using jquery you can then implement the sliding via margin-leftor positioning like
position:relative; left:-100%
and you hide the arrows as they are clicked and so the other one.
you can play around with the values to match your needs.
I am working on a website developed in Wordpress that uses a three-depth navigation menu. The menu is automatically generated and consists of <li> and <ul> items. I am encountering a problem where list items shift to the right when a list containing a submenu is opened.
The site where this happens is the Dutch site http://www.skoll.nl/. I'm having trouble converting this to a JS-fiddle, but I'll try again tomorrow.
The problem
Whenever I hover on an item in the first submenu, the second submenu opens. Often, the items in this second submenu are larger than the item itself, causing the list item to expand and pushing other items to the right. This can be seen by navigating to "Informatie" and then "Evenementen". You can see that the item on the right shifts to the right, making it rather hard to click on.
I've spent numerous hours on this problem and haven't got any further, so the question I would like to be answered is:
How do I stop the list items in the first submenu from shifting to the right, while preserving the current layout of the navigation menu? I am fine with both CSS- and JS-solutions.
Thanks in advance.
Add following style to li elements which contains for example 'Evenementen' link:
position: relative;
Then for submenus add following styles:
position: absolute;
left: 0;
top: 20px; /* this needs to be adjusted */
You may have to add some other styles too to make everything look like it looks now, but after this submenus wont shift items anymore.
I have a menu consisting of an <ul> in a Web CMS.
I want several menu items to have sub-items that are displayed in a dropdown list. These sub-items are <ul>s as well.
This is basically easy to do with a few lines of CSS and Javascript, but I am looking for a ready-made Javascript solution that helps me handle the following:
Deal with screen edge situations: If any part the dropdown menu would be outside the current viewport, place it so that it is completely within the viewport.
This is a bitch to code from scratch.
"Nice to have"s would be:
Centered positioning below the drop-down button
Adding a onclick event to the body so that clicking outside the drop down menu will close it; clean removal of the onclick event afterwards
But those I can do myself if necessary.
A nice, small, unobtrusive widget that magically converts my <ul> would be lovely.
If the solution is based on a framework, it has to be Prototype as that's what I'm using in the CMS.
You can get the offsets of the UL, and check whether those are in a certain distance of the viewport.
// Pseudo code
var ul = document.getElementById("menu");
if(ul.offset.x + ul.width > viewport.width) {
ul.offset.x = viewport.width - ul.width;
}
It's also possible to get the exact position of the dropdown button clicked, and then you should apply basic math in order to position the menu beneath it.