Change site style→

style-1 style-2
  1. nazenani
  2. >
  3. >
  4. >
  5. >
  6. Accordion and pulldown menu.

Accordion and pulldown menu.

Basic Syntax
$(‘SELECTOR’).METHOD(ARGUMENT(almost functions));

Basic accordion

!Go to demo page!

html

CSS

jQuery

Accordion with back button at bottom.

!Go to demo page!

html

CSS

jQuery

Tips

.hide()
Hide the matched elements.
.click()
Carry out event when matched element is clicked.
.after()
Insert contents after matched element.
.next()
Search through the immediately following sibling of matched elements.
.parent()
Search through to the immediate parent of matched elements.
.slideToggle()
Display or hide the matched elements with a sliding motion.

Pulldown menu.

!Go to demo page!

There are 3 patterns of pulldpwn menus.

html

CSS

jQuery

A: Hover effect, simple action.

This is very simple action. Use for navigation(ex).

Tips

.hover
Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.
.children
Get the children of each element in the set of matched elements, optionally filtered by a selector.
.show()
Display the matched elements.

B: Hover effect, sliding action.

This type move like a Yo-Yo. It’s fun but useless any situation….

Tips

.slideDown()
Display the matched elements with a sliding motion.
.slideUp();
Hide the matched elements with a sliding motion.

C: Hover effect, perfect sliding action.

This is good action one stopped Yo-Yo action. Use for side menus.

Tips

.stop()
Stop the currently-running animation on the matched elements.
reference

jQuery
jQuery日本語リファレンス

Pulldown menu without “.stop()”event.

!Go to demo page!

Sometimes “.stop()” shows unexpected behavio. to provide it, use “not(“:animated”)”.
not(“:animated”) is select element which is stopping animating.

html

CSS

jQuery

Tips

:not(“:animated”)
Selector which choose not animated element.
reference

http://zxcvbnmnbvcxz.com/jquery-animite%E3%82%92%E7%84%A1%E9%A7%84%E3%81%AB%E7%B9%B0%E3%82%8A%E8%BF%94%E3%81%95%E3%81%9B%E3%81%AA%E3%81%84%E6%96%B9%E6%B3%95%E3%80%82animate%E5%81%9C%E6%AD%A2%E4%B8%AD%E3%81%AE%E8%A6%81/

comment

Fields with * is required.

go to related tags archive?