Beatiful vertical

Font  awesome ile hazırlamış olduğum bir  örneği  sizlere paylaşmak kısmet oldu  bu sefer. Anlatıma geçmeden önce belirtmek istediğim husus siz download  butonuna basıp dosyayı  bilgisayarınıza  indirdikten sonra  sizin kendi malınızdır 🙂 Aslında  jQuery kullanarak animasyonlu  oluşturmak istedim ki onuda yaptım yapmasına ama bana göre animasyonlu olmayanı daha  güzel duruyor.

Sol tarafta  bulunan Font Awesome ikonlarının bulunduğu kutuya  içten gölge vererek arkaplan içine batmış bir görüntü vermek istedim ama  arka plan desenine pek uymuyor  gibi. Aklıma ilk  gelen arkadaşlık  sitesi geldi bve bu yüzden  arkadaşlık sitelerinde  olan linkler için ikonlar  ekledim. Kendi  sitenizdeki kategorilere  uygun ikonları buradan bulabilirsiniz. Tek yapmanız  gereken “fontawesome-  kısmından sonra her buton için belirlediğiniz  ikon ismini  girmek.

Örnek : class=”fontawesome-home”  home kelimesi Font  awesome  deki anasayfa ikonu ile eşleşir  ve ikon çerçevesinde  anasayfa ikonu  görünmesini sağlar. Her buton için ayrı  ayrı ayarlamanız gerekiyor.

Demo sayfasında iki tane örnek bulunuyor.

Kullanım

• Head etiketleri arasına eklemeniz gereken bölüm.

Css : 

@charset "utf-8";
/* CSS Document */

/* ---------- https://fortawesome.github.com/Font-Awesome/ ---------- */
@import url(https://weloveiconfonts.com/api/?family=fontawesome);

[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}
body {
	background-color: #f4f4f4;
	color: #5a5656;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.5em;
}

#container {
	margin: 70px auto;
	width: 251px;
}

.menu-icon {
	background-color:#999999;
	border-radius: 3px 0px 0px 3px;
	-moz-border-radius: 3px 0px 0px 3px;
	-webkit-border-radius: 3px 0px 0px 3px;
	color: #f4f4f4;
	display: block;
	float: left;
	height: 50px;
	line-height: 50px;
	text-align: center;
	width: 50px;
	margin-top:3px;	
	-moz-box-shadow: inset 5px 0px 18px #000000;
    -webkit-box-shadow: inset 5px 0px 18px #000000;
    box-shadow: inset 5px 0px 18px #000000;
/*Inner elements should not cover inner shadows*/
/*IE 7 AND 8 DO NOT SUPPORT INSET SHADOWS*/
}

.menu {
	background-color:#CCCCCC;
	border: none;
	border-radius: 0px 3px 3px 0px;
	-moz-border-radius: 0px 3px 3px 0px;
	-webkit-border-radius: 0px 3px 3px 0px;
	color: #f4f4f4;
	cursor: pointer;
	height: 50px;
	text-transform: uppercase;
	width: 200px;
	margin-left:1px;
	margin-top:3px;
}

.menu a{
    text-decoration:none;
	font-family: Garamond, serif;
	line-height: 2em;
	margin-top:3px;
	color: #fff;
	font-weight:bold;
	font-size: 21px;
	text-shadow: 0px 0px 0 rgb(216,216,216), 1px 0px 0 rgb(200,200,200), 2px 0px 0 rgb(185,185,185),3px 0px 0 rgb(169,169,169), 4px 0px 0 rgb(154,154,154), 5px 0px 4px rgba(0,0,0,0), 5px 0px 1px rgba(0,0,0,0.5), 0px 0px 4px rgba(0,0,0,.2);
}

•  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

<div id="container">

  <div class="ani">
	<a class="menu-icon"><span class="fontawesome-home"></span></a>
	<button class="menu"><a href="#">Anasayfa</a></button>
 </div>

  <div class="ani">	
	<a class="menu-icon"><span class="fontawesome-group"></span></a>
	<button class="menu"><a href="#">Arkadaslar</a></button>
 </div>	

  <div class="ani">
	<a class="menu-icon"><span class="fontawesome-comments-alt"></span></a>
	<button class="menu"><a href="#">Mesajlar</a></button>
 </div>

  <div class="ani"> 
	<a class="menu-icon"><span class="fontawesome-picture"></span></a>
	<button class="menu"><a href="#">Fotograflar</a></button>
 </div>

  <div class="ani"> 
	<a class="menu-icon"><span class="fontawesome-film"></span></a>
	<button class="menu"><a href="#">Videolar</a></button>
 </div>

  <div class="ani"> 
	<a class="menu-icon"><span class="fontawesome-off"></span></a>
	<button class="menu"><a href="#">Çikis</a></button>
 </div>

</div>

jQuery olanı için kullanmanız gereken kodlar

• Head etiketleri arasına eklemeniz gereken bölümler.

jQuery adresi : 

<script type="text/javascript" src="https://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>

 JavaScript : 

		<script type="text/javascript">
			$(document).ready(function(){
				$('.ani').hover(function(){
					$(".menu", this).stop().animate({ 
					 marginLeft:1});
				}, function() {
					$(".menu", this).stop().animate({
					  marginLeft:-50});
				});

			});
		</script>

 Css : 

@charset "utf-8";
/* CSS Document */

/* ---------- https://fortawesome.github.com/Font-Awesome/ ---------- */
@import url(https://weloveiconfonts.com/api/?family=fontawesome);

[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}
body {
	background-color: #f4f4f4;
	color: #5a5656;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.5em;
}

#container {
	margin: 70px auto;
	width: 250px;
}

.menu-icon {
	background-color:#999999;
	border-radius: 3px 0px 0px 3px;
	-moz-border-radius: 3px 0px 0px 3px;
	-webkit-border-radius: 3px 0px 0px 3px;
	color: #f4f4f4;
	display: block;
	float: left;
	height: 50px;
	line-height: 50px;
	text-align: center;
	width: 50px;
	-moz-box-shadow: inset 5px 0px 18px #000000;
    -webkit-box-shadow: inset 5px 0px 18px #000000;
    box-shadow: inset 5px 0px 18px #000000;
/*Inner elements should not cover inner shadows*/
/*IE 7 AND 8 DO NOT SUPPORT INSET SHADOWS*/
}

.menu {
	background-color:#CCCCCC;
	border: none;
	border-radius: 0px 3px 3px 0px;
	-moz-border-radius: 0px 3px 3px 0px;
	-webkit-border-radius: 0px 3px 3px 0px;
	color: #f4f4f4;
	cursor: pointer;
	height: 50px;
	text-transform: uppercase;
	width: 200px;
	margin-left:-50px;	
}

.menu a{
    text-decoration:none;
	font-family: Garamond, serif;
	line-height: 2em;
	color: #fff;
	font-weight:bold;
	font-size: 21px;
	text-shadow: inset 0px 0px 0 rgb(216,216,216), inset 1px 0px 0 rgb(200,200,200), inset 2px 0px 0 rgb(185,185,185),3px 0px 0 rgb(169,169,169), inset 4px 0px 0 rgb(154,154,154), inset 5px 0px 4px rgba(0,0,0,0), inset 5px 0px 1px rgba(0,0,0,0.5), inset 0px 0px 4px rgba(0,0,0,.2);
}

.ani { 
     margin-top: -10px; 
	 position: relative; 
	 width: 300px; 
	 height: 50px; 
	 overflow: hidden;
	 margin-top:3px;
}

•  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

<div id="container">

  <div class="ani">
	<a class="menu-icon"><span class="fontawesome-home"></span></a>
	<button class="menu"><a href="#">Anasayfa</a></button>
 </div>

  <div class="ani">	
	<a class="menu-icon"><span class="fontawesome-group"></span></a>
	<button class="menu"><a href="#">Arkadaslar</a></button>
 </div>	

  <div class="ani">
	<a class="menu-icon"><span class="fontawesome-comments-alt"></span></a>
	<button class="menu"><a href="#">Mesajlar</a></button>
 </div>

  <div class="ani"> 
	<a class="menu-icon"><span class="fontawesome-picture"></span></a>
	<button class="menu"><a href="#">Fotograflar</a></button>
 </div>

  <div class="ani"> 
	<a class="menu-icon"><span class="fontawesome-film"></span></a>
	<button class="menu"><a href="#">Videolar</a></button>
 </div>

  <div class="ani"> 
	<a class="menu-icon"><span class="fontawesome-off"></span></a>
	<button class="menu"><a href="#">Çikis</a></button>
 </div>

</div>