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/AVvXsEiDZvDXEsUELCJySXrYjCSL6djsVpS4Qlj_gZq-RWmMDVzZ_D5HttE0Rc9XNJn5ltZ6Tg7Tf5K_sRG7mOxe7dlK6rcWp5ZX4-zsScvmeyYc26z9AarHfnpQkojxZpn8jxGL2RR_HCSBHMc/s1600/home.png);

}

ul#navixed .about a      {

    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfnG9pabOqvC2s5oKk-lq2bWsGtZtZTsOZAZvCPixFER0S4xvLW-ofRx1x-6IUNH1WjuetRNVVEHrKA4DG-wOpTt4lW-xCOowX1m-Iu9HDMaj3DWR6T7z896GE5_DAMzqZDKrU_07-4Ms/s1600/id_card.png);

}

ul#navixed .search a      {

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

}

ul#navixed .podcasts a      {

    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ8ZaVXIVpHrIse78fj9fWsQ449NdJXUTAoJt79j6Irw_FJhQljyJK4taSyeeFJxB4eZgyN24iyF9qGc3xEAOpzqf_pT18H0T-Uq1IVwOrp6t8GzzW1dqEJrV3mA3E6-tVLw_rGiyCLzM/s1600/ipod.png);

}

ul#navixed .rssfeed a   {

    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiaMJvTWfZthzuPCv8PHWVuPhZjWRlVDUNcx6-G-LZbZMvN4nJGBavCjrAb3DhaRo2PVnEuB7M06zhd7jIK1FLIb48krn7T9Sg29Dy_FQtPonaqJnN9OLyIKA7KqpqEYoOgv4be_qCbbs/s1600/rss.png);

}

ul#navixed .photos a     {

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

}

ul#navixed .contact a    {

    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq8J4eJNIm651u5PCsbyblAfD4D5lvFlIQPz66g3KzXFApqZyzgmaoSi-iskwjAbLrf5Nfj9parE1IlXFvAM6n6Pj0JpbFwIWE_iexr_eW33JlSfxUAJxT7612MoES-WvBoyeJ-Htnfjs/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