Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj29.12.2011, 16:41 (UTC)    
Mesaj konusu: Sitenize Profesyonel Yeni Slider Menü

Görünüm: Test Edilmiştir. Sorunsuz çalışmaktadır.

Kod:
<style type="text/css">

 ul.sdt_menu{
 margin:0;
 padding:0;
 list-style: none;
 font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
 font-size:14px;
 width:1020px;
 }
 ul.sdt_menu a{
 text-decoration:none;
 outline:none;
 }
 ul.sdt_menu li{
 float:left;
 width:170px;
 height:85px;
 position:relative;
 cursor:pointer;
 }
 ul.sdt_menu li > a{
 position:absolute;
 top:0px;
 left:0px;
 width:170px;
 height:85px;
 z-index:12;
 background:transparent url(http://tympanus.net/Tutorials/SlideDownBoxMenu/images/overlay.png) no-repeat bottom right;
 -moz-box-shadow:0px 0px 2px #000 inset;
 -webkit-box-shadow:0px 0px 2px #000 inset;
 box-shadow:0px 0px 2px #000 inset;
 }
 ul.sdt_menu li a img{
 border:none;
 position:absolute;
 width:0px;
 height:0px;
 bottom:0px;
 left:85px;
 z-index:100;
 -moz-box-shadow:0px 0px 4px #000;
 -webkit-box-shadow:0px 0px 4px #000;
 box-shadow:0px 0px 4px #000;
 }
 ul.sdt_menu li span.sdt_wrap{
 position:absolute;
 top:25px;
 left:0px;
 width:170px;
 height:60px;
 z-index:15;
 }
 ul.sdt_menu li span.sdt_active{
 position:absolute;
 background:#111;
 top:85px;
 width:170px;
 height:0px;
 left:0px;
 z-index:14;
 -moz-box-shadow:0px 0px 4px #000 inset;
 -webkit-box-shadow:0px 0px 4px #000 inset;
 box-shadow:0px 0px 4px #000 inset;
 }
 ul.sdt_menu li span span.sdt_link,
 ul.sdt_menu li span span.sdt_descr,
 ul.sdt_menu li div.sdt_box a{
 margin-left:15px;
 text-transform:uppercase;
 text-shadow:1px 1px 1px #000;
 }
 ul.sdt_menu li span span.sdt_link{
 color:#fff;
 font-size:24px;
 float:left;
 clear:both;
 }
 ul.sdt_menu li span span.sdt_descr{
 color:#0B75AF;
 float:left;
 clear:both;
 width:155px; /*For dumbass IE7*/
 font-size:10px;
 letter-spacing:1px;
 }
 ul.sdt_menu li div.sdt_box{
 display:block;
 position:absolute;
 width:170px;
 overflow:hidden;
 height:170px;
 top:85px;
 left:0px;
 display:none;
 background:#000;
 }
 ul.sdt_menu li div.sdt_box a{
 float:left;
 clear:both;
 line-height:30px;
 color:#0B75AF;
 }
 ul.sdt_menu li div.sdt_box a:first-child{
 margin-top:15px;
 }
 ul.sdt_menu li div.sdt_box a:hover{
 color:#fff;
 }

 </style><style type="text/css">
 body{
 background:#333 url(http://tympanus.net/Tutorials/SlideDownBoxMenu/images/bg.jpg) repeat top left;
 font-family:Arial;
 }
 span.reference{
 position:fixed;
 left:10px;
 bottom:10px;
 font-size:12px;
 }
 span.reference a{
 color:#aaa;
 text-transform:uppercase;
 text-decoration:none;
 text-shadow:1px 1px 1px #000;
 margin-right:30px;
 }
 span.reference a:hover{
 color:#ddd;
 }
 ul.sdt_menu{
 margin-top:150px;
 }
 h1.title{
 text-indent:-9000px;
 background:transparent url(http://tympanus.net/Tutorials/SlideDownBoxMenu/images/title.png) no-repeat top left;
 width:633px;
 height:69px;
 }
 </style>
<div class="content">
<h1 class="title">Slide Down Box Menu with jQuery and CSS3</h1>
<ul id="sdt_menu" class="sdt_menu">
    <li><a href="#"><img alt="" src="http://tympanus.net/Tutorials/SlideDownBoxMenu/images/2.jpg" /> <span class="sdt_wrap"><span class="sdt_link">About me</span> <span class="sdt_descr">Get to know me</span> </span></a></li>
    <li><a href="#"><img alt="" src="http://tympanus.net/Tutorials/SlideDownBoxMenu/images/1.jpg" /> <span class="sdt_wrap"><span class="sdt_link">Portfolio</span> <span class="sdt_descr">My work</span> </span></a>
    <div class="sdt_box"><a href="#">Websites</a> <a href="#">Illustrations</a> <a href="#">Photography</a></div>
    </li>
    <li><a href="#"><img alt="" src="http://tympanus.net/Tutorials/SlideDownBoxMenu/images/3.jpg" /> <span class="sdt_wrap"><span class="sdt_link">Inspiration</span> <span class="sdt_descr">Where ideas get born</span> </span></a></li>
    <li><a href="#"><img alt="" src="http://tympanus.net/Tutorials/SlideDownBoxMenu/images/4.jpg" /> <span class="sdt_wrap"><span class="sdt_link">Photos</span> <span class="sdt_descr">I like to photograph</span> </span></a></li>
    <li><a href="#"><img alt="" src="http://tympanus.net/Tutorials/SlideDownBoxMenu/images/5.jpg" /> <span class="sdt_wrap"><span class="sdt_link">Blog</span> <span class="sdt_descr">I write about design</span> </span></a></li>
    <li><a href="#"><img alt="" src="http://tympanus.net/Tutorials/SlideDownBoxMenu/images/6.jpg" /> <span class="sdt_wrap"><span class="sdt_link">Projects</span> <span class="sdt_descr">I like to code</span> </span></a>
    <div class="sdt_box"><a href="#">Job Board Website</a> <a href="#">Shopping Cart</a> <a href="#">Interactive Maps</a></div>
    </li>
</ul>
</div>
<div><span class="reference"><a href="http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/">back to the Codrops Tutorial</a> <a href="http://www.flickr.com/photos/arcticpuppy/sets/72157622090180990/">Images by tibchris</a> </span></div>
<!-- The JavaScript --><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript">

 // t: current time, b: begInnIng value, c: change In value, d: duration
 jQuery.easing['jswing'] = jQuery.easing['swing'];

 jQuery.extend( jQuery.easing,
 {
 def: 'easeOutQuad',
 swing: function (x, t, b, c, d) {
 //alert(jQuery.easing.default);
 return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
 },
 easeInQuad: function (x, t, b, c, d) {
 return c*(t/=d)*t + b;
 },
 easeOutQuad: function (x, t, b, c, d) {
 return -c *(t/=d)*(t-2) + b;
 },
 easeInOutQuad: function (x, t, b, c, d) {
 if ((t/=d/2) < 1) return c/2*t*t + b;
 return -c/2 * ((--t)*(t-2) - 1) + b;
 },
 easeInCubic: function (x, t, b, c, d) {
 return c*(t/=d)*t*t + b;
 },
 easeOutCubic: function (x, t, b, c, d) {
 return c*((t=t/d-1)*t*t + 1) + b;
 },
 easeInOutCubic: function (x, t, b, c, d) {
 if ((t/=d/2) < 1) return c/2*t*t*t + b;
 return c/2*((t-=2)*t*t + 2) + b;
 },
 easeInQuart: function (x, t, b, c, d) {
 return c*(t/=d)*t*t*t + b;
 },
 easeOutQuart: function (x, t, b, c, d) {
 return -c * ((t=t/d-1)*t*t*t - 1) + b;
 },
 easeInOutQuart: function (x, t, b, c, d) {
 if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
 return -c/2 * ((t-=2)*t*t*t - 2) + b;
 },
 easeInQuint: function (x, t, b, c, d) {
 return c*(t/=d)*t*t*t*t + b;
 },
 easeOutQuint: function (x, t, b, c, d) {
 return c*((t=t/d-1)*t*t*t*t + 1) + b;
 },
 easeInOutQuint: function (x, t, b, c, d) {
 if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
 return c/2*((t-=2)*t*t*t*t + 2) + b;
 },
 easeInSine: function (x, t, b, c, d) {
 return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
 },
 easeOutSine: function (x, t, b, c, d) {
 return c * Math.sin(t/d * (Math.PI/2)) + b;
 },
 easeInOutSine: function (x, t, b, c, d) {
 return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
 },
 easeInExpo: function (x, t, b, c, d) {
 return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
 },
 easeOutExpo: function (x, t, b, c, d) {
 return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
 },
 easeInOutExpo: function (x, t, b, c, d) {
 if (t==0) return b;
 if (t==d) return b+c;
 if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
 return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
 },
 easeInCirc: function (x, t, b, c, d) {
 return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
 },
 easeOutCirc: function (x, t, b, c, d) {
 return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
 },
 easeInOutCirc: function (x, t, b, c, d) {
 if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
 return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
 },
 easeInElastic: function (x, t, b, c, d) {
 var s=1.70158;var p=0;var a=c;
 if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
 if (a < Math.abs(c)) { a=c; var s=p/4; }
 else var s = p/(2*Math.PI) * Math.asin (c/a);
 return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 },
 easeOutElastic: function (x, t, b, c, d) {
 var s=1.70158;var p=0;var a=c;
 if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
 if (a < Math.abs(c)) { a=c; var s=p/4; }
 else var s = p/(2*Math.PI) * Math.asin (c/a);
 return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
 },
 easeInOutElastic: function (x, t, b, c, d) {
 var s=1.70158;var p=0;var a=c;
 if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
 if (a < Math.abs(c)) { a=c; var s=p/4; }
 else var s = p/(2*Math.PI) * Math.asin (c/a);
 if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
 },
 easeInBack: function (x, t, b, c, d, s) {
 if (s == undefined) s = 1.70158;
 return c*(t/=d)*t*((s+1)*t - s) + b;
 },
 easeOutBack: function (x, t, b, c, d, s) {
 if (s == undefined) s = 1.70158;
 return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
 },
 easeInOutBack: function (x, t, b, c, d, s) {
 if (s == undefined) s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
 return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
 },
 easeInBounce: function (x, t, b, c, d) {
 return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
 },
 easeOutBounce: function (x, t, b, c, d) {
 if ((t/=d) < (1/2.75)) {
 return c*(7.5625*t*t) + b;
 } else if (t < (2/2.75)) {
 return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
 } else if (t < (2.5/2.75)) {
 return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
 } else {
 return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
 }
 },
 easeInOutBounce: function (x, t, b, c, d) {
 if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
 return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
 }
 });



 </script><script type="text/javascript">
 $(function() {
 $('#sdt_menu > li').bind('mouseenter',function(){
 var $elem = $(this);
 $elem.find('img')
 .stop(true)
 .animate({
 'width':'170px',
 'height':'170px',
 'left':'0px'
 },400,'easeOutBack')
 .andSelf()
 .find('.sdt_wrap')
 .stop(true)
 .animate({'top':'140px'},500,'easeOutBack')
 .andSelf()
 .find('.sdt_active')
 .stop(true)
 .animate({'height':'170px'},300,function(){
 var $sub_menu = $elem.find('.sdt_box');
 if($sub_menu.length){
 var left = '170px';
 if($elem.parent().children().length == $elem.index()+1)
 left = '-170px';
 $sub_menu.show().animate({'left':left},200);
 }
});
 }).bind('mouseleave',function(){
 var $elem = $(this);
 var $sub_menu = $elem.find('.sdt_box');
 if($sub_menu.length)
 $sub_menu.hide().css('left','0px');

 $elem.find('.sdt_active')
 .stop(true)
 .animate({'height':'0px'},300)
 .andSelf().find('img')
 .stop(true)
 .animate({
 'width':'0px',
 'height':'0px',
 'left':'85px'},400)
 .andSelf()
 .find('.sdt_wrap')
 .stop(true)
 .animate({'top':'25px'},500);
 });
 });
 </script>
Mesaj29.12.2011, 18:06 (UTC)    
Mesaj konusu:

eline saglik tam editlik olmus :)bakalim becerebilecemmi Smile kullanmak istiyorum bunu Smile
Mesaj29.12.2011, 18:15 (UTC)    
Mesaj konusu:

teşekkürler. ee gerisi kod biginize kalmış hocam, ctrl⁺v
Mesaj31.12.2011, 18:51 (UTC)    
Mesaj konusu:

cok guzel oluyor site icerisnde ama hangi amaca hizmet ettirecegimi bilemedim valla, simdilik arsivlik ettim, guzel paylasim eline saglik
Mesaj01.01.2012, 02:52 (UTC)    
Mesaj konusu:

güzelmiş... ama bunu düzenleyip kullanmak lazım
______________
Kazım Bayram Blog
Webmaster Adayı Blog
Zaman Tunelim
Mesaj09.01.2012, 13:10 (UTC)    
Mesaj konusu:

Evet Gayet Güzel çalışıyor, Webmasteradayının dediği gibi editleyip kullanmak lazım
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu