Cerere script pentru un meniu

Rezumarea primului mesaj :

Salut!
Vreau un meniu de link-uri pentru toate paginile. Am făcut niște imagini care arată  cam cum aș vrea să arate.
Momentan am nevoie de 7 link-uri în meniu, însă aș vrea să-mi spuneți cum aș putea adăuga sau șterge.
Butonul "Meniu", care va deschide meniul, să fie verde și semi-transparent. Deschiderea meniului să se facă prin click. Dacă puteți, aș vrea un efect de intrare/ieșire pentru deschiderea/închiderea meniului. După măsurătorile mele, butoanele trebuie să fie de 165 x 32 pentru a nu intra în forum-uri. Butoanele cu link-uri să nu fie 100% solide, să fie undeva pe la 70% opacity. De asemenea, vreau ca și butoanele să fie link, adică atunci când apăs pe buton, și nu pe text, să întru pe acel link.
Culorile pentru butoanele cu link-uri:
Butonul "Meniu": #00FF00
Primul de lângă "Meniu":  #00FFFF
Al doilea: #FE9A2E
Al treilea: #F781BE
Al patrulea: #FE2E64
Al cincilea: #DF01D7
Al șaselea: #86B404
Al șaptelea: #FE2E2E

Unde anume vreti sa adaugat meniu? in pagina html sau undeva pe forum?

Exact unde am spus în primul post, adică pe toate paginile în partea stângă.
Am pus javascript-ul pe "toate paginile"

Scoate tot ce ai adaugat si adauga acest cod in overall_header:

Cod:

  
<ul id="navigation">
            <li class="home"><a href="" title="Home"></a></li>
            <li class="about"><a href="" title="About"></a></li>
            <li class="search"><a href="" title="Search"></a></li>
            <li class="photos"><a href="" title="Photos"></a></li>
            <li class="rssfeed"><a href="" title="Rss Feed"></a></li>
            <li class="podcasts"><a href="" title="Podcasts"></a></li>
            <li class="contact"><a href="" title="Contact"></a></li>
        </ul>
<style>  
ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#navigation li {
    width: 100px;
}
ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;    
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    /*-moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
    */
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation .home a{
    background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/home.png);
}
ul#navigation .about a      {
    background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/id_card.png);
}
ul#navigation .search a      {
    background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/search.png);
}
ul#navigation .podcasts a      {
    background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/ipod.png);
}
ul#navigation .rssfeed a   {
    background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/rss.png);
}
ul#navigation .photos a     {
    background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/camera.png);
}
ul#navigation .contact a    {
    background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/mail.png);
}
</style>
<script>
  
            $(function() {
                $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);
                $('#navigation > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
                    },
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
                    }
                );
            });
</script>

Daca vrei sa il pui in pagina HTML, pe langa codul de mai sus adauga si acest cod(la inceput):

Cod:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Andrei34 a scris:Scoate tot ce ai adaugat si adauga acest cod in overall_header:

Cod:

  
<ul id="navigation">
            <li class="home"><a href="" title="Home"></a></li>
            <li class="about"><a href="" title="About"></a></li>
            <li class="search"><a href="" title="Search"></a></li>
            <li class="photos"><a href="" title="Photos"></a></li>
            <li class="rssfeed"><a href="" title="Rss Feed"></a></li>
            <li class="podcasts"><a href="" title="Podcasts"></a></li>
            <li class="contact"><a href="" title="Contact"></a></li>
        </ul>
<style>  
ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#navigation li {
    width: 100px;
}
ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;    
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    /*-moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
    */
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation .home a{
    background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/home.png);
}
ul#navigation .about a      {
    background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/id_card.png);
}
ul#navigation .search a      {
    background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/search.png);
}
ul#navigation .podcasts a      {
    background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/ipod.png);
}
ul#navigation .rssfeed a   {
    background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/rss.png);
}
ul#navigation .photos a     {
    background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/camera.png);
}
ul#navigation .contact a    {
    background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/mail.png);
}
</style>
<script>
  
            $(function() {
                $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);
                $('#navigation > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
                    },
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
                    }
                );
            });
</script>

Daca vrei sa il pui in pagina HTML, pe langa codul de mai sus adauga si acest cod(la inceput):

Cod:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Mulțumesc, am rezolvat!