Comment cela est-il fait? (JavaScript ou autre?)

J'ai trouvé cette page en quelque sorte et j'ai été complètement abasourdi par la barre de navigation. www.webdesignerwall.comComment cela est-il fait? (JavaScript ou autre?)

Lorsque vous placez votre souris sur les options de menu "Accueil", "À propos" ou "Travaux", vous obtenez cet effet de survol génial dans le champ brun ci-dessus. J'aime beaucoup cela et j'ai eu une idée similaire, mais étant un amateur, je ne peux pas vraiment dire quel type de programmation est-ce. Je dirais qu'il utilise Ajax ou JavaScript en soi, mais j'aimerais que certains d'entre vous me l'expliquent, ou partagent même des exemples similaires.

Merci

Source

2010-11-01 Slavisa Perisic

Vous pouvez résoudre ce problème vous-même en regardant le code HTML du site que vous mentionnez – smirkingman

Ceci est fait par CSS. Il place un <span> supplémentaire dans chaque élément de lien <a>. Avec CSS <span> s sont cachés et positionnés correctement au-dessus des éléments de menu (absolute). Lorsque l'un des liens est survolé, le nouveau style s'applique au bon <span> qui le rend visible.

HTML

<ul id="nav"> 
    <li id="nav-home"><a href="/>Home<span></span></a></li> 
    <li id="nav-about"><a href="/about/">About<span></span></a></li> 
    <li id="nav-jobs"><a href="/jobs/">Jobs<span></span></a></li> 
</ul>

CSS

#nav span { 
display: none;  /* hidden by default */ 
position: absolute; 
} 

#nav a:hover span { /* link:hover */ 
display: block;  /* makes one of them visible */ 
} 

#nav-home span { 
background: url(images/home-over.gif) no-repeat; 
width: 168px; /* each has it's own image */ 
height: 29px; /* dimensions */ 
top: -30px;  /* and coordinates */ 
left: 35px; 
} 

#nav-about span { 
background: url(images/about-over.gif) no-repeat; 
width: 157px; 
height: 36px; 
top: -36px; 
left: 90px; 
} 
/* ... */

Source

2010-11-01 14:31:30 galambalazs

@apnerve - Je ne pense pas que cela soit considéré comme des sprites CSS. Les images individuelles sont utilisées dans leurs conteneurs respectifs, qui sont cachés et affichés. – user113716

@apnerve - patrick a raison. Css sprites n'est pas le terme correct ici. – galambalazs

Oups ... désolé. Ils ne sont pas des sprites. – apnerve

Cet effet peut également être accompli avec CSS sans JavaScript:

CSS Image rollovers

Source

2010-11-01 14:30:49

merci, thats quelque chose que je cherchais –

* "Cet effet peut également être accompli avec CSS sans JavaScript" * et c'est ainsi :) – jensgram

@jensgram - Je n'ai pas vraiment regardé leur solut spécifique ion. L'était également en référence à un poste avant le mien qui a été supprimé. Je n'offrais que des possibilités. –

Il est juste CSS.

Chaque lien a un attribut id, et chaque id a sa propre règle CSS qui modifie la background de la barre de navigation sur hover.

Source

2010-11-01 14:31:28

Comment cela est-il fait? (JavaScript ou autre?)

Répondre

Questions connexes