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) >> Menus & Navigation >> CSS3 Left Side Sliding Menu Navigation

Code Snippet </> Info

Snippet Name: CSS3 Left Side Sliding Menu Navigation

Description: Add a cool CSS3 left side sliding menu navigation to your web page.
Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser

Example: View Code Demo

Note: Add as many LI navigation tabs as you need.

Author: SnapBuilder <>

Last Modified: 2015-03-20 00:29:59

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
Copied To Clipboard!

<!DOCTYPE html> <head> <title>CSS3 Left Side Sliding Menu Navigation</title> <style type="text/css"> /* Begin CSS3 Left Side Sliding Menu Navigation */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The Free Public Codes Library == */ /* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */ html,body {padding:0;margin:0;font-family:verdana,arial,ms sans serif; font-size:100%; background-color:#ffffff; color:#000000; text-shadow:0px 1px 1px rgba(0,0,0,0.2);} a { display:block; height:30px; line-height:30px; color:#ffffff; background:#007730; float:left; clear:left; width:120px; padding-left:10px; margin:10px 0; margin-left:-140px; border-top-right-radius:15px; border-bottom-right-radius:15px; -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; -ms-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out; text-decoration:none; } a:hover {margin-left:-40px;} li {list-style:none;} #top-content {position:absolute; top:0px; left:180px;} </style> </head> <body> <ul> <li><a href="">Home</a></li> <li><a href="">Ramblings</a></li> <li><a href="">Contact Us</a></li> <li><a href="">Get Code</a></li> </ul> <div id="top-content"> <p>CSS3 Left Side Sliding Menu Navigation</p> <p><br />Roll your cursor over the green navigation tabs for slide out example.</p> <p><br />[ This code example from CSS3 Left Side Menu Navigation Code Snippet page. ]<br /><br />Click the bottom green tab to get source code.</p> </div> </body> </html>

[ Snippet Options ]


© 2002 -  Snap Builder Public Codes Library