Exemple de menu utilisant du CSS

Un menu est fixe en haut de fenêtre, ainsi qu'un pied de page en bas de fenêtre.
Le style du menu (CSS) est défini dans un fichier séparé. Disponible ici.
Un avantage de définir le style de page dans un fichier externe, est de pouvoir l'utiliser dans plusieurs pages Web différentes.

Je meuble avec du texte, principalement pour que la page fasse plus qu'une fenêtre de hauteur, pour voir que le menu et le pied de page restent en place.

HTML Responsive Web Design
Plus d'information sur le codage Web responsive.
Cela correspond à avoir la même information et le même code HTML, mais le CSS qui s'adapte suivant la largeur de la fenêtre. En particulier, la présentation peut ainsi être différente sur un smartphone que sur un écrant d'ordinateur.

Pour une liste complète de styles, c.f. w3schools.com : CSS Reference
Pour une liste complète des balises HTML, c.f. w3schools.com : HTML Tags Ordered Alphabetically

Certaines personnes utilisent des Gabarits pour designer leurs pages Web.
Une liste d'exemples de Gabarits avec le code CSS correspondant.

D'autres exemples de HTMl, CSS, javascript et autres sous alsacreations.

Un exemple d'utilisation concrète de menu..
Tout le site Web est assez sophistiqué et est "Web responsive", c'est-à-dire qu'il s'adapte à l'écran ou la fenêtre utilisée, par exemple à l'écran d'un smartphone.

Pour plus d'intérêt, il faut que la page soit assez longue, pour pouvoir la faire défiler verticalement.

Voici encore quelques références au javascript.
Cela sera utilisé dans les exemples javascript, pour que le menu soit plus réactif.

Alphabetical JavaScript Reference.
Liste de fonctions et événements javascript, telles que :

alert(str)
abs(x)
cos(a), sin(a), tan(a)
acos(x), asin(y), atan(z), atan2(x, y)
sqrt(x), pour la racine carrée
flor(x), pour la partie entière
round(x), pour l'arrondi
onclick
onmouseover
onmouseout
Il y a plus d'une centaine d'entrée dans ce lien

JavaScript and HTML DOM Reference.
Liste des objets par défaut en javascript et plus :

Document
Window
Screen
Navigator
Location
Event Objects
Event
Attributes
Styles
etc.
Array
Boolean
Date
Error
Global
JSON
Math
Number
Operators
RegExp
Statements
String

The JavaScript this Keyword.
this fait référence à l'objet qui est actuellement utilisé.
C'est comme dans une conversation si on dit : "moi-même".
Si on utilise un événement (tel que "onmouseover") dans une balise, this fait référence à l'objet associé à la balise.

target Event Property.
target fait référence à l'objet qui a déclanché l'événement en cours de traitement.
Si on utilise un événement (tel que "onmouseover") dans une balise, target fait référence à l'objet associé à la balise qui a déclanché l'événement.

Plan du Site : Home bgweb.html exemples.html a2css1110_css_menu.html

Page mise à jour le 28 juillet 2019 par Bernard Gisin
Hébergement par : www.infomaniak.ch