jQuery & CSS3 ile Hazırladığım Menüyü Paylaşmak İstedim

16-12-2013, 02:14:13

Misafir

Arakdaşlar bu menüyü listedinle nin yeni versiyonu için hazırlamıştım daha sonra kullanmaktan vazgeçtim işinize yarar umarım, herkese kolay gelsin.

Buradan test edebilir,
http://codepen.io/idilmiray/full/vBrhK

Buradan kodları inceleyebilirsiniz,
http://codepen.io/idilmiray/pen/vBrhK

Yapılışı:

CSS Kodlarımız bunu stil.css diye kaydedin.

body {
    background: none repeat scroll 0 0 #181818;
}

.kapsama {
    background: none repeat scroll 0 0 #222222;
    box-shadow: 0 4px 12px #111111;
    font: 14px arial;
    margin: 50px auto auto;
	border-radius:10px;
    overflow: hidden;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    width: 250px;
}

.ic_blokBaslik {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 2px;
    box-shadow: 0 1px 2px #111111 inset;
    color: #555555;
    font: bold 13px arial;
    margin-bottom: 5px;
    padding: 12px 10px;
    text-indent: 0;
}

#kayan_arka
{
	-moz-transition:all .3s ease-out;
	-ms-transition:all .3s ease-out;
	-o-transition:all .3s ease-out;
	-webkit-transition:all .3s ease-out;
	background:none repeat scroll 0 0 #FFDC00;
	border:1px solid #000;
	border-radius:4px;
	display:inline-block;
	height:30px;
	margin-top:-3px;
	padding:0;
	position:absolute;
	top:0;
	transition:all .3s ease-out;
	width:248px;
	z-index:0
}
ol.liste
{
	counter-reset:li;
	margin-left:0;
	padding-left:0;
	position:relative
}

ol.liste > li
{
	-moz-transition:all .3s ease-out;
	-ms-transition:all .3s ease-out;
	-o-transition:all .3s ease-out;
	-webkit-transition:all .3s ease-out;
	color:#666;
	cursor:pointer;
	height:22px;
	list-style:none outside none;
	margin:0;
	overflow:hidden;
	padding:4px 8px;
	position:relative;
	text-transform:lowercase;
	transition:all .3s ease-out
}

ol.liste > li:hover
{
	color:#333;
 }

 

ol.liste li span
{
	-moz-transform:scale(0);
	-moz-transition:all .3s ease-out;
	-ms-transform:scale(0);
	-ms-transition:all .3s ease-out;
	-o-transform:scale(0);
	-o-transition:all .3s ease-out;
	-webkit-transform:scale(0);
	-webkit-transition:all .3s ease-out;
	color:#888;
	float:right;
	font:11px/19px arial;
	margin-right:-40px;
	opacity:0;
	transform:scale(0);
	transition:all .3s ease-out
}

ol.liste > li:hover span
{
	-moz-transform:scale(1);
	-ms-transform:scale(1);
	-o-transform:scale(1);
	-webkit-transform:scale(1);
	margin-right:0;
	opacity:1;
	color:#333;
	transform:scale(1)
}

#yapimci {
    border-top: 1px dotted #444444;
    color: #444444;
    font: 11px arial;
    padding-bottom: 20px;
    padding-top: 10px;
    text-align: center;

}

#yapimci a{
color:#404040;
text-decoration:none;
	-moz-transition:all .3s ease-out;
	-ms-transition:all .3s ease-out;
	-o-transition:all .3s ease-out;
	-webkit-transition:all .3s ease-out;
}
#yapimci a:hover{
color:#ff5500;
}

html kodumuz menu.html diye kaydedebilirsiniz

<script type="text/javascript" src="http://www.listedinle.com/_js/jq.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="stil.css">

<meta charset="utf-8"/>

	<div class="kapsama">
		<div class="ic_blokBaslik">R10.net Konularından Bazıları</div>
			<ol class="liste">
			<div id="kayan_arka"></div>
				<li>Script satışı<span>214 Mesaj</span></li>
				<li>Google<span>28 Mesaj</span></li>
				<li>Facebook Üye Çekimi<span>78 Mesaj</span></li>
				<li>Konu Dışı<span>822 Mesaj</span></li>
				<li>Forumda<span>1112 Mesaj</span></li>
				<li>E-Ticaret<span>23 Mesaj</span></li>
				<li>Site Satışı<span>889 Mesaj</span></li>
				<li>İkinci El Alım - Satım<span>198 Mesaj</span></li>
				<li>jQuery Scriptleri<span>1102 Mesaj</span></li>
				<li>CssValley Kimdir?<span>0 Mesaj</span></li>
			</ol>
		<div id="yapimci"><a target="_blank" href="http://www.listedinle.com">Listedinle.com - CssValley</a></div>
	</div>

Ve son olarak da jQuery kodumuz. Html kodlarınızın hemen altına kopyalayınız.

	/*---------------------------------*\
	------> CssValley - R10.net   <------
	\*---------------------------------*/
	
	jQuery("ol.liste li").hover(function(){
		var yukseklik  = 30;
		var sira 	   = $(this).index();
		var konum 	   = yukseklik * (sira-1);
		$("#kayan_arka").css({top:konum});

	}, function(){});

Buradan test edebilirsiniz.

http://codepen.io/idilmiray/full/vBrhK