Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Tabs & Accordion >> Pure CSS Accordion Menu Navigation


Code Snippet </> Info


Snippet Name: Pure CSS Accordion Menu Navigation

Description: Add an accordion menu navigation to your web page.
Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser

Example: View Code Demo

Note:

Author: Aniket Pant

Last Modified: 2015-08-26 22:49:38

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Pure CSS Accordion Menu Navigation</title> <style> /* Begin Pure CSS Accordion Menu Navigation */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */ /* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */ /* == Created by: Aniket Pant : http://aniketpant.com/ : Creative Commons License == */ body { font-family:'Cabin Sketch', 'Calibri'; } #main { margin-top:70px; margin-left:300px; } footer { margin-top:50px; float:left; width:100%; text-align:center; } footer a { text-decoration:none; color:#488AC7; -webkit-animation:move infinite 2s linear; -moz-animation:move infinite 2s linear; } @-webkit-keyframes move { 0% { -moz-transform:rotate(0deg); } 25% { -moz-transform:rotate(10deg); } 75% { -moz-transform:rotate(-10deg); } 100% { -moz-transform:rotate(0deg); } } @-moz-keyframes move { 0% { -moz-transform:rotate(0deg); } 25% { -moz-transform:rotate(10deg); } 75% { -moz-transform:rotate(-10deg); } 100% { -moz-transform:rotate(0deg); } } @-webkit-keyframes float { 0% { margin-left:-1000px; } 25% { margin-left:500px; } 75% { margin-left:400px; } 100% { margin-left:300px; } } @-moz-keyframes float { 0% { margin-left:-1000px; } 25% { margin-left:500px; } 75% { margin-left:400px; } 100% { margin-left:300px; } } /* Accordion */ #main { -webkit-animation:float 1 1.5s ease-in-out; -moz-animation:float 1 1.5s ease-in-out; } .accordion { list-style:none; max-width:800px; text-rendering:geometricPrecision; font-family:'Calibri'; } .accordion li { float:left; padding:20px; width:100px; height:175px; max-height:200px; background:#659EC7; overflow:hidden; box-shadow:inset 0px 0px 10px #ccc, 0px 0px 10px #659EC7; -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out; } .accordion li:hover { width:300px; background:#488AC7; box-shadow:0px 0px 10px #488AC7; -webkit-transform:scale(1.2); -moz-transform:scale(1.2); transform:scale(1.2); -webkit-transition:all 0.6s ease-in-out; -moz-transition:all 0.6s ease-in-out; transition:all 0.6s ease-in-out; } .accordion li:first-child { -webkit-border-radius:10px 0px 0px 10px; -moz-border-radius:10px 0px 0px 10px; border-radius:10px 0px 0px 10px; } .accordion li:last-child { -webkit-border-radius:0px 10px 10px 0px; -moz-border-radius:0px 10px 10px 0px; border-radius:0px 10px 10px 0px; } .accordion li:first-child:hover { -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; -webkit-transform:scale(1.2) rotate(-2deg); -moz-transform:scale(1.2) rotate(-2deg); transform:scale(1.2) rotate(-2deg); } .accordion li:last-child:hover { -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; -webkit-transform:scale(1.2) rotate(2deg); -moz-transform:scale(1.2) rotate(2deg); transform:scale(1.2) rotate(2deg); } .accordion li a { display:inline-block; color:#fefefe; text-decoration:none; text-shadow:0px 0px 1px #000, 0px 0px 1px #333; font-size:20px; cursor:default; } .accordion .info { display:none; color:#FFF8C6; line-height:22px; } .accordion li:hover > .info { display:block; } </style> <link href="http://fonts.googleapis.com/css?family=Cabin+Sketch:bold&v1" rel="stylesheet" type="text/css"> </head> <body> <div id="main"> <ul class="accordion"> <li><a href="#">Link#1</a> <span class="info">This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose.</span></li> <li><a href="#">Link#2</a> <span class="info">This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose.</span></li> <li><a href="#">Link#3</a> <span class="info">This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose.</span></li> <li><a href="#">Link#4</a> <span class="info">This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose.</span></li> </ul> </div> <footer> <h3 align="center">Pure CSS Accordion Menu Navigation</h3> <div align="center">Roll your cursor over the accordion blocks for an example. <br /> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_201.html">Pure CSS Accordion Menu Navigation Code Snippet</a> page. ] <br /> The floating entry is viewable in<br/>Mozilla Firefox 5, Webkit Browsers and Chrome<br /> Created by <a href="http://aniketpant.com" target="_new">Aniket Pant</a> </footer> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library