Share
Pour tous ceux qui traitent de longues pages Web et qui ont besoin de faire défiler vers le haut pour le menu, voici une alternative intéressante: des menus flottants qui se déplacent lorsque vous faites défiler une page. Ceci est fait en utilisant HTML, CSS et jQuery, et il est entièrement conforme au W3C..
Vous pouvez voir une démonstration de ce tutoriel en cliquant sur le bouton "Démo" ci-dessus. Pour le téléchargement du code source, veuillez noter que la bibliothèque jQuery, le plug-in Dimensions et le code de réinitialisation d'Eric Meyer ne figurent pas dans le fichier ZIP..
Ce tutoriel explique comment créer un "menu flottant" à l'aide de HTML, CSS et jQuery. Pour rappel, un menu flottant reste visible même si vous faites défiler une page Web. Ils sont animés. Ils se déplacent de haut en bas lorsque vous faites défiler la fenêtre du navigateur. Je vais vous montrer comment créer un menu flottant en utilisant jQuery et CSS, et si tout va bien faire de nouveaux disciples de jQuery: D.
Avant de passer aux étapes de codage, jetez un coup d’œil aux deux captures d’écran ci-dessous. La première montre une page Web avec un menu flottant en haut à droite. Bien sûr, vous ne pouvez pas dire qu’elle flotte avant de la voir en direct et de faire défiler la page. Alors regardez le deuxième instantané, et vous pouvez voir que le menu a été déplacé.
Commençons par le balisage HTML d’un bon menu composé de trois sous-menus:
- Accueil
- Table des matières
- Examen
- Wiki
- Support technique
C'est le balisage de base que nous allons utiliser. La partie principale de ce morceau de HTML est la
Par habitude, je désactive le clic sur les liens factices (href = "#"). Juste pour être sûr qu'un clic sur un lien factice n'envoie pas la page en haut, il existe également un onclick = "return false;" dans . Cette méthode permet d’ajouter des fonctionnalités d’éléments de menu, telles que la lightboxing, nécessitant que la page reste à sa position verticale actuelle lorsque l’utilisateur clique sur un lien de menu..
Nous avons maintenant besoin de règles CSS pour habiller et positionner le menu. (J'ai utilisé CSS Reset d'Eric A. Meyer, c'est pourquoi il n'y a pas de marge: 0 ni de remplissage: 0 sur l'élément ul):
corps background-color: # 000; hauteur: 2000px; couleur: #ccc; police: 10px "Lucida Grande", "Lucida Sans", "Trébuchet MS", verdana, sans-serif; #floatMenu position: absolute; en haut: 150 pixels; à gauche: 50%; marge gauche: 235px; largeur: 200px; #floatMenu ul margin-bottom: 20px; #floatMenu ul li a display: block; bordure: solide 1px # 999; couleur de fond: # 222; bordure gauche: solide 6px # 999; texte-décoration: aucun; couleur: #ccc; remplissage: 5px 5px 5px 25px;
La hauteur du corps (ligne 03, ci-dessus) a été définie uniquement pour obtenir suffisamment de place pour que notre menu puisse défiler de haut en bas avec la page. Cela devrait être supprimé dans un scénario réel. Les deux autres éléments à prendre en compte sont la position: absolute (ligne 08) et la gauche: 50% (ligne 10), les deux dans la règle CSS #floatMenu (ligne 07), ci-dessus..
L'attribut "position" est utilisé lorsque vous devez supprimer un élément du flux du document et le conserver à un endroit précis de votre page. Si vous utilisez la fonction de zoom du texte de votre navigateur, un élément avec positionnement absolu ne bougera pas, même si la taille du texte qui l'entoure augmente..
L'attribut "left" est utilisé pour positionner l'élément div spécifique horizontalement. La valeur doit être définie sous forme de pourcentage dans le cas où nous souhaitons une conception centrée. Avec une valeur de 50%, le côté gauche du conteneur est placé au milieu de la page. Pour le positionner à gauche ou à droite, nous devons utiliser l'attribut "margin-left" (Ligne 11), avec une valeur négative pour un décalage à gauche et une valeur positive pour un décalage à droite..
Les autres éléments des règles de la feuille de style ci-dessus personnalisent la conception visuelle..
Nous avons maintenant un menu de trois sections situées dans le coin supérieur droit de la page. Pour améliorer l’effet de survol des éléments de menu, ajoutons les classes de style menu1, menu2 et menu 3 à chaque section du menu (à chaque
…
…
…
Définissons maintenant des effets de survol basés sur le survol CSS, qui seront différents pour chaque section de menu..
#floatMenu ul.menu1 li a: hover border-color: # 09f; #floatMenu ul.menu2 li a: hover border-color: # 9f0; #floatMenu ul.menu3 li a: hover border-color: # f09;
Désormais, chaque section du menu affichera une couleur différente lorsque la souris survolera un élément de menu. Si vous le souhaitez, vous pouvez également ajouter des règles pour d'autres états de lien de menu à l'aide de: lien,: visité,: survol et: pseudo-classes actives. L'ordre dans lequel vous devez les écrire peut être facilement mémorisé comme ceci: LoVe et HAte, où les lettres majuscules représentent la première lettre de chaque état.
Nous avons un joli menu et pourrions nous arrêter ici, mais nous voulons ce menu flottant, il est donc temps d'ajouter un peu de jQuery. Vous devrez télécharger la bibliothèque jQuery et le plugin Dimensions. Ce plugin sera utilisé pour récupérer des informations sur la fenêtre du navigateur (largeur, hauteur, défilement, etc.). Vous pouvez créer un lien vers les deux éléments de code jQuery à partir de votre fichier HTML dans le répertoire.
… section. N'oubliez pas de changer le chemin de l'URL en fonction de l'emplacement où vous placez la bibliothèque jQuery et les fichiers de plug-in sur votre serveur..Nous aurons également besoin de code jQuery personnalisé, alors commencez une nouvelle
Ajoutez le code jQuery suivant dans lee
Accentsconagua