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.
Related
I have a webpage that utilizes fullPage.JS. There is a firstPage section with 5 horizontal slides that is navigated to with a header menu via data-menuanchor. Additionally there is a secondPage section with 3 horizontal slides that is navigated with a footer menu, also via data-menuanchor.
I would like for each li menu item to change color when it's corresponding section is navigated to. Right now I am accomplishing MOST of this by using the :focus CSS selector. However this only works when a menu item is clicked. I also need the highlights to change when navigation is done via touchscrolling, keyscrolling, etc.
Initially I thought I could accomplish this by using the "active" class as it is passed to the menu, but I quickly realized that, because of the structure of my page, the "active" class is simultaneously passed to every li in the menu....either all five items in my header menu or all 3 items in my footer menu.
After concluding that I would not be able to use the "active" class to differentiate as needed, I began looking at the "fp-viewing-firstpage-X" class that is given to the body as each section and slide is navigated to...
However, I am not having luck with either approach I've come up with.
First I tried to do it all with CSS with something like this:
.fp-viewing-firstpage-1 .item {
color:white;
}
After not having success with that I tried using this javascript in the onLoad, onLeave, afterRender callbacks, etc...:
if ( $('body').hasClass('fp-viewing-firstpage-1') ) {
$('.item').addClass('white');
}
So far neither approach has accomplished my goal of changing the color of whichever menu item's corresponding section is navigate to, regardless of HOW is is navigated to.
Your assistance is appreciated!
I'm building a site , the Home page consists of four divs , The first one contains a drop down menu , the next one contains a " slideshow " , the problem is that when I put the slide show on that div , the " drop down menu " up there disappears under the slide show when I point to it . how can I make the drop down menu being over the slideshow when I point to it !!!? I hope that you can get what I mean ...
you have to set a z-index value for your dropdown menu.
For example in your css:
.myDropDownClass{
z-index:1O;
}
And to be sure it will stay on top of the other things give them also a z-index value but less than your dropdown menu.
Hope it will help you ;)
Not enough information provided, but I will guess an answer for you.
Set the z-index of your drop-down menu and make it absolute positioned:
.my_submenu {
position: absolute;
z-index: 100001;
}
Please provide code examples if you want more help. Also... Heaven-forbid you are using silverlight or flash.... If you are, set wmode to transparent.
I have a feature content slider which uses JQuery UI tabs. And when the active tab set into an item li it shows the picture in the bigger div besides it. What Im trying to do is to find a way where in the item list auto scroll or the item with the active class will be always shown in front.
here is a working sample --> http://jsfiddle.net/aceMunim/HT7se/
and i have also tried implementing SmoothDivScroll and scrollable in JQuery documentation but it conflicts with the current JQuery lib installed or it does not work.
FIDDLE
#featured .ui-tabs-panel {
width:340px;
....
}
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.
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.