Collapsing Site Navigation with jQuery Today we will create a collapsing menu that contains vertical navigation bars and a slide out content area. When hovering over a menu item, an image slides down from the top and a submenu slides up from the bottom. Clicking on one of the submenu items will make the whole menu collapse […] View demoDownload source Today we will create a collapsing menu that contains vertical navigation bars and a slide out content area. When hovering over a menu item, an image slides down from the top and a submenu slides up from the bottom. The beautiful fashion photos are taken from Beyrouth’s photostream on flickr. So, let’s get started! The Markup Our HTML will consist of a main container with the class and id “cc_menu”. The first item will get a z-index of 5 and then we will decrease the z-index for the next items. Each submenu item will share its class with the respective content div. Let’s take a look at the styling. The CSS Our main div that surrounds everything will have the following style:
Auto-Hiding Navigation in CSS and jQuery A simple navigation that auto-hides when the user scrolls down, and becomes visible when the user scrolls up. Browser support ie Chrome Firefox Safari Opera 9+ Auto-hiding navigations have been around for quite some time now, in particular on mobile devices. Since we’ve been using this approach in several clients’ projects, we thought it would be handy to have a ready-to-use snippet here on CodyHouse. Images: Unsplash Creating the structure The HTML structure is composed of a header.cd-auto-hide-header element used to wrap the primary navigation (nav.cd-primary-nav) and a main.cd-main-content for the page main content. If the page has a sub-navigation, an additional nav.cd-secondary-nav is inserted inside the header element: Finally, if the secondary navigation is below a hero block, a .cd-hero element is inserted right below the <header>, followed by the .cd-secondary-nav element: Adding style We used the .cd-auto-hide-header class to define the main style of the auto-hiding header.
.find Description: Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element. Given a jQuery object that represents a set of DOM elements, the .find() method allows us to search through the descendants of these elements in the DOM tree and construct a new jQuery object from the matching elements. The .find() and .children() methods are similar, except that the latter only travels a single level down the DOM tree. The first signature for the .find()method accepts a selector expression of the same type that we can pass to the $() function. Consider a page with a basic nested list on it: If we begin at item II, we can find list items within it: The result of this call is a red background on items A, B, 1, 2, 3, and C. Unlike most of the tree traversal methods, the selector expression is required in a call to .find(). As of jQuery 1.6, we can also filter the selection with a given jQuery collection or element.
CodeBrain.com - Tools & Scripts for WebMasters - Java, JavaScrip JQuery Cycle Plugin Check out Cycle2, the latest in the Cycle line of slideshows. The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more. It also supports, but does not require, the Easing Plugin. The plugin provides a method called cycle which is invoked on a container element. Each child element of the container becomes a "slide". Images are used in these demos because they look cool, but slideshows are not limited to images. Use the Effects Browser page to preview the available effects. For more about options, see the Options Reference page. Frequently Asked Questions Special thanks to Torsten Baldes, Matt Oakes, and Ben Sterling for the many ideas that got me started on writing Cycle in 2007.
Examples | Granim.js Basic gradient animation Basic gradients animation with 3 gradients in queue composed of 2 colors. Complex gradient animation Complex gradient animation with 2 gradients in queue with different positions composed of 3 colors. Gradient animation with an image and blending mode Gradient animation with 2 colors, a background image and a blending mode set. Gradients with an image mask Gradient animation with an image mask to create a gradient animation under a shape. <div class="bloc-logo"><canvas id="logo-canvas"></canvas><a href="index.html" class="logo-mask">Granim.js</a></div> Interactive Gradients Create a gradient animation that responds to events. <div class="canvas-interactive-wrapper"><canvas id="canvas-interactive"></canvas><div class="cta-wrapper"><a href="#default-state" id="default-state-cta" class="active">Default state</a><a href="#violet-state" id="violet-state-cta">Violet state</a><a href="#orange-state" id="orange-state-cta">Orange state</a></div></div>