Tips cara dan Tips Blogging

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
    loading...
    5 Komentar untuk "Cara Membuat Slide Out Navigations"

    Back To Top