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. 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: The width of this container is the sum of all the item widths which is 5 times 140 pixels. And that was the style.
a_collective
Oblo projec
accueil
142, avenue Daumesnil 75012 PARIST. +33 (0)1 42 71 48 36F. +33 (0)1 43 55 08 02E. boitenoire@ultranoir.comW. www.ultranoir.com MARS NETWORKS 26, rue du village 13006 MARSEILLET. +33 (0)4 91 48 26 59F. +33 (0)4 91 24 67 02E. commercial@mars-networks.comW. www.mars-networks.com L'utilisateur du site internet ultranoir.com reconnaît disposer de la compétence et des moyens nécessaires pour accéder et utiliser ce site internet. Les utilisateurs sur site web sont tenus de respecter les dispositions de la loi relative à l'informatique, aux fichiers et aux libertés, dont la violation est passible de sanctions pénales. Ils doivent notamment s'abstenir, s'agissant d'informations nominatives auxquelles ils accèdent, de toute collecte, de toute utilisation détournée et d'une manière générale, de tout acte susceptible de porter atteinte à la vie privée ou à la réputation des personnes. L'usage de ce site web est régi par la loi française à l'exception de toute autre législation.
Related:
Related: