How to Create a Slide Out Navigation

Friday, May 4, 2012

How to Create a Slide Out Navigation

    No comments
How to Make Beautiful Slide Out Navigation in Blog - Blog Tips to beautify your blog more and more spread out in cyberspace, examples How To Create Beautiful Slide Out on Blog Navigation. The effect of the slide out navigation is a good use Jquery to make it slide in such things. So make sure you try your decorations to beautify your blog.

The following step-by-step how to create a Slide Out Navigation:
1. Login Blogger
2. Click the Design >> Edit HTML >> look for the code ]]></b:skin>
3. Copy and paste the following script and place it on top of the code ]]></b:skin> was:

/*----------------
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; the
}
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/AVvXsEhcl8LdJX6yzaatR7baFdny8WObQ-oXci2pTQEtF-0CJeIT58DRlQ-E7kWbVtewrNwdve6X9Jq6xkewVb1By4j12skeSe-jdyHfm3VXps_5ax6XnD_Z5UQX-yFg0TNUkNwBIfnbuIAP1x4/s1600/home.png);
}
ul#navixed .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS-bkhlUXf8aBVY51NgaINhYccU8npMabNxrG8WotmmUbPRKY1gNixrD66U0tkUzJJ42pLa4ms96HHUwZG9yYcaX3STMKShCDk6I7LeCnBQY4fs3qCvIoWCGmLW7XBrQlkJU9uaHCKQWM/s1600/id_card.png);
}
ul#navixed .search a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjyu0nn4Rk4hMjvLxjpETBCFnZEwd4-UdBFfpTfhyphenhyphen-WxUSFTRIq8DP_Xks8TOtvKgug4LYwKn7eTjCa8pnidRfmNrMAF66AQuvLsZUCmdpjVI55a65fJKNeS2a-6OsdQHSs27o61qJjW8/s1600/search.png);
}
ul#navixed .podcasts a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNrUPQGfJ_6OzRYdcrrh7v3x7rmLTxR4fgcFksUShFHCloCZbntXb9mnCuB0Rr6H_yysqLbxz1ZOt02IHCXOsSQBSGkwDrbJL-y0p2b8s3RwsU-jV8SL2iRlSfC-3y5J-iqJNWjyGkHIk/s1600/ipod.png);
}
ul#navixed .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvpPkrOoBdorIIH4RiaIcPFM8mZ44SzTnyiqFHHCOB_e7AHK5NNPK3tvfpMkvPzDv8350qOdsVsil-enSYhOomVxsYn8kj_jxCS18eBgPS7nKiiuj_pfkWloYUmgFMuJmtvFQHmlDqqtE/s1600/rss.png);
}
ul#navixed .photos a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHzsil4Jrod7MxEAwFoXQAcEJAHkEQ6UtIv1ocJExU3Q4K6f8uNAszKN7CJD5VaDyCVIbxg7RQWwuDhWL-CK45EwWpM9-GTlyMqFVT6A6xrhvVYuUZgomfIC84SSsszE5wvfc-4z_hdLY/s1600/camera.png);
}
ul#navixed .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAZkMQaGdi9BYB-S_587nBXvLK8_l8T0PaoWCLzSiji_NUHJMni4vYeuFw6KJbm2qDDC03hfBom1GkqnL7aWWVr_rHKwbTRWxegKiaZkuyRrs9OBlrc2iA6ylcU5sIv0_2EkrvMRfNBzc/s1600/mail.png);
}



4. Find the code  </head> and place the following script in top of code </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
    <script src='http://db.tt/Uj7qAt8O'/>
<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>

5. Finally, look for the code </body> and place the following script in top of code </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>
Note: Please replace the # with a navigation menu link on your blog

6. Finished

No comments :

Post a Comment

Subscribe to: Post Comments ( Atom )