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.
Related
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.
I need a bit help with this thing I am trying to write. I don't need code, just a bit of help with the logic.
So I have this navigation, that at any point can be a different width with different number of anchors in it. If it happens to be longer than the wrapping container, I must trim it, put "..." and if the user clicks on the dots, the remaining items must show in a dropdown.
Ok for now, but the navigation is also sticky. And when it sticks to top, I must reduce a logo and share (sometimes also language selector) from its width. When it goes back to being static, I must again update it, and show elements that I previously trimmed.
All of those "extra" elements, that I must reduce from the width, are containers somewhere in the website, that do not have special classes or anything special in them, pure content (it comes from a CMS, and that cannot be changed).
I would appreciate any type of help!
Thanks!
If you know the dimensions of the navigation, I would say the following steps might help:
Always have an ellipsis element, with a hidden class, toggled as needed.
Using jquery $('navElement').offset().left + $('navElement').width you get the right end position for the nav.
Now you can get the element at this position, maybe using Document.elementFromPoint(),
Identify all elements after this element, you'll have to figure out the logic for this, make them display block, and wrap all of them within a container dynamically.
now showing hiding that container will result in a dropdown effect.
As long as you can identify the logo and other components you want toshow/hide when sticky using css selectors, when your nav goes sticky, add a parent class to your nav and write css to hide these elements when inside the sticky class.
That is the logic I would follow at a broad level based on your question.
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 need to create a horizontal menu that shows all of the possible items given the browser size, the rest of the items are hidden (they do not wrap to the next line). Then there is an arrow button on the far right side of the div, which when clicked, shows the next row of items. How can I do this? I'm not asking for anyone to write the code for me, I just need some direction. Are there any examples online of this? I don't want the arrow button to move the items slowly across the screen. I need it to just "jump" to the next row.
For example if the list of items is made up of three, each li element is 100px long and the total page with is 200px, one of the elements will be hidden. Once the button is clicked the first two items disappear and the last item displays.
There are many ways to do this, you can make the ul position:relative, then the li position: absolute, when clicked, change the positon of lis to show them.
As Ji Guang said. There are many ways of doing this. All that matters is that how you would like to implement it, or better said how the rest of your project is implemented.
For the menu as Ji Guang said, you can create a horizontal style list (maybe use float left on li for that). The ul must be now declared as relative and fixed height or width with overflow hidden, or better off fix the height as much you want and set width relative to the page. For the arrow to go throw the rest of the rows what I guess you want is some type of carousel. Now there are plenty of good plugins available online for that. Or you can always have it done yourself. If you are planning to do it yourself then you need to follow Ji Guang advice. Put the menu ul inside another div and then play with ul's positioning.
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.