empadesign

YAZI SLİDESİ:
Geçenlerde bir siteye girdim geziyordum ölesine.Baktım bir yazı slidesi yapılışını göstermiş.Bende yapayım dedim ve yaptım tabi ben bazı değişik özellikler ekledim.Daha da güzel oldu.Şimdi de bunu sizlerle paylaşmak istedim.Daha sonra yeni özelliklerde ekleyebilirim beni takip etmeye devam edin.

| Önizleme Yap |

TASARIM ÜSTÜNE:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script><script type="text/javascript">

    $(document).ready(function(){

    

        $("#listeler div:not(':first')").hide();

        $("#tablar li:first").addClass("aktif");

        

        $("#tablar li").click(function(){

            var tiklanan = $(this).index();

            $("#listeler div").hide();

            $("#tablar li").removeClass("aktif");

            $(this).addClass("aktif");

            $("#listeler div:eq("+tiklanan+")").fadeIn(1100);

        });

        

    });

    </script>

CSS:
body {margin: auto; font: 12px Arial} ul,li,h1,p {padding: 0; margin: 0; list-style-type: none} a {text-decoration: none} :focus {outline: 0} #kutu { padding: 10px; width: 500px; overflow: auto; border-top-right-radius:5px; border-bottom-riht-radius:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomright:5px; -webkit-border-radius-topright:5px; -webkit-border-radius-bottomright:5px } #tablar { width: 130px; float: left; border-top-right-radius:5px; border-bottom-riht-radius:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomright:5px; -webkit-border-radius-topright:5px; -webkit-border-radius-bottomright:5px } #tablar li a { background-color: #ddd; display: block; padding: 5px; margin-bottom: 5px; font-size: 14px; color: #aaa; font-weight: bold; border-top-left-radius:5px; border-bottom-left-radius:5px; -moz-border-radius-topleft:5px; -moz-border-radius-bottomleft:5px; -webkit-border-radius-topleft:5px; -webkit-border-radius-bottomleft:5px text-shadow: 1px 1px 1px #242424; } #tablar li a:hover, #tablar li.aktif a { background-color: #006599; color: #fff; text-shadow: 1px 1px 1px #242424; } #listeler { float: right; width: 370px; text-shadow: 1px 1px 1px #242424; } #listeler div { background-color: #006599; color: #fff; width: 350px; padding: 5px 10px; height: 113px; line-height: 20px; border-top-right-radius:5px; border-bottom-rihgt-radius:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomright:5px; -webkit-border-radius-topright:5px; -webkit-border-radius-bottomright:5px } #listeler div h1 { font-size: 18px; color: #006599; text-shadow: 1px 1px 1px #006599; }
HTML: 

<div id="kutu">

<div id="listeler">

<div>

<h1>EmPaDesign</h1>

<p>Buraya Deneme Yazısı Gelicektir, EmPaDesign Deneme Yazısı Deneme Bir İki &Uuml;&ccedil; Deneme </p>

</div>

<div>

<h1>EmPaDesign</h1>

<p>Buraya Deneme Yazısı Gelicektir, EmPaDesign Deneme Yazısı Deneme Bir İki &Uuml;&ccedil; Deneme </p>

</div>

<div>

<h1>EmPaDesign</h1>

<p>Buraya Deneme Yazısı Gelicektir, EmPaDesign Deneme Yazısı Deneme Bir İki &Uuml;&ccedil; Deneme </p>

</div>

<div>

<h1>EmPaDesign</h1>

<p>Buraya Deneme Yazısı Gelicektir, EmPaDesign Deneme Yazısı Deneme Bir İki &Uuml;&ccedil; Deneme </p>

</div>

</div>

<ul id="tablar">

    <li><a href="#">EmPaDesign1</a></li>

    <li><a href="#">EmPaDesign2</a></li>

    <li><a href="#">EmPaDesign3</a></li>

    <li><a href="#">EmPaDesign4</a></li>

</ul>

</div>