jQuery ve Css3 kullanılarak hazırlanmış animasyonlu bir üst menü örneği. Bir aralar buna benzer flash bir menü görmüştüm. Tamam olarak bu şekilde değil de linklerin üstünde şeffaf bir baloncuk olan flash menüydü. Nerden aklıma geldiyse artık böyle bir örnek hazırlamak istedim. İlk önce kategori linklerinin üstüne opacity değeri 0.5 olan yarı şeffaf bir perde ekledim. Birde bu perdeninin arasında kaybolacağı iki tane de çerçeve ekledim. Biri en sağda diğeri de en solda duruyor. Perdenin genişliği 860px ve bu boyutta iki çerçevebin tam ortasını kapatacak genşlikte duruyor. Mouse üst menünün üstüne geldiği anda animate devreye giriyor ve 860px olan perdenin genişliği 0px oluyor. Perdenin küçülme hızı 300 milisaniye, tekrar eski haline gelme hızını da 1000 milisaniye olarak ayarladım. Bu hızları js kodlarda değiştirebilirsiniz.
Söyleme ihtiyacı duyduğum bir diğer konu son zamanlarda paylaştığım içeriklerde arka plan için herhangi bir resim kullanmadan eklediğim arkaplan desenleri. Menü örneğinin arka planına, sağına ve soluna da aynı desenleri ekledim. Bu Css3 desenlerin listesine buradan bakabilirsiniz. Bu listeden kendi sitenizin arkaplanına uygun desenleri Css kodlara ekleyip kendi siteniz için daha da güzel bir hale getirebilirsiniz. Şuan IE10 sürümünü kullandığım için daha eski tarayıcılarda test edemedim. IE10 tarayıcısında desenler görünmüyor ve kategori linklerinin 3D görünümü de normal düz yazı gibi görünüyor. Bunların dışında IE üzerinden siyah ve gri renkli bir menü olarak görünüyor. Ayrıca perde animasyonu da çalışıyor IE tarayıcısında.
Kullanım
- Head etiketleri arasına eklemeniz gereken bölümler.
Js adresi :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
JavaScript kodu :
<script type="text/javascript">
$(document).ready(function(){
$('.cerceve').hover(function(){
$("#perde", this).stop().animate({
width:'0px',
marginLeft:50},
{queue:false,duration:300});
}, function() {
$("#perde", this).stop().animate({
width:'860px',
marginLeft:50},
{queue:false,duration:1000});
});
});
</script>
Css :
.cerceve {
width:960px;
height:50px;
margin: 50px auto;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border-style:solid;
border-width:3px;
background:
linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-color: #131313;
background-size: 20px 20px;
}
.cerceve > #sol {
width:50px;
height:50px;
float:left;
margin-top:-2px;
overflow:hidden;
background-color:#003333;
border-top-left-radius: 20px 20px;
border-bottom-left-radius: 20px 20px;
box-shadow:0px 0px 0 rgb(202,202,202),0px 0px 0 rgb(158,158,158), 2px 2px 0 rgb(115,115,115),3px 3px 2px rgba(0,0,0,0.6),3px 3px 1px rgba(0,0,0,0.5),0px 0px 2px rgba(0,0,0,.2);
background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;
}
.cerceve > #sag {
width:50px;
height:50px;
float:right;
margin-top:-2px;
background-color:#003333;
border-top-right-radius: 20px 20px;
border-bottom-right-radius: 20px 20px;
box-shadow:0px 0px 0 rgb(202,202,202),0px 0px 0 rgb(158,158,158), 2px 2px 0 rgb(115,115,115),3px 3px 2px rgba(0,0,0,0.6),3px 3px 1px rgba(0,0,0,0.5),0px 0px 2px rgba(0,0,0,.2);
background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;
}
.cerceve > #perde {
width:860px;
height:50px;
position:fixed;
margin-left:50px;
margin-top:-2px;
background-color:#666666;
opacity:0.5;
float:left;
box-shadow:0px 0px 0 rgb(202,202,202),0px 0px 0 rgb(158,158,158), 2px 2px 0 rgb(115,115,115),3px 3px 2px rgba(0,0,0,0.6),3px 3px 1px rgba(0,0,0,0.5),0px 0px 2px rgba(0,0,0,.2);
}
.cerceve > li {
width:110px;
height:50px;
float:left;
list-style:none;
text-align:center;
display:inline-block;
margin-left:10px;
}
.cerceve > li > a{
width:100px;
text-decoration:none;
display:inline-block;
color:#666666;
padding-top:11px;
font-size: 20px;
text-align:center;
text-shadow:0px 0px 0 rgb(-104,-104,-104),1px 1px 0 rgb(-232,-232,-232), 2px 2px 0 rgb(-359,-359,-359),3px 3px 2px rgba(0,0,0,0),3px 3px 1px rgba(0,0,0,0.5),0px 0px 2px rgba(0,0,0,.2);
}
.cerceve > li:hover > a{
color:#FFFFFF;
}
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<div class="cerceve"> <div id="sol"></div> <div id="perde"></div> <div id="sag"></div> <li><a href="#">Anasayfa</a></li> <li><a href="#">Wordpress</a></li> <li><a href="#">Css3</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">Program</a></li> <li><a href="#">Script</a></li> <li><a href="#">Tutorial</a></li> </div>