I'm looking to apply a menubar to my website and was thinking something similar along the lines that some of these high street stores use such as maplin.co.uk or argos.co.uk, diy.com.
Where a much greater area of submenu appears..
Any ideas ?
Thanks,
There are a thousand ways to skin this cat. The simplest is to build the individual div's containing the submenus and then show them using the .hover() event binding on the menu div's.
You could also use a "megamenu" plugin such as http://www.geektantra.com/projects/jquery-megamenu/
Related
I'm creating a website where I want a div box at bottom of the page which is just a little exposed with a title of what it has inside it like say 'More about this place' and that contains options like nearby places, ratings, reviews, etc but that is not exposed and is inside the div container..
I want that box to slide out from bottom to top when someone selects(holds) that and swipe up!
And hide again back to it position when someone swipes that down.
How can I achieve this with Js/jQuery, css, html? Please help me with the code or the working behind it!
Reference: Similar like the "Explore Nearby" box of Google Map App!
You could try using a library such as Hammer.JS or check out this answer if you don't want to depend on third-party solutions.
I want to be able to click links in my top bar to display different content. Do I need to explicitly use data-toggler on each tag in my top bar?This seems crazy. Is there an easier way to achieve the navigation I am looking for? Similar to the switcher for uikit? Thanks in advance as I am very new to the foundation.
You can put the dropdown menus in the wrappers that will be toggling their opacity/visibility so that when you :hover over the element, the menu will appear below it or wherever you want for it to as a matter of fact.
Here's the pen.
The behavior of Switcher reminds me of the tabs element of Foundation (Tabs | Foundation for Sites 6 Docs). Unlike the dropdown, the Tabs element remains visible after you click it, even if the mouse pointer moves out.
Instead of having individual navbar items having dropdown lists can I have the list shown as another extra navbar just below it?
something like how apple does here
http://www.apple.com/mac/
The best way to do this is to create a Div underneath your primary menu and to insert your sub-menu items inside that child div.
Of course, the actual implementation depends on the actual use case, the goals of the aesthetic and the user experience.
You could do a JS onClick event that will trigger the child dive to be inserted when hovering on the parent, or do it in pure CSS with a:hover and changing display of the other div.
Since you are asking specifically Bootstrap, the simplest implementation would be for you to grab a Mega Menu and tweak it to fit your Use Case.
YAMM is very good, all you would need to do to achieve what you want is to set a grid to your sub-menu items whilst having the sub-menu wrapper match the parent nav width.
Of course, I would recommend you read the documentation and understand how it is implemented and try to come up with your own solution to fit your particular Use Case.
I'm working on a menu you can arrange by dragging and dropping menu items on top of eachother. Dropping an item ontop of another should create a submenu and when dropping it on the left/right/top/bottom it should place it accordingly.
To "detect" which direction the menu should be placed, I was thinking of adding overlays to the menu item like so (pardon my painting skills):
The red boxes are the overlay divs I want to add.
My question is: is this the right way to do? Or would a javascript solution with some sort of mouse coordinates in relation to the menu be better? What method would you use (can be any, not just the two I pointed out)?
You can use the library JQuery UI to sort and drag&drop.
If the item is located exactly above the other, you need to add it to the item.
I would go for checking mouse events and their coordinates to keep the markup and domtree clean.
You can use Knockout.js with some modification.
Check this article. Looks like it might help You.
You migh also chectk out this github project.
I want to make such kind of menus when I click the holiday/seasonal then all of its related list open. For example:
I have searched the internet for submenus but it is not giving right method. If you know the right method for creating this menus, please share the link or give some guidance!
My first suggestion would be to use two nested <ul>s (pointed lists), both with attribute list-style-type: none, as in this fiddle. This no-JS solution opens the submenu when just hovering, not clicking.