background preloader

Slide

Facebook Twitter

Simple Toggle with CSS & jQuery by Soh Tanaka. Making Accordion menu using jquery. Advertisement Last time, I’ve shown how to create accordion using jquery.

Making Accordion menu using jquery

But, In this post I’ll show you how can you create fancy accordion menu using jQuery. In this post, you’ll see two examples of accordion. First menu’s visibility get’s toggled on clicking on the header while the another menu’s visibility get’s toogled when mouse is moved over it. Live Demo of accordion menu using jQuery HTML structure for accordion menu using jQuery <div id="firstpane" class="menu_list"> <p class="menu_head">Header-1</p> <div class="menu_body"> <a href="#">Link-1</a> </div> <p class="menu_head">Header-2</p> <div class="menu_body"> <a href="#">Link-1</a> </div> <p class="menu_head">Header-3</p> <div class="menu_body"> <a href="#">Link-1</a> </div></div> As you can see the structure, the elements of the menu are inside the div with class “menu_list”.

CSS code for accordion menu using jQuery I’m not a good color chooser so please forgive me for the color combinations. Javascript Code using jQuery. Nivo Slider - The Most Awesome jQuery Image Slider. Beautiful transition effects Nivo Slider offers 16 transition effects ranging from slicing and sliding, to fading and folding, making your galleries interactive and fun.

Nivo Slider - The Most Awesome jQuery Image Slider

No coding skills needed Create a beautiful experience when playing your gallery of images without any advanced coding. Include the image slider in your posts and pages using a simple shortcode. Automatic image cropping Nivo Slider crops and resizes images to a specified size, so you don’t have to do it manually for each image. Responsive and mobile ready The generated image sliders are completely responsive. Everyone loves Nivo! jQuery slideViewer 1.2.

Download slideViewer 1.2 (last updated july 9 2010) What's this?

jQuery slideViewer 1.2

SlideViewer is a lightweight (3.5Kb) jQuery plugin wich allows to instantly create an image gallery by writing just few lines of HTML such as an unordered list of images: slideViewer checks for the number of images within your list, and dinamically creates a set of links to command (slide) you pictures. Also, clicking on each image will make the gallery slide forward or backward, depending on the area you are clicking (eg: clicking the left part of a picture will move the slides backward, and viceversa for the right part of the picture). You can optionally customize the kind of animation and its duration and also enhance(*) the default tooltips with some fancy tooltips. You can choose where to put the user interface (the numbered links); it can be above or below your set of images.

You don't need to specify the width and height for your images (but all the images within a single gallery must have the same width/height!) New!