hover menue
-
hi there, i wonder if its it possible to have a hoverable (toggle?) menue like on this website:
www.markues.net
/ my intention is acctually to create a menue that is the reversal of the menue on the page above, where it reveals once you clicked on sth like a dash / point etc.thank you for helping out!
-
Dear @hanna
I hope i can help you at least in the right direction :)
The Menu is always there, its just hiding, however it is hidden out of the view of the user ( to the right of the viewport/browser window )
When you hover over the Menu items, A class gets added to the opening <html>. The class 'visible---nav'
( Note: you could also add the class to the opening <body> tag ):
On Hover:
When this class gets added, along with it comes some new CSS to be applied to the Menu - " transform:translateX() "
This forces it Left across the screen and into view. The smooth slide is achieved through a CSS 'transition'
On hover:
You would be able to achieve this by adding Custom Code within 'Lay-Options - Custom CSS & HTML'
Some links to help:
CSS: Transform
https://www.w3schools.com/cssref/css3_pr_transform.aspCSS Transition:
https://www.w3schools.com/css/css3_transitions.aspOn Hover - AddClass ( the CSS way ):
https://css-tricks.com/snippets/jquery/addingremoving-class-on-hover/On Hover - AddClass ( the JS way ):
https://stackoverflow.com/questions/4358964/jquery-hover-addclass-problemYou will need some basic knowledge of CSS or JS to achieve this, here on the Lay Theme Website we have some help on the subject:
https://laytheme.com/documentation.html#custom-css-styling
Javascript added to Lay Theme must first be wrapped in a 'Newpage event' and the common ($) symbol must be changed to 'jQuery' :
https://laytheme.com/documentation.html#custom-javascriptHere is a link to a thread with a similar subject:
http://laythemeforum.com:4567/topic/5995/burger-menu-in-desktop-view/2I hope this helps & have a wonderful day! :)
Best wishes
Richard
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it