I need to reproduce the kind of menu we can find on forbes.com. I'm just interested in the logo item submenu.
I'm almost done. I made the logo item menu, the first level menu with category names and the second level where are displayed article links from each category.
Up to now it's a full CSS menu set up on a basical way. When the user has its mouse on the logo, it just displays the first submenu level. I think I will need some JS because my goal is - like on forbes submenu - to display a mouseover effect on the first subitem to allow the second submenu level to be displayed in the same time. (it looks nicer)
Here is my code (simplified) :
<ul id="menu"><li>
<a href="#" >Mylogo</a>
<ul class="submenu1">
<li class="item1">item1
<ul class="subemnu2">content</ul>
</li>
</ul>/*----submenu1-------*/
</li>/*-----li menu------*/
</ul>/*---- ul menu-------*/
Thanks for your help. Regards
You don't need JavaScript for your use case. You can do it with CSS3 animations:
http://www.w3schools.com/css3/css3_animations.asp
When a user hovers over the first subitem, you change its appearance (.submenu1:hover), and you can also trigger an animation to show the second level of menu items.
Related
i have a bootstrap menu in my website, in the navbar when the user hovers on any item, a dropdown is shown and again there is a sub dropdown for items in the main dropdown:
as you can see in the image.
<li class="dropdown"> Entertainment
<ul class="dropdown-menu animated">
<li>Stage Shows</li>
<li>Game Stalls</li>
<li>Entertainment Stalls</li>
<li>Special Effects</li>
<li>Mascots</li>
<li>Photo & Video</li>
<li>Sound</li>
<li>Rentals</li>
<li>Tent Wala</li>
<li>Makeup Artists</li>
</ul>
</li>
this is a sample HTML for an item in main dropdown with sub dropdown. when the user slowly moves the curson to sub dropdown everything is fine, but if a user suddenly moves the cursor to sub dropdown it flickers a lot. i tried making the sub dropdown close to its parent but still the flickering doesn't change.
this is the live link enter link description here
can anyone please tell me what could be wrong here, or how to fix it, it would be great. thanks in advance.
The Main Navbar which contains the "other events" li , when clicked open the secondary navbar which is overriding the Main Navbar , resulting in flickering as it is not able to identify which navbar you are choosing-:
try choosing another opening transition to the secondary navbar or increasing the padding of Main and secondary navbar.
Hope it works!
cheers
I have a simple scroller (similar to the tag scroller at the top to Google images), which uses jquery/javascript.
<div class="chip-scroller widget">
<a class="chip-scroller_nav chip-scroller_nav--prev">
<span class="md-icon">arrow_back_ios</span>
</a>
<ul>
<li>
<a class="chip-scroller_chip">anchor</a>
</li>
<!-- more items here -->
</ul>
<a class="chip-scroller_nav chip-scroller_nav--next">
<span class="md-icon">arrow_back_ios</span>
</a>
</div>
The UL (list) has overflow-x: hidden set, so depending on the screen width and the number of items in the list, some items will be out of view, either to the left or the right of the visible area.
In the example below, 2 are hidden to the left, 3 are visible and 1 hidden to the right.
(hidden) (hidden) [visible visible visible] (hidden)
The list is positioned using javascript, and in the main navigated using the prev/next navigation buttons at each side.
The issue I have is that any of the items can be focused, whether they are visible or not, and focus means that they're immediately brought into view.
However, the scroller doesn't realise things have changed and it breaks my design. For instance the nav buttons may still show when there is nothing more to scroll in a particular direction.
The first thing I tried was to use e.preventDefault() to try and stop any default browser action, but it still bring the item into view. I'm using the on "focus" to capture the event:
$("body").on("focus", ".chip-scroller_chip", moveFocus);
This seemingly has no effect.
I could tag non-visible anchors with tabindex=-1 but I don't want to stop the focus event happening, just regain control back from the browser.
Any ideas would be great.
What if you would add an if on move focus, assign another class with js to which elements you want to do actions, and with an if check if has a class .hassClass(), then if it does do something, else dont.
Add the class while you create an element. To the class that you dont want to show, add overflow: none, do the wanted thing to the other ones.
Atleast I would oreantate towards this.
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 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 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.