jquery slide out navigation plugin

what is jquery slideout navigation plugin?

slide out plugin is very simple to use in your site, gives you a very beautiful and professional look for your pages, simply it's a horizontal navigation when the visitor put the mouse over the navigation it will slideout, when the user move  mouse out of navigation it will hide again.

i don't love big explanation so let's see small demo of our slide out jquery plugin
See Demo 
Download Source

OK i think you are finished downloading the source files, now i will show you how to use it in your site.

the method to use it in your site is very simple.

1- put this code after the body tag directly:

 <div class="header"></div>
        <ul id="navigation">
            <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>

       
        <script type="text/javascript" src="slideout/jquery-1.3.2.js"></script>
        <script type="text/javascript">
            $(function() {
                var d=300;
                $('#navigation a').each(function(){
                    $(this).stop().animate({
                        'marginTop':'-80px'
                    },d+=150);
                });

                $('#navigation > li').hover(
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-2px'
                    },200);
                },
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-80px'
                    },200);
                }
            );
            });
        </script>

2- put this code between head tags to activate css style:
<link rel="stylesheet" href="slideout/css/style.css" type="text/css" charset="utf-8"/>

3- ok, now the slide out jquery plugin is ready and work correctly in your site
 to change the caption of any nav just change the text between span tags.
to put the link of any page, put it between the cotations after href like href="http://news.php".
example:
say we will change the caption of (about) nav and the link of the same nav.
here is the original code.
<li class="about"><a href=""><span>About</span></a></li>
here is the changed code
<li class="about"><a href="http://www.news.com"><span>news</span></a></li>

you can share this article with your friend. or like our page on facebook
Readyphp