Cara Membuat Slide Out Navigations

     
Cara membuatnya :

  • Login blogger


  • Rancangan, Edit Html, Cari kode ]]></b:skin>






  • Dan Simpan kode berikut diatasnya : 




  • /*----------------

    Beautiful Slide Out Navigation

    -------------------------------*/

    .headerfixed

            {

                width:600px;

                height:56px;

                position:absolute;

                top:50%;

                left:10px;

                background:#fff url(title.png) no-repeat top left;

            }

    ul#navixed {

        position: fixed;

        margin: 0px;

        padding: 0px;

        top: 0px;

        right: 10px;

        list-style: none;

        z-index:999999;

        width:721px;

    }

    ul#navixed li {

        width: 103px;

        display:inline;

        float:left;  

    }

    ul#navixed li a {

        display: block;

        float:left;

        margin-top: -2px;

        width: 100px;

        height: 25px;

        background-color:#000;

        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#navixed li a:hover{

         background-color:#000;

    }

    ul#navixed li a span{

        letter-spacing:2px;

        font-size:11px;

        color:#FFF;

         

    }

    ul#navixed .home a{

        background-image: url(http://3.bp.blogspot.com/-aXrFVyf4QsA/TZBebt8Z8jI/AAAAAAAAAgY/wHMKwyDH86g/s1600/home.png);

    }

    ul#navixed .about a      {

        background-image: url(http://4.bp.blogspot.com/-U0VzmKiVx3k/TZBeclR4x5I/AAAAAAAAAgc/c6T4Q-__HTw/s1600/id_card.png);

    }

    ul#navixed .search a      {

        background-image: url(http://2.bp.blogspot.com/-84f0jEeeffc/TZBehJq90AI/AAAAAAAAAgs/w4UaF1VPgLs/s1600/search.png);

    }

    ul#navixed .podcasts a      {

        background-image: url(http://1.bp.blogspot.com/-sbloKktswgc/TZBed0gK93I/AAAAAAAAAgg/avwmYOErpGI/s1600/ipod.png);

    }

    ul#navixed .rssfeed a   {

        background-image: url(http://1.bp.blogspot.com/-Ro686lePoM8/TZBef9OyGcI/AAAAAAAAAgo/e_QaROPLVx0/s1600/rss.png);

    }

    ul#navixed .photos a     {

        background-image: url(http://3.bp.blogspot.com/-fi5XP0zvpB8/TZBeael-n5I/AAAAAAAAAgU/bwS_VlGvi-U/s1600/camera.png);

    }

    ul#navixed .contact a    {

        background-image: url(http://4.bp.blogspot.com/-RTxgq3NFIYM/TZBeei8J4-I/AAAAAAAAAgk/Zgo-9V-JXss/s1600/mail.png);




    Dan simpan script ini di atas kode
    </head> :





    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>

        <script src='http://kangdadang.googlecode.com/files/jcolor.js'/>

    <script type='text/javascript'>

                $(function() {

                    var d=300;

                    $(&#39;#navixed a&#39;).each(function(){

                        $(this).stop().animate({

                            &#39;marginTop&#39;:&#39;-80px&#39;

                        },d+=150);

                    });

                    $(&#39;#navixed &gt; li&#39;).hover(

                    function () {

                        $(&#39;a&#39;,$(this)).stop().animate({

                            &#39;marginTop&#39;:&#39;-2px&#39;

                        },200);

                    },

                    function () {

                        $(&#39;a&#39;,$(this)).stop().animate({

                            &#39;marginTop&#39;:&#39;-80px&#39;

                        },200);

                    }

                );

                });

            </script>




    Terakhir simpan cara pemanggilannya di atas kode
    <body>:





    <ul id='navixed'>

                <li class='home'><a href='#'><span>Home</span></a></li>

                <li class='about'><a href='#'><span>About</span></a></li>

                <li class='search'><a href='#'><span>Search</span></a></li>

                <li class='photos'><a href='#'><span>Photos</span></a></li>

                <li class='rssfeed'><a href='#'><span>Rss Feed</span></a></li>

                <li class='podcasts'><a href='#'><span>Podcasts</span></a></li>

                <li class='contact'><a href='#'><span>Contact</span></a></li>

            </ul>




    Ket : silahkan ganti # dengan link yang anda inginkan
     

     Source

    Komentar

    Posting Komentar

    Postingan populer dari blog ini

    Penyedia ads selain google adsense