Website "namaak" vraagje

[mr32]

Ik heb op internet iets moois gevonden, zonder flash wat ik graag ook op mijn site wil hebben.
Op deze site is namelijk de menubalk geanimeerd, kan iemand vertellen hoe je zoiets maakt zonder flash?

mr32

 

[city guy]

Hi,
volgens mij kun je dat redelijk goed namaken me javascript en css.

Zoek met de term: animated menubar javascript even op Google en je krijgt een eorme hoeveelheid aangeboden die je daarna zelf kan aanpassen.

 

[csshunter]

Hoi mr32,
Dat onderzoeken we even!
Volgens de broncode wordt op de #menu-div een javascript losgelaten:

<script type="text/javascript">
    $('#menu').spasticNav();
</script>

Dan werpe men spasticNav() in Google.
Via het Google-resultaat zitten we al snel bij de maker Jeffrey Way, die ook een tutorial erover geschreven heeft:

• How to Build a Lava-Lamp Style Navigation Menu

Zo wordt het namaken erg makkelijk gemaakt! - Daar staat ook het javascript-bestandje bij dat gedownload kan worden, en dat je zelf naar smaak kunt aanpassen.
Verder is dus nodig dat je de jquery-javascripts op je pagina hebt staan. Die hoef je niet eens op je site te zetten, maar kunnen gewoon afgetapt worden uit de Google-bibliotheek: http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js en http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js
... dan krijgen ze ook automatisch updates als daar aanleiding voor is.

Succes!
CSShunter

[edit]Ha, kruispost![/edit]

 

[mr32]

Ha, dat is makkelijk! Bedankt! Ik laat het nog wel weten wanneer het op mijn site te vinden is

mr32

 

[mr32]

toch nog even iets: Hoe kan ik die balk kleiner maken, want dat krijg ik niet voor elkaar...

 

[mr32]

Ah, ik heb het al gevonden: Als de padding aanpast in dat css bestand:

#nav li a {
    color: #e3e3e3;
    z-index: 2;
    position: relative;
    cursor: pointer;
    float: left;
    font-size: 20px;
    font-family: helvetica, arial, sans-serif;
    text-decoration: none;
    [B]padding: 10px 45px;[/B]
    width: 100%;

}

Dan maak je hem kleiner