Simple vertical navigation menu.
Check it out at <a href="http://www.ourtuts.com/", to see how to make it using only HTML, CSS3, a bit of jQuery and an icon font: Vertical Navigation Menu
A Pen by Madalin Tudose on CodePen.
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Vertical Menu</title> | |
<link href='http://fonts.googleapis.com/css?family=Quicksand:400,700' rel='stylesheet' type='text/css' /> | |
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.min.js" /></script> | |
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet" /> | |
<!--[if IE 7]> | |
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome-ie7.min.css" rel="stylesheet" /> | |
<![endif]--> | |
</head> | |
<body> | |
<h1>Vertical Menu</h1> | |
<ul class="form"> | |
<li><a class="profile" href="#"><i class="icon-user"></i>Edit Profile</a></li> | |
<li class="selected"><a class="messages" href="#"><i class="icon-envelope-alt"></i>Messages <em>5</em></a></li> | |
<li><a class="settings" href="#"><i class="icon-cog"></i>App Settings</a></li> | |
<li><a class="logout" href="#"><i class="icon-signout"></i>Logout</a></li> | |
</ul> | |
</body> | |
</html> |
$(document).ready(function() { | |
$('ul.form li a').click( | |
function(e) { | |
e.preventDefault(); // prevent the default action | |
e.stopPropagation; // stop the click from bubbling | |
$(this).closest('ul').find('.selected').removeClass('selected'); | |
$(this).parent().addClass('selected'); | |
}); | |
}); |
body { | |
background:url(http://www.ourtuts.com/tutorials/vertical-menu/bg.jpg) scroll center center; | |
margin:0; | |
padding:0; | |
font-family:Quicksand; | |
font-weight:700; | |
} | |
ul.form { | |
position:relative; | |
background:#fff; | |
width:250px; | |
margin:auto; | |
padding:0; | |
list-style: none; | |
overflow:hidden; | |
-webkit-border-radius: 5px; | |
-moz-border-radius: 5px; | |
border-radius: 5px; | |
-webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1); | |
-moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1); | |
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1); | |
} | |
.form li a { | |
width:225px; | |
padding-left:20px; | |
height:50px; | |
line-height:50px; | |
display:block; | |
overflow:hidden; | |
position:relative; | |
text-decoration:none; | |
text-transform:uppercase; | |
font-size:14px; | |
color:#686868; | |
-webkit-transition:all 0.2s linear; | |
-moz-transition:all 0.2s linear; | |
-o-transition:all 0.2s linear; | |
transition:all 0.2s linear; | |
} | |
.form li a:hover { | |
background:#efefef; | |
} | |
.form li a.profile { | |
border-left:5px solid #008747; | |
} | |
.form li a.messages { | |
border-left:5px solid #fecf54; | |
} | |
.form li a.settings { | |
border-left:5px solid #cf2130; | |
} | |
.form li a.logout { | |
border-left:5px solid #dde2d5; | |
} | |
.form li:first-child a:hover, .form li:first-child a { | |
-webkit-border-radius: 5px 5px 0 0; | |
-moz-border-radius: 5px 5px 0 0; | |
border-radius: 5px 5px 0 0; | |
} | |
.form li:last-child a:hover, .form li:last-child a { | |
-webkit-border-radius: 0 0 5px 5px; | |
-moz-border-radius: 0 0 5px 5px; | |
border-radius: 0 0 5px 5px; | |
} | |
.form li a:hover i { | |
color:#ea4f35; | |
} | |
.form i { | |
margin-right:15px; | |
-webkit-transition:all 0.2s linear; | |
-moz-transition:all 0.2s linear; | |
-o-transition:all 0.2s linear; | |
transition:all 0.2s linear; | |
} | |
.form em { | |
font-size: 10px; | |
background: #ea4f35; | |
padding: 3px 5px; | |
-webkit-border-radius: 10px; | |
-moz-border-radius: 10px; | |
border-radius: 10px; | |
font-style: normal; | |
color: #fff; | |
margin-top: 17px; | |
margin-right: 15px; | |
line-height: 10px; | |
height: 10px; | |
float:right; | |
} | |
.form li.selected a { | |
background:#efefef; | |
} | |
h1 { | |
color:#fff; | |
margin:0 auto; | |
margin-top:60px; | |
margin-bottom:40px; | |
font-size:30px; | |
width:300px; | |
text-align:center; | |
} | |
p { | |
text-align:center; | |
position:absolute; | |
width:100%; | |
bottom:0; | |
font-size:12px; | |
font-family:Arial, Helvetica; | |
color:#fff; | |
text-transform:uppercase; | |
} | |
p a { | |
color:#fff; | |
text-decoration:none; | |
} |