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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv_UaQ4q3hZCYmif3G2LWcVrfnC4rjDWVmA5__MaMflZPOxkhlSqtJisrf5ow6eOa56PGGQffTL-Ljl7J4ly8Y_Fqe2U66QGDiTbzibR6V5fmNJz2_qZKaOCDswUVvLkt-Eb1ZNlkqwgA/s1600/home.png);

}

ul#navixed .about a      {

    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnA6YwjY0R6STEvJzYlsB_EzX4DWit-rioOmfAqRFCVbmK6YznkVdjEUgfau_n7IymmFbQi6_iUC9nu5iJBD8QYRpxJ6ESnzw2c6FKrqrj1TxvXfWj6T5Qx0AoGRfDHOO4YoGYIiFnQOk/s1600/id_card.png);

}

ul#navixed .search a      {

    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_h4UYcoB3NBia1kmqApEBuwym7-NngviqB5UcQzNJ8eY4muEuQDb8g3RXzXzK3sHaRbIrPe953OZZOlI453qn3S6PsaNKYvtx1VuBddXHFQ5wlR3PcDdjMkcJoieC6p6i51IELvAQ8Uw/s1600/search.png);

}

ul#navixed .podcasts a      {

    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtDamQNndoe7UuQRs3byhWkbM9P3Np-XSy77M2HTTagvOjKpi7KY-XUWipdfm2jHrNIZLZUSKhLxRclL1eb2soC1dGnnabtOTMShWAC8EIS6lUzS7jGW3xDscCOMULhvSrQz95oJiZTtE/s1600/ipod.png);

}

ul#navixed .rssfeed a   {

    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMBGdnLC3DHECXVQ59VwxQfmYSAEfvjS8IyJ64s1zwT-9p8TFzDqd0duDXS8siK4DUXyOO_Q1oZdET4CDV38jDRXb8DOPLUttrT3ub0o-k5S8CG3-k-NGLeVdOPStm4Zm7_RvsSghE4xY/s1600/rss.png);

}

ul#navixed .photos a     {

    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtZssjueLiZq8VTG3yeAlXeTT_ePsoZUbskyim0UvHNeGbrskK-o_ARufdAtXl3ZSxZatINtydT8SarYPdJ0G30nSRCDu8eFSzIvx7wjwwyOuBMw0t9RnwnSJwg6NECWNJHzbYKO-XUI0/s1600/camera.png);

}

ul#navixed .contact a    {

    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0aDNc5B-XKz_VbHPgQLzg3ju9rMU3B5mwHkyGczMxMHaKk8edYIbnhFChvHkmv9WmDXIOHhyphenhyphenkdP6qnFCvYQpGrvjisq55YGx1lRppMi1FILPEn70GzxiM9jRLfDeVVu86tPsCi5yf03Q/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

Bagikan Artikel ini