CSS3 Vertical Menu

CSS3 Vertical Menu este disponibil in doua nuante,Dark si Light dar poate fi customizat foarte usor pentru a se potrivi nu design-ul pagii voastre.
+ Dark and Light design
+ All browser support
+ Responsive
+ 519 Icons (Font-Awesome)
+ Fully Customizable
+ CSS3 Hover Transition Effect
Pentru a schimba sau adauga icons in meniu,gasiti lista completa pe Font-Awesome


- Vertical Menu Dark:
Load Google Font and Font-Awesome
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <link href='http://fonts.googleapis.com/css?family=Rokkitt:400,700' rel='stylesheet' type='text/css'>
HTML
<div id="foxycode-nav-dark"> <ul> <li><a href="#" class="active"><i class="fa fa-home"></i><p>Home</p></a></li> <li><a href="#"><i class="fa fa-user"></i><p>About</p></a></li> <li><a href="#"><i class="fa fa-cogs"></i><p>Services</p></a></li> <li><a href="#"><i class="fa fa-comments"></i><p>Blog</p></a></li> <li><a href="#"><i class="fa fa-picture-o"></i><p>Gallery</p></a></li> <li><a href="#"><i class="fa fa-briefcase"></i><p>Projects</p></a></li> <li><a href="#"><i class="fa fa-envelope-o"></i><p>Contact</p></a></li> </ul> </div>
CSS file
#foxycode-nav-dark { background: none repeat scroll 0 0 #333; margin: 0 auto; width: 210px; } #foxycode-nav-dark .fa { color: #eee; font-size: 24px; margin-left: 10px; width: 25px; } #foxycode-nav-dark ul { list-style-type: none; margin: 0; padding: 0; } #foxycode-nav-dark ul li p { display: inline; font-family: "Rokkitt",serif; } #foxycode-nav-dark li .active > p { color: #e74c3c; margin-left: 25px; } #foxycode-nav-dark li .active > i { color: #fff; } #foxycode-nav-dark li .active { background: url("http://s22.postimg.org/mmdqu6cwd/Shape_dark.png") repeat-y scroll left center rgba(0, 0, 0, 0); border-top: medium none; } #foxycode-nav-dark ul li a { border-top: 1px solid #444; color: #eee; display: block; padding: 8px 5px; text-decoration: none; transition: all 0.3s ease-in-out 0s; width: 200px; } #foxycode-nav-dark ul li a:hover { background: url("http://s22.postimg.org/mmdqu6cwd/Shape_dark.png") repeat-y scroll left center rgba(0, 0, 0, 0); transition: all 0.3s ease-in-out 0s; } #foxycode-nav-dark ul li a:hover > i { color: #fff; transition: all 0.3s ease-in-out 0s; } #foxycode-nav-dark ul li a:hover > p { color: #e74c3c; margin-left: 25px; transition: all 0.3s ease-in-out 0s; } #foxycode-nav-dark ul li a p { margin-left: 20px; vertical-align: bottom; }

• Live Preview

Pentru varianta Light Font-Awesome si Google font raman aceleasi,se schimba doar HTML si CSS file:
HTML
<div id="foxycode-nav-light"> <ul> <li><a href="#" class="active"><i class="fa fa-home"></i><p>Home</p></a></li> <li><a href="#"><i class="fa fa-user"></i><p>About</p></a></li> <li><a href="#"><i class="fa fa-cogs"></i><p>Services</p></a></li> <li><a href="#"><i class="fa fa-comments"></i><p>Blog</p></a></li> <li><a href="#"><i class="fa fa-picture-o"></i><p>Gallery</p></a></li> <li><a href="#"><i class="fa fa-briefcase"></i><p>Projects</p></a></li> <li><a href="#"><i class="fa fa-envelope-o"></i><p>Contact</p></a></li> </ul> </div>
CSS file
#foxycode-nav-light { background: url("http://i40.servimg.com/u/f40/17/00/85/53/conten18.png") repeat scroll 0 0 rgba(0, 0, 0, 0); border: 1px solid #fff; box-shadow: 0 0 2px 0 #999, 0 0 5px 0 rgba(0, 0, 0, 0.1) inset; margin: 0 auto; width: 210px; } #foxycode-nav-light .fa { color: #333; font-size: 24px; margin-left: 10px; width: 25px; } #foxycode-nav-light ul { list-style-type: none; margin: 0; padding: 0; } #foxycode-nav-light ul li p { display: inline; font-family: "Rokkitt",serif; } #foxycode-nav-light li .active >p { color: #e74c3c; margin-left: 25px; } #foxycode-nav-light li .active >i { color: #fff; } #foxycode-nav-light li .active { background: url("http://s27.postimg.org/ubfia2zdr/Shape_1.png") repeat-y scroll left center rgba(0, 0, 0, 0); border-top: none; } #foxycode-nav-light ul li a { border-top: 1px solid #eee; color: #333333; display: block; padding: 8px 5px; text-decoration: none; transition: all 0.3s ease-in-out 0s; width: 200px; } #foxycode-nav-light ul li a:hover { background: url("http://s27.postimg.org/ubfia2zdr/Shape_1.png") repeat-y scroll left center rgba(0, 0, 0, 0); transition: all 0.3s ease-in-out 0s; } #foxycode-nav-light ul li a:hover > i { color: #fff; transition: all 0.3s ease-in-out 0s; } #foxycode-nav-light ul li a:hover > p { color: #e74c3c; margin-left: 25px; transition: all 0.3s ease-in-out 0s; } #foxycode-nav-light ul li a p { margin-left: 20px; vertical-align: bottom; }

• Live Preview