CSS3 Left Side Sliding Menu Navigation - 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
<!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 http://snapbuilder.com 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="http://snapbuilder.com">Home</a></li> <li><a href="http://snapbuilder.com">Ramblings</a></li> <li><a href="http://snapbuilder.com/helpdesk/">Contact Us</a></li> <li><a href="http://snapbuilder.com/code_snippets/copy_code_snippet_230.html">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>