I would like to add to my page a sidebar menu that looks like the one on http://feedly.com/#discover
The way it works is that when you hover the sidebar, the menu shows up. When the mouse is out of the sidebar, the menu hides.
As an extra (feedly does not have it) I'd like that the content is pushed to the right when the menu folds out.
Could anyone please tell me how that could be made?
I tried looking into their source or find something similar, but couldn't...
Any indication on where to start looking would be very much appreciated!
This tutorial and demo may be of some help.
http://tympanus.net/codrops/2013/08/28/transitions-for-off-canvas-navigations/
It has an example of the push out side menu. You'll have to change the events to be on mouseover and mouseout of the toggle button and the side menu itself.
Related
I recently ran into this GIF of a sidebar menu:
https://www.sooperthemes.com/sites/default/files/documentation-files/main-menu-mobile-2.gif?fid=925
I have completely fallen in love with the fact that the entire menu is exchanged for the child menu, which in theory could work with an unlimited amount of levels in the menu.
How is this navbar made, or does a tutorial or a Codepen exist with something similar? It would be greatly appreciated.
I could ofcourse use Javascript to hide the "parent-menu" onClick and add an item to the top breadcrumb menu, but surely a cleaner solution exists?
It is a very interesting issue.
In the below image, there are left and right carousel arrows. There is a text box under each item where the user can type the name. If the user clicks on either left or the right arrow, and then, if he clicks on any input text box and clicks left, then the control still remains on the left and right arrows. I cannot go left on the input text box.
I hope I have tried explaining the issue. I cannot get the control of the textbox once I click the left/right arrow. I cannot show you the code because of company's policy. Any kind of help is appreciated.
Thanks in advance!!!
so this looks like an issue created by the carousel you are using, some carousels have implemented that wherever you click inside the carousel it will actually take it as if you are clicking the left or right arrow depending on which section of the carousel you click.
Without looking at the code Im thinking you would have to overwrite the onclick function or use a carousel that doesn't handles the feature I mentioned above.
I'm using jQuery.mmenu in a project. The plugin by default slides out a menu (navigation bar) at the left side of the screen which pushes the entire side towards the right. I'm no Javascript/jQuery crack...
Does anyone know how I could alter the code of the plugin to get the menu slide over my content rather than pushing it to the right.
Thanks in advance...
EDIT: I usually use SIdr for my sliding menus. To achieve the above with Sidr all it takes is changing 'true' to 'false' on a certain command. I was hoping it'd be something simple like that in this case, too.
On my current project however I'm having to deal with a very complex navigation with tons of sub-menus, Sidr won't do the job here. PLUS mmenu seems pretty neat - if I could only figure how it slides the way i want.
After taking a quick look at the documentation and the demos, this one appears to be the most relevant to what you're looking for. As you will see, in this example the menu is pulled down overtop of the page content, rather than pushing it aside.
Based on your description, you want something that pulls out left to right, rather than top to bottom as this example does, and the option that appears to control that is the off-canvas option. Changing the position from top to left changes the position of the menu:
$("#menu").mmenu({
offCanvas : {
position : "left", // changing this alters the position of the menu
zposition : "front"
}
})
This JsFiddle from #Gaurang Patel demonstrates this behaviour.
I am developing my first HTML5 page for mobile and desktop and I need to implement slide menu button! When you first click this menu button it will open menu which covers 50% of my screen and menu contain something similar to "log in bar"(some inputs and some text; like top right corener of FB), and after you click button menu, it will be hidden!
I have implemented some solutions but I'am not satisfied with them!
One variant of my menu is to do everything right but it is visible to user all the time! Animation works fine but when I want menu to be hidden, it becomes visible right of screen.
Other possible solutions : picture and buttons go under the menu! When it opens, it "push" pictures and buttons below.
P.S i tried to add image but it seems that I don't have more than 10 reputation! Also, I didn't watch tutorials for jQuery so if any solution is theer in jQuery, please suggets me..
I'm looking for pretty much the same navigation function that is used on http://mercertavern.com/ but without the scrollbar itself. I only want it to scroll when a menu item is clicked. Any simple code for this? Everything that is a clue in the right direction is appreciated. Thanks!