Dock menu qui s’active au survol de la souris

21/05/2008
WebDev et Design Allez aux commentaires

Woooooooow, il est bien mon titre non ? 😀

Je ne savais pas vraiment comment décrire cette ressource alors voilà.

Le Dock Menu c'est quoi ?

C'est une ressource pour mettre ne place sur votre site / blog un menu transparent qui s'active au survol de votre souris. Le menu étant caché en haut de votre page. Le tout à l'aide d'un bout de CSS et de javascript.

Voici la démo du Dock Menu ...

Installation

1.Télécharger ce fichier (hide_menu.js) et uploadez le.

2. On inclut hide_menu.js entre les balises HTML <head> et </head>

<script src="hide_menu.js" type="text/javascript"></script>

3. Ajouter le code CSS suivant à la fin de votre votre feuille de style

/* this is the CSS for the menu that you will need. */
#menu_holder {
        height: 58px;
        width: 100%;
        display: block;
        position: absolute;
        top: -58px;
}
#nav {
        height: 58px;
        width: 542px;
        margin: 0px auto;
        padding: 0px;
        background-image: url(right.png);
        background-repeat: no-repeat;
        background-position: right;
}
#hit_area {
        height: 120px;
        width: 100%;
        margin: 0px;
        padding: 0px;
        display: block;
        background-image: url(badge.jpg);
        background-repeat: no-repeat;
}
#hit_area2 {
        width: 100%;
        background-image: url(activate_text.jpg);
        background-repeat: no-repeat;
        background-position: center top;
        padding: 0px;
        display: block;
        position: absolute;
        margin: 0px;
        left: 0px;
        top: 120px;
}
#nav ul {
        margin: 0px;
        padding: 0px 0px 0px 21px;
        height: 58px;
        list-style-type: none;
        background-image: url(left.png);
        background-repeat: no-repeat;
}
#nav li{
        margin: 0px;
        padding: 0px;
        float: left;
}
#nav li a:link, #nav li a:active, #nav li a:visited {
        background-image: url(middle.png);
        background-repeat: repeat-x;
        height: 58px;
        width: 100px;
        display: block;
        line-height: 58px;
        font-weight: bold;
        color: #666666;
        text-decoration: none;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
        font-size: 120%;
}
#nav li a:focus, #nav li a:hover{
        text-decoration : none;
        -moz-outline:0;
        color: #FFFFFF;
        background-image: url(rollOver.png);
        background-repeat: repeat-x;
}

4. Et voici à quoi doit ressembler le code HTML du menu, à inclure au début de votre page, juste après la balise<body>.

<div id="hit_area" onmouseover="toggleDown();"></div>
<div id="menu_holder">
        <div id="nav">
                <ul>
                        <li><a href="http://jstween.blogspot.com">jstween</a></li>
                        <li>2210media</li>
                        <li><span class="removed_link" title="http://www.digg.com">Digg</span></li>
                        <li><a href="http://www.cssmania.com">CSS Mania</a></li>
                        <li><a href="http://www.kirupa.com">Kirupa</a></li>
                </ul>
        </div>
</div>
<div id="hit_area2" onmouseover="toggleUp();">
<!-- contenu de la page ici -->
</div>

Mettez le contenu de votre page à l'endroit indiqué.

Liens

-----

Articles relatifs

  • spawnrider

    ça rend plutôt bien félicitations !
    Du bon travail 😉

  • Red@

    excellent Script je vais essayer de le mettre en place …

    Merci 🙂

  • Una

    Bonjour
    merci pour ce menu magnifique, je voudrais savoir comment le place sur le bottom de la page? Si la taille de site fixe, possible avec ce menu d’être au fond de la page ?Merci.