I already have a menu, now I am creating submenu and I need simulators effect on this site: / P>
- >
- The sub menu only appears when clicked on the parent menu
- Background
pre & lt; & Lt; Li & gt; & Lt; A href = "#" & gt; Item & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Item & lt; / A & gt; & Lt; Ul class = "sub-menu" & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Submenu & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Submenu & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Item & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Item & lt; / A & gt; & Lt; Ul class = "sub-menu" & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Submenu & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Submenu & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Item & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt;
Structure:
Menu functions:
Please show me any direction to me, how do I need to style it or use some script P>
Wordpress, by default, all & lt; Li & gt;
A class of sub items "menu-" Kids item-is.
First of all, we will hide sub menu with CSS.
.sub-menu {display: none;}
Then with jQuery, we add a click function and .slideToggle
to change the style display: block;
and parents & lt; Li & gt;
's & lt; A & gt;
Add a slide open / close effect when clicked.
$ ('menu-item-has-kids'). Children ('a'). ('Click', function (event) {event.preventDefault (); $ (this) .next ('sub-menu'). SlideToggle (100) .end () .Parent ('menu item- Children-have '). Sister (' menu item-is-children ') Children (' A ') Next (' sub-menu ') SlideUp (100);});
This is mine.
Here.
No comments:
Post a Comment