|
|
Copied To Clipboard!
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Responsive CSS3 JS Side Navigation Menu</title>
<!--
/* Point towards your existing font-awesome.css file, or leave this code in place */
// -->
<link rel="stylesheet prefetch" href="http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css">
<style>
*{box-sizing:border-box;}
body{height:100%;background-color:#eee;}
h1{font-size:1em;text-align:center;color:#444;letter-spacing:1px;text-shadow:1px 1px 1px rgba(0,0,0,0.5);}
.nav-container{width:300px;margin-top:10px;box-shadow:0 2px 2px 2px black;transition:all 0.3s linear;}
.nav{list-style-type:none;margin:0;padding:0;}
li{height:50px;position:relative;background:linear-gradient(#292929, #242424);}
a {border-top:1px solid rgba(255,255,255,0.1);border-bottom:1px solid black;text-decoration:none;display:block;height:100%;width:100%;line-height:50px;color:#bbb;text-transform:uppercase;font-weight:bold;padding-left:25%;border-left:5px solid transparent;letter-spacing:1px;transition:all 0.3s linear;}
.active a{color:#B93632;border-left:5px solid #B93632;background-color:#1B1B1B;outline:0;}
li:not(.active):hover a{border-left:5px solid #FCFCFC;background-color:#1B1B1B;color:#eee;}
span[class ^= "icon"]{position:absolute;left:20px;font-size:1.5em;transition:all 0.3s linear;}
@media only screen and (max-width:860px){
.text{display:none;}
.nav-container, a{width:70px;}
a:hover{width:200px;z-index:1;border-top:1px solid rgba(255,255,255,0.1);border-bottom:1px solid black;box-shadow:0 0 1px 1px black;}
a:hover.text {display:block;padding-left:30%;}
}
@media only screen and (max-width:480px){
.nav-container, a{width:50px;}
span[class ^= "icon"]{left:8px;}
}
</style>
<script>
<!--
/* Begin Responsive CSS3 JS Side Navigation Menu
== This Script Free To Use Providing This Notice Remains ==
== This Script Has Been Found In The https://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: Sara Soueidan : http://twitter.com/SaraSoueidan : Creative Commons License ==
*/
$('li').click(function(){
$(this).addClass('active')
.siblings()
.removeClass('active');
});
// -->
</script>
</head>
<body>
<h1>Responsive CSS3 JS Side Navigation Menu</h1>
<h1>Slowly resize screen to see the width transition</h1>
<div class="nav-container">
<ul class="nav">
<!--
/* Add as many links as you need */
// -->
<li class="active"><a href="https://snapbuilder.com"><span class="icon-home"></span><span class="text">home</span></a></li>
<li><a href="https://snapbuilder.com"><span class="icon-user"></span><span class="text">about</span></a></li>
<li><a href="https://snapbuilder.com"><span class="icon-headphones"></span><span class="text">Audio</span></a></li>
<li><a href="https://snapbuilder.com"><span class="icon-picture"></span><span class="text">Portfolio</span></a></li>
<li><a href="https://snapbuilder.com"><span class="icon-facetime-video"></span><span class="text">video</span></a></li>
</ul>
</div>
<!--
/* Point towards your existing jQuery file, or leave this code in place */
// -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>
</html>
|
