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.
Related
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 have some droppable areas, which are also draggable. It can happen that two or more droppable areas will get behind each other. Is there a way to drop a draggable item only into the area that is in the front? (z-index)
The situation is now, that the item gets added to all the areas, that are overlapping.
Thank you
Ok I have now a quite good solution and I want to share it with you guys...
I have build a small plugin
https://github.com/vaceta/jquery-top-droppable
Okay so I have this idea for a menu but I really have no idea how to implement it or what is required, I am very new to web design. So basically when an item on the menu is highlighted I want the slider bar to move under the highlighted item like so
http://s7.postimage.org/qa3vfh797/purple.gif
So when I am on a page I want the slider under the menu tab that relates to the page. When I hover over an item in the menu the slider slides from the current tab to the highlighted one. When the user un-highlights it, it returns to the tab that relates to the page the user is on. Any help would be greatly appreciated
I was going to provide you with a jsfiddle example but no need to reinvent the wheel.
jQuery MagicLine:
Article & Demo
If this is not the direction you would like to go in, then I suggest using jQuery UI, in particular, the tabs section: here. Make sure to use jQueryUI with Themeroller, which allows for user customization.
Hope this helps and let me know if you have any questions!
I won't give you the complete code, but I'll point you in the right direction with some keywords to search for.
What you need is to create a for the bar that will slide underneath your menu items.
Encapsulate each menu item within a div and implement a onMouseOver event for each of them.
Then in onMouseOver event, you need to move the div from its current location to under this menu div, i.e. change slider div's offsetLeft to the offsetLeft value for the menu div (if you use jquery, it provides handy functions to get this).
Now changing the div's position will directly move it there. If you want to have it done in a 'slide' animation, then you need to move it in steps, let's say in increments of 5 px each time. For this use setTimeOut function. Create a function to change slider div's offsetLeft value in 5 px increments, and call this function again and again till it reaches its destination via setTimeout function. setTimeout basically is a timer, that will call a function after specified amount of time.
This should give you enough to search on google :)
Im reading through the jquery docs, and Im thinking outterHeight/outterWidth is what I am looking for. But not really sure how to use it for my needs.
Overall I have an element I want to add a submenu to, on click, I want this menu to line up directly under the trigger element. But I need the right edge of the menu element to line up with the right edge of the trigger element. Which the lining up piece of it, I'm sure a little trial and error will get me there its just finding those outter edges and where they are as far as the window/screen/what ever is concerned. So I can nudge them into place.
Key reason I am going this route is cause this menu element is attached to a handful of trigger elements scattered through the UI, and are dynamically recreated for the given trigger element.
Anyway anyone know a good way to achieve my goal? Is outterHeight/width my ideal solution?
I think a better solution would be to use offset or position like the jQuery UI datepicker does it for example. You create your menu at body level and you position it according to the offset of the element that triggers the menu.
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/