Şık bir buton tasarımı

Flash, Fireworks, Photoshop, ya da menü programlarından çıkan kadar kaliteli, güzel bir menü ortaya çıkaracağız. Yabancı bir kaynaktan yararlandım.

Flash, Fireworks, Photoshop, ya da menü programlarından çıkan kadar kaliteli, güzel bir menü ortaya çıkaracağız. Yabancı bir kaynaktan yararlandım.



İlk olarak arkadaşlar elimiz de 4 adet dosya olacak ;

[*] İndex.html
[*] jquery.blend-min
[*] jquery.blend
[*] nav-sprite(image)

İlk olarak index.html adında bir dosya oluşturup editör yardımıyla açıyoruz. Aynen şu kodları koyuyoruz:


xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

    <title>jQuery Blend</title>

    

    <style type='text/css'>

        *{padding:0; border:0; margin:0;}

        body{font-family:arial; padding:20px;}

        h2{font-size:16px; margin-bottom:10px; color:#555;}

        .demo{ margin-bottom:50px; overflow:auto; clear:both;}

        

    .demo a{

        display:block;

        text-indent:-9999px;

        width:90px;

        height:46px;

        margin-right:7px;

        float:left;

        background-image:url(nav-sprite.png);

        background-repeat:no-repeat;

        cursor:pointer;

    }

        

    #demo_home{background-position:0 0;}

    #demo_home:hover,#demo_home.hover{background-position:0 -48px;}

        

    

    </style>



    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

    <script type="text/javascript" src="jquery.blend.js"></script> 

    <script type="text/javascript">

        $(document).ready(function(){

            

            $("#demo2 a").blend();

            $("#demo3 a").blend({pulse:true});

            $("#demo4 a").blend({reverse:true});

            

        });

    </script>

</head>

<body>

<div class="demo" id="demo1">

        <h2>1.Versiyon</h2>

    <a href="#" id="demo_home">Sanalkurs.net</a></div>



    <div class="demo" id="demo2">

        <h2>2.versiyon</h2>

        <a href="#" id="demo_home">Sanalkurs.net</a></div>



<div class="demo" id="demo3">

        <h2>3.versiyon</h2>

    <a href="#" id="demo_home">Sanalkurs.net</a></div>



<div class="demo" id="demo4">

        <h2>4.versiyon</h2>

    <a href="#" id="demo_home">Sanalkurs.net</a></div>



</body>

</html>


jquery.blend (jSCRipt file) içeriğine ;

/*

    jQuery Blend v1.2

    (c) 2009 Jack Moore - www.colorpowered.com - jack@colorpowered.com

    Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php

*/

(function($){

    /*

        Blend creates a 2nd layer on top of the target element.

        This layer is faded in and out to create the effect.  The orignal, bottom layer

        has it's class set to 'hover' and remains that way for the duration to

        keep the CSS :hover state from being apparent when the object is moused-over.

    */

    

    $.fn.blend = function(options, callback) {

    // Disable Blend for FireFox 2 because of a bug that does not allow JavaScript

    // to retrieve the CSS background position.

    // More info: https://bugzilla.mozilla.org/show_bug.cgi?id=316981

    if ($.browser.mozilla && (parseFloat($.browser.version) < 1.9)) { return this; }

    

    var settings = $.extend({}, $.fn.blend.settings, options);

        $(this).each(function(){    

        var $this = $(this),

        $target = $(settings.target ? settings.target : this),

        $hover,

        target = [],

        i,

        length,

        style = {},

        active = false,

        out = 0,

        opacity = settings.opacity,

        bg = 'background-',

        properties = [

            bg+'color',

            bg+'image',

            bg+'repeat',

            bg+'attachment',

            bg+'position',

            bg+'position-x',

            bg+'position-y',

        ];

        

        length = properties.length;

        

        if($target[0].style.position != 'absolute'){

        $target.css({position:'relative'});   

        }

        

        if(!$target.hasClass('hover')){

        $target.wrapInner('<div style="position:relative" />');

        }

        

        for (i=0; i<length; i++){

        target = $target.css(properties);

        }

        

        $target.addClass("hover");

        

        style = {};

        style.position='absolute';

        style.top=0;

        style.left=0;

        style.width=$target.width();

        style.height=$target.height();

        for (i=0; i<length; i++){

            style[properties] = $target.css(properties);

        }

        

        //checks to see if blend has already been applied to an element.

        if($target.find(".jsblend").length === 0){

        $hover = $('<div class="jsblend" />').css(style);

        

        if(settings.top){

            $hover.appendTo($target);

        } else {

            $hover.prependTo($target);

        }

        } else {

        $hover = $target.find(".jsblend");

        }

        

        style = {};

        for (i=0; i<length; i++){

            style[properties] = target;

        }

        

        $target.css(style);

        

        if(settings.reverse){

        out = settings.opacity;

        opacity = 0;

        }

        $hover.css({opacity:out});

        

        function pulse(o){

        if(active){

            $hover.fadeTo(settings.speed, o, function(){

            pulse(o==out?opacity:out);

            });

        }

        }

        

        if(settings.pulse && settings.active){

        active = true;

        pulse(opacity);

        } else if(settings.pulse){

        $this.hover(function(){

            active = true;

            pulse(opacity);

        }, function(){

            active = false;

            $hover.stop(true).fadeTo(settings.speed, out);

        });

        } else {

        $this.hover(function(){

            $hover.stop().fadeTo(settings.speed, opacity);

        }, function(){

            $hover.stop().fadeTo(settings.speed, out);

        });

        }

        

    });

        return this;

    };

    

    $.fn.blend.settings = {

        speed : 500,

        opacity : 1,

        target : false,

        reverse : false,

    pulse : false,

    active : false,

    top : false

    };

    

})(jQuery);


jquery.blend-min İçeriğine;

// jQuery Blend v1.2

(function(a){a.fn.blend=function(b,d){if(a.browser.mozilla&&(parseFloat(a.browser.version)<1.9)){return this}var c=a.extend({},a.fn.blend.settings,b);a(this).each(function(){var q=a(this),g=a(c.target?c.target:this),m,o=[],l,f,e={},h=false,j=0,n=c.opacity,k="background-",p=[k+"color",k+"image",k+"repeat",k+"attachment",k+"position",k+"position-x",k+"position-y",];f=p.length;if(g[0].style.position!="absolute"){g.css({position:"relative"})}if(!g.hasClass("hover")){g.wrapInner('<div style="position:relative" />')}for(l=0;l<f;l++){o[l]=g.css(p[l])}g.addClass("hover");e={};e.position="absolute";e.top=0;e.left=0;e.width=g.width();e.height=g.height();for(l=0;l<f;l++){e[p[l]]=g.css(p[l])}if(g.find(".jsblend").length===0){m=a('<div class="jsblend" />').css(e);if(c.top){m.appendTo(g)}else{m.prependTo(g)}}else{m=g.find(".jsblend")}e={};for(l=0;l<f;l++){e[p[l]]=o[l]}g.css(e);if(c.reverse){j=c.opacity;n=0}m.css({opacity:j});function r(i){if(h){m.fadeTo(c.speed,i,function(){r(i==j?n:j)})}}if(c.pulse&&c.active){h=true;r(n)}else{if(c.pulse){q.hover(function(){h=true;r(n)},function(){h=false;m.stop(true).fadeTo(c.speed,j)})}else{q.hover(function(){m.stop().fadeTo(c.speed,n)},function(){m.stop().fadeTo(c.speed,j)})}}});return this};a.fn.blend.settings={speed:500,opacity:1,target:false,reverse:false,pulse:false,active:false,top:false}})(jQuery);



Sonuç olarak, denemeniz sonucunda gözükecektir. Editlemek için sadece index.html dosyası içersinde div'ler üzerinde oynayarak işlemler yapabilirsiniz. Diğer iki dosya içersinde değişiklik yapmanıza gerek yoktur.

Kolay gelsin arkadaşlar...

  • Etiketler;
Arda Kazancı
Makul fiyatlara proje fikirleriniz için benimle iletişime geçebilirsiniz. - Web , Mobil
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

çok iyi tebrik ederim.
çok iyi terbikleer.
tbrkler
çok iyi terbkler.
kaynak dosya kaldırılımış
kaynak dosya kaldırılımış
kaynak dosyalarını tekrardan ekleyebilirmisiniz sitenin devamlılığını sağlıyalım lütfen

Yukarı Git