Snap Builder HTML5 CSS3 Free Public Codes Library


<!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>