Zaman: 11-24-2017, 03:10 AM Hoşgeldin Misafir ! (GirişÜye Olun)
Birdamlabilgi.com - Web Master - Download - Paylaşım Forumu



Fixed Navigation - Sabit Menü
Değerlendir:
  • 0 Oy - 0 Yüzde
  • 1
  • 2
  • 3
  • 4
  • 5
Konu Bilgileri
Cevaplar: 0 İzlenme: 344
Fixed Navigation - Sabit Menü
05-14-2013, 10:26 PM
Fixed Navigation - Sabit Menü

Demo: Linki görebilmek için giriş yapmanız ya da üye olmanız gerekir.

Kod:
<title>Beautiful Fixed Slide Out Navigation - Codrops</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="KODLANACAKLAR/FixedNavigationTutorial2/css/style.css" type="text/css" charset="utf-8" />          <style type="text/css">
        body{
            font-family:Arial;
            height:2000px;
        }
        .header
        {
            width:600px;
            height:56px;
            position:absolute;
            top:50%;
            left:10px;
        }

        a.back{
            width:256px;
            height:73px;
            position:absolute;
            bottom:15px;
            right:15px;
        }
        a.dry{
            position:absolute;
            bottom:15px;
            left:15px;
            text-align:left;
            font-size:12px;
            color:#ccc;
            text-transform:uppercase;
            text-decoration:none;
        }
        ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 10px;
    list-style: none;
    z-index:999999;
    width:721px;
}
ul#navigation li {
    width: 103px;
    display:inline;
    float:left;    
}
ul#navigation li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:#E7F2F9;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    text-decoration:none;
    text-align:center;
    padding-top:80px;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);  
}
ul#navigation li a:hover{
     background-color:#CAE3F2;
}
ul#navigation li a span{
    letter-spacing:2px;
    font-size:11px;
    color:#60ACD8;
    text-shadow: 0 -1px 1px #fff;      
}
ul#navigation .ana_sayfa a{
    background-image: url(http://img.webme.com/pic/f/frmbestlive/ana_sayfa01.png);
}
ul#navigation .hakkimda a      {
    background-image: url(http://img.webme.com/pic/f/frmbestlive/hakkimda01.png);
}
ul#navigation .arama a      {
    background-image: url(http://img.webme.com/pic/f/frmbestlive/arama01.png);
}
ul#navigation .galeri a      {
    background-image: url(http://img.webme.com/pic/f/frmbestlive/galeri01.png);
}
ul#navigation .destek a   {
    background-image: url(http://img.webme.com/pic/f/frmbestlive/destek01.png);
}
ul#navigation .istatistikler a     {
    background-image: url(http://img.webme.com/pic/f/frmbestlive/istatistikler01.png);
}
ul#navigation .iletisim a    {
    background-image: url(http://img.webme.com/pic/f/frmbestlive/iletisim01.png);
}

    </style>
<div class="header">&nbsp;</div>
<ul id="navigation">
    <li class="ana_sayfa"><a href=""><span>Ana Sayfa</span></a></li>
    <li class="hakkimda"><a href=""><span>Hakkımda</span></a></li>
    <li class="arama"><a href=""><span>Arama</span></a></li>
    <li class="galeri"><a href=""><span>Galeri</span></a></li>
    <li class="destek"><a href=""><span>Online Destek</span></a></li>
    <li class="istatistikler"><a href=""><span>İstatistikler</span></a></li>
    <li class="iletisim"><a href=""><span>İletişim</span></a></li>
</ul>
<div class="info"><a class="dry" href="http://frmbestlive.tr.gg">D&Uuml;ZENLEME : FRMBESTLİVE</a></div>
<script type="text/javascript" src="http://www.fileden.com/files/2012/7/10/3324393/menu_jquery-1.3.2.java"></script>         <script type="text/javascript">
            $(function() {
                var d=300;
                $('#navigation a').each(function(){
                    $(this).stop().animate({
                        'marginTop':'-80px'
                    },d+=150);
                });

                $('#navigation > li').hover(
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-2px'
                    },200);
                },
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-80px'
                    },200);
                }
            );
            });
        </script>      </meta>
Sitemizdeki reklamlara günde 1 kere tıklarsanız bize en büyük desteği sağlamış olursunuz.

İçerik Yetkilisi, Deneme Moderatör ve Destek Ekibi alımları başlamıştır. Başvurular Site Adminlerine..

Emek verilmiş konulara Teşekkür etmeyi unutmayalım.
Forumda vakit geçirdiğiniz sürece bir aile ortamında olduğunuzu ve bu sebeple de yazdıklarınıza dikkat etmeniz gerektiğini unutmayınız.
Konu içerisinde gördüğünüz hataları veya kurallara aykırı davranışları bildir butonunu kullanarak bizlere iletebilirsiniz.
« Önceki | Sonraki »




Benzeyen Konular
Konu: Yazar Cevaplar: Gösterim: Son Mesaj
yeni Sabit Menü M.Akal 4 552 06-11-2013 10:44 AM
Son Mesaj: A TARİK KAMAT
  Üste Sabitlenmiş Menü DaggeroN 0 379 05-14-2013 10:27 PM
Son Mesaj: DaggeroN
  Yatay Menü DaggeroN 0 330 05-10-2013 09:20 PM
Son Mesaj: DaggeroN
  Spastik Menü DaggeroN 1 516 03-09-2013 08:20 PM
Son Mesaj: uaua

Forum'a Git:


Konuyu görüntüleyenler: 1 Misafir