Sweet CSS3 Vertical Navigation
Eric Hoffman demonstrates how you can create a vertical navigation using only CSS3 and without any images. The idea of this cool navigation is when you hover over the circle icon, it expands, displaying some descriptions about the menu. Be reminded though that it has been tested using Webkit browsers such as Safari and Chrome and may not work in other browsers.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Sweet CSS3 Vertical Navigation</title>
<link rel="stylesheet" type="text/css" href="reset.css"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
</body>
</html>
Then add this code.
<div id="nav">
<a href="#"><span>p</span><span>My rants</span></a>
<a href="#"><span>i</span><span>All about me</span></a>
<a href="#"><span>o</span><span>My projects</span></a>
<a href="#"><span>M</span><span>Drop a line</span></a>
</div>
CSS
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym {
border:0;
}
Styling the whole document. Adding padding and background color.
body {
background: #d1eaf9;
padding: 10px;
}
Importing pictos by using @font-face
@font-face {
font-family: 'Pictos';
src: url('font/pictos-web.eot');
src: local('?'), url('font/pictos-web.woff') format('woff'), url('font/pictos-web.ttf') format('truetype'), url('font/pictos-web.svg') format('svg');
font-weight: normal;
font-style: normal;
}
Actual styling of navigation.
#nav a {
display: block;
font-style: normal;
font-family: 'Pictos';
font-size: 20px;
padding: 2px 20px 38px 20px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0a324a), to(#08283b));
width: 20px;
text-decoration: none;
overflow: hidden;
text-shadow: 0 -1px 1px black;
border-radius: 50px;
color: white;
height: 20px;
margin-bottom: 10px;
border: 5px solid #146595;
-webkit-transition: all ease-in-out .3s;
-webkit-background-clip: padding-box;
}
Click on the image for more information about this cool tutorial.
Click here for the LIVE DEMO.
0
511
