Lors de la création d’un site Web, il est souvent nécessaire de garder à l’esprit le menu horizontal, qui contient la navigation principale du site. La méthode de « fixation » du menu horizontal est pratique du point de vue du visiteur, qui « a toujours la navigation à portée de main », peu importe à quel point vous tournez la molette vers le bas ou vers le haut.

Correction du menu horizontal avec CSS : position:fixed

D'une part, tout est simple et facile à résoudre en utilisant CSS en un rien de temps. Exemple de mise en page HTML d'un menu horizontal fixe :

• maison
• Nouvelles
• Contacts
• Recherche

[contenu de la page] [pied de page du site]

Disposition CSS d'un menu horizontal fixe :

# menu-top-presque-fixe( position : fixe ; haut : 10px ; gauche : 0 ; hauteur : 30px ; largeur : 100% ; marge : 0; )

Maintenant, définissons l'indentation du contenu de la page égale à la hauteur du menu :

#content (marge en haut : 30 px ; )

Et maintenant, nous avons « presque » réussi. Le menu est toujours visible par le visiteur. Mais que devons-nous faire si nous avons un en-tête de site dans notre conception, suivi du menu lui-même, et que dans l'en-tête nous avons un logo, une devise du site et des bannières.

Eh bien, nous pouvons corriger l'en-tête du site en rendant l'indentation du contenu égale en hauteur à l'en-tête et au menu, ainsi qu'à l'indentation entre eux. Mais un problème surgit. Nous limitons considérablement l'espace de visualisation permettant à nos visiteurs de visualiser le contenu de la page. L’option d’abandonner le plafond ne nous convient pas du tout.

Correction d'un menu horizontal en utilisant javascript

Considérons donc l'option où le menu « passe » derrière l'en-tête du site, mais si le visiteur fait défiler activement vers le bas, le menu est « fixé » en haut et reste en place. L'en-tête du site n'est pas visible. Si le visiteur revient sur l'en-tête de la page, le menu « devient » à sa place « derrière l'en-tête du site ». Pour commencer, voici la mise en page HTML complète d’un exemple de mise en page :

Logo du site Web Slogan du site Web Bannière

• maison
• Nouvelles
• Contacts
• Recherche

[contenu de la page] [pied de page du site]

Notre modèle de site Web se compose de plusieurs zones typiques :

• en-têtes de sites – #entête, hauteur 150px
• menu horizontal – #menu-top-presque-fixé– hauteur 30px,
• zone d'information principale de la page – #contenu,
• pied de page du site - #bas de page.

Voici la disposition CSS :

#menu-top-almost-fixed( position : fixe ; marge : 0 ; gauche : 0 ; haut : 150px ; hauteur : 30px ; ) #header( affichage : bloc ; hauteur : 150px ; débordement : caché ; position : relative ; marge -bottom: 55px; ) #menu-top-almost-fixed ul, #menu-top-almost-fixed li (list-style: none; margin: 0; padding: 0; ) #menu-top-almost-fixed ul ( affichage : bloc ; alignement du texte : centre ; largeur : 100 % ; flotteur : gauche ; ) #menu-top-almost-fixed ul li (affichage : en ligne ; hauteur de ligne : 30 px ; largeur : 120 px ; remplissage : 0 5 px ; alignement du texte : centre ; )

Tout d'abord, définissons un retrait de l'en-tête vers le contenu égal à la hauteur de notre menu + un petit retrait avec une marge pour la beauté esthétique. #header ( marge inférieure : 55px; ) . Corrigeons notre menu juste derrière l'en-tête : #menu-top-almost-fixed( position: fixed; margin: 0; left: 0; top: 150px; height: 30px; ) .

Assurons-nous maintenant que lors du défilement, le menu « se fixe » exactement en haut de la page. Mettons le javascript suivant entre et :

Javascript :

var m1 = 150 ; /* hauteur de l'en-tête en pixels */ var m2 = 2; /* indentation lorsque l'en-tête n'est plus visible lors du défilement */ var menuID = "menu-top-almost-fixed"; /* identifiant du menu horizontal à épingler */ var menuOpacityOnChange = "0.7"; /* transparence du menu lors du défilement : 1 - opaque, 0,5 - translucide 0,0 - complètement transparent */ var menuOpacityOnChangeIE = menuOpacityOnChange * 100; /* fonction pour la détermination multi-navigateurs du retrait depuis le haut du document jusqu'à la position actuelle de la molette de défilement */ function getScrollTop() ( var scrOfY = 0; if(typeof(window.pageYOffset) == "number" ) ( //scrOfY conforme à Netscape = window.pageYOffset ; ) else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) ( //scrOfY conforme à DOM = document.body.scrollTop; ) else if(document.documentElement && (document.documentElement. scrollLeft || document.documentElement.scrollTop)) ( //IE6 Strict scrOfY = document.documentElement.scrollTop; ) return scrOfY; ) /* fonction qui définit le remplissage supérieur d'un flottant menu horizontal fixe en fonction de la position du scroller et des en-têtes de visibilité */ function marginMenuTop() ( var top = getScrollTop(); var s = document.getElementById(menuID); if(typeof s != "undefined" && s)( if (top +m2< m1) { s.style.top = (m1-top) + "px"; s.style.filter = s.style.filter.replace("progid:DXImageTransform.Microsoft.Alpha(opacity="+menuOpacityOnChangeIE+")",""); s.style.opacity = "1"; } else { s.style.top = m2 + "px"; s.style.opacity = menuOpacityOnChange; s.style.filter = s.style.filter.replace("progid:DXImageTransform.Microsoft.Alpha(opacity="+menuOpacityOnChangeIE+")",""); s.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+menuOpacityOnChangeIE+")"; } } } /** функция регистрирует вычисление позиции «плавающего» меню при прокрутке страницы **/ function setMenuPosition(){ if(typeof window.addEventListener != "undefined"){ window.addEventListener("scroll", marginMenuTop, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onscroll", marginMenuTop); } marginMenuTop(); } /** регистрируем вызов необходимых функций после загрузки страницы **/ if(typeof window.addEventListener != "undefined"){ window.addEventListener("load", setMenuPosition, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onload", setMenuPosition); }

Vous pouvez voir un exemple de mise en œuvre en suivant ce lien et en utilisant la molette de défilement. Donc, tout est simple ici. Dans les paramètres, nous transmettons les paramètres suivants au script :

• var m1 = 150 ; - hauteur d'en-tête en pixels,
• var m2 = 2 ; - indentation lorsque l'en-tête n'est plus visible lors du défilement,
• var menuID = « menu-top-presque-fixe » ; - identifiant du menu horizontal à épingler,
• var menuOpacityOnChange = « 0,7 » ; - transparence du menu lors du défilement :
  • 1 - opaque
  • 0,5 – translucide
  • 0,0 - complètement transparent

Dans cette version, nous avons un peu « réglé » notre menu, et lors du défilement nous y ajoutons de la translucidité. Une option plus classique s'impose immédiatement, lorsqu'on ne change pas la transparence du menu, mais qu'on fait simplement un fond pour le menu sous la forme d'un fond avec la couleur du menu et une bordure translucide inférieure (dans laquelle le dégradé « passe » en douceur " d'une couleur opaque à une couleur transparente) :

Modifions un peu la disposition CSS pour notre menu fixe horizontal :

#menu-top-almost-fixed (position : fixe ; marge : 0 ; gauche : 0 ; haut : 150 px ; hauteur : 30 px ; arrière-plan : url (./images/white-gradient-l.png) en bas à gauche répéter-x ; )

Donnons maintenant le code javascript modifié, que nous placerons entre et :

Javascript :

var m1 = 150 ; /* hauteur de l'en-tête en pixels */ var m2 = 0; /* indentation lorsque l'en-tête n'est plus visible lors du défilement */ var menuID = "menu-top-almost-fixed"; /* fonction pour la détermination multi-navigateurs du retrait depuis le haut du document jusqu'à la position actuelle de la molette de défilement */ function getScrollTop() ( var scrOfY = 0; if(typeof(window.pageYOffset) == "number" ) ( //scrOfY conforme à Netscape = window.pageYOffset ; ) else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) ( //scrOfY conforme à DOM = document.body.scrollTop; ) else if(document.documentElement && (document.documentElement. scrollLeft || document.documentElement.scrollTop)) ( //IE6 Strict scrOfY = document.documentElement.scrollTop; ) return scrOfY; ) /* fonction qui définit le remplissage supérieur d'un flottant menu horizontal fixe en fonction de la position du scroller et des en-têtes de visibilité */ function marginMenuTop() ( var top = getScrollTop(); var s = document.getElementById(menuID); if(typeof s != "undefined" && s)( if (top +m2< m1) { s.style.top = (m1-top) + "px"; } else { s.style.top = m2 + "px"; } } } /** функция регистрирует вычисление позиции «плавающего» меню при прокрутке страницы **/ function setMenuPosition(){ if(typeof window.addEventListener != "undefined"){ window.addEventListener("scroll", marginMenuTop, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onscroll", marginMenuTop); } } /** регистрируем вызов необходимых функций после загрузки страницы **/ if(typeof window.addEventListener != "undefined"){ window.addEventListener("load", setMenuPosition, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onload", setMenuPosition); }

Donc, tout est simple ici. Dans les paramètres, nous transmettons les paramètres suivants au script :

• var m1 = 150 ; - hauteur d'en-tête en pixels,
• var m2 = 0 ; - indentation lorsque l'en-tête n'est plus visible lors du défilement.

Le menu fonctionne bien, mais si vous rechargez la page, le menu apparaît avec le premier retrait

S'il y a un tel problème, vous devez appeler le menu après avoir chargé la page une fois. Pour ce faire, modifiez le code d'appel de fonction de :

Fonction setMenuPosition())( if(typeof window.addEventListener != "undefined")( window.addEventListener("scroll", marginMenuTop, false); ) else if(typeof window.attachEvent != "undefined")( window. attachEvent ( "onscroll", marginMenuTop); ) );

Au code suivant :

Fonction setMenuPosition())( if(typeof window.addEventListener != "undefined")( window.addEventListener("scroll", marginMenuTop, false); ) else if(typeof window.attachEvent != "undefined")( window. attachEvent ( "onscroll", marginMenuTop); ) marginMenuTop(); );

Après le chargement de la page, nous appelons immédiatement notre fonction marginMenuTop, qui vérifiera la position du menu sur la page et appliquera le style souhaité

Implémentation d'un menu partiellement corrigé à l'aide du plugin Afixx jQuery de Twitter Bootstrap

Dans la continuité de ce sujet, un article a été écrit pour vous sur l'implémentation d'un menu presque fixe à l'aide du plugin jQuery Affix du framework Twitter Bootstrap.

Lesquelles on retrouve de plus en plus souvent sur les pages des blogs et autres ressources. L'utilisation de telles barres de navigation est tout à fait justifiée. L'une des principales raisons de l'utilisation active de ces plugins jQuery est que le menu est toujours à portée de main du visiteur, même s'il se trouve en bas de la page. De plus, un menu fixe prend peu de place et ne détourne pas l'attention du contenu principal. De manière générale, un menu fixe améliore la convivialité du site.
J'ai rassemblé une collection des meilleurs plugins jQuery gratuits, à mon avis, pour implémenter un menu fixe. J'ai essayé de m'assurer que chacun des plugins était unique d'une manière ou d'une autre, afin que n'importe quel plugin de la sélection puisse être utilisé spécifiquement dans votre projet. Dans la collection, vous pouvez trouver des plugins simples et plus complexes avec animation, etc.
Si vous avez besoin d'un menu fixe très simple, quelque chose comme nous avons implémenté un panneau collant avec des boutons sociaux, vous pouvez vous passer des plugins jQuery, car charger la page avec des scripts n'est pas très bon, mais nous en parlerons dans les articles suivants. Abonnez-vous à notre chaîne ou à nos pages pour ne pas manquer de matériel intéressant.
Donc. Voici 6 plugins jQuery pour créer un menu fixe.

Auto-Hide Sticky HeaderjQuery plugin de navigation fixe, qui fonctionne sur un principe similaire à celui du script ci-dessus, mais moins fluide, bien que, à première vue, un peu plus simple. Malheureusement, je ne peux pas dire que la navigation est entièrement adaptative, car sur les petits écrans, les éléments de menu ne deviennent que des chiffres, ce qui est très étrange.

Sur Scroll Header EffectsPlugin jQuery puissant pour barre de navigation fixe. Vous pouvez définir certains segments sur la page lors du défilement, après quoi le panneau se transforme et peut changer complètement son apparence. Il peut y avoir n'importe quel nombre de ces segments sur une page.

On-Scroll Animated Header Un bon plugin pour implémenter une barre de navigation collante. Cela fonctionne comme ceci : au tout début de la page, on voit un en-tête haut contenant le logo et le menu. Lors du défilement, la zone d'en-tête avec tous les éléments, y compris le logo et la navigation, diminue progressivement à l'aide des propriétés et devient une bande étroite collée en haut de l'écran.

Tâche

Définissez la position d'un élément de bloc pour qu'il reste toujours au même endroit lors du défilement de la page.

Solution

Le « gel » d'un élément à un certain endroit d'une page Web se fait en utilisant la propriété de style position avec la valeur fixe . Dans ce cas, la position de l'élément ne change pas même lors du défilement de la page à l'aide du défilement. Les coordonnées elles-mêmes sont spécifiées via les propriétés left , right , top et bottom , qui déterminent respectivement la position à partir des bords gauche, droit, supérieur et inférieur de la fenêtre du navigateur (exemple 1).

Exemple 1 : Utilisation de la position

HTML5 CSS 2.1 IE Cr Op Sa Fx

Menu fixe .menu ( position : fixe ; /* Position fixe */ droite : 10px ; /* Distance depuis le bord droit de la fenêtre du navigateur */ haut : 20 % ; /* Distance supérieure */ remplissage : 10px ; /* Marges autour du texte * / background: #ffe; /* Couleur d'arrière-plan */ border: 1px solid #333; /* Options de bordure */ ) .text (hauteur: 1000px; ) Menu

Le résultat de cet exemple est présenté sur la Fig. 1. Veuillez noter que la position de l'élément ne change pas lorsque vous faites défiler la page.

Récemment, une tendance est devenue à la mode : un menu fixe lors du défilement d'une page. Il s'agit généralement d'un menu horizontal sur les sites de pages de destination.

Comment cela fonctionne, c'est que lorsque la page est chargée, le menu est situé à un certain endroit de la page (par exemple, sous « l'en-tête »), et lorsque vous faites défiler la page, il est fixé en haut de la fenêtre du navigateur et ne défile pas comme les autres contenus.

Si le visiteur fait défiler la page et atteint le début de la page, le menu revient à sa place. Ainsi, le visiteur, se trouvant n'importe où sur la page, peut l'utiliser et accéder à d'autres pages du site. C'est très pratique et conforme aux principes d'utilisabilité.

Je vais maintenant vous expliquer comment mettre en place un tel menu en y consacrant un minimum de temps et sans recourir à l'aide de professionnels.

Tout d'abord, nous devons connecter la bibliothèque jQuery pour le site

< script src= "//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" >

Vous pouvez vous connecter localement ou via Google.

Pour vous connecter localement, vous devez télécharger le fichier jQuery depuis le site officiel http://jquery.com/

CSS

Javascript

Dans le script, on crée 2 variables dans lesquelles on sauvegarde les valeurs de la hauteur de l'en-tête et de l'indentation du bloc avec le menu en haut. Il ne peut y avoir aucune indentation (comme dans ce cas). Ensuite, nous écrivons un gestionnaire pour l'événement onScroll de l'objet window. Dans celui-ci, en utilisant la méthode scrollTop(), nous calculons la distance entre le haut de la page et la position actuelle du scroller. Sur la base du calcul, nous positionnons le bloc avec le menu.

C'est tout, grâce à des solutions simples, vous pouvez obtenir un beau menu fixe qui ne défilera pas lors du défilement de la partie principale du site

Considérons un script qui vous permet d'implémenter un menu fixe pour un site Web. Le concept de développement de ce script inclut un langage de programmation JQuery, car avec lui, vous pouvez non seulement réparer le menu, comme c'est généralement le cas avec la propriété CSS corrigé, mais aussi lors du défilement de la page vers le haut, il sera garanti de conserver l'indentation de l'en-tête, que vous pourrez écrire dans le fichier js. De plus, cette technologie est idéale pour les menus fixes, tant inférieurs que supérieurs.

Après avoir vérifié la compatibilité entre navigateurs du script, il a été constaté qu'il fonctionne parfaitement sur toutes les nouvelles versions, mais le navigateur a des problèmes Internet Explorer antérieur à la version 9, mais il n'y a rien d'étonnant ici, c'est typique des anciens navigateurs.

J'espère que vous utilisez les nouveaux depuis longtemps.

Première partie. Connecter les styles et js des dossiers.

Connectons d'abord tous les styles nécessaires selon la norme et ajoutons des fichiers js, qui sont requis pour ce script. Nous incluons d’abord le fichier de style démo.css.

Ensuite, nous connectons la bibliothèque jquery-latest.min.js et le fichier menu.js, qui sera responsable de la fonctionnalité des retraits et des articulations dans le menu, ainsi que de la position initiale correcte spécifiée en hauteur.

Deuxième partie. Déposer index.php.

Tout est simple ici, on affiche le menu selon la norme via Ulli et faire du shell un élément de bloc div, qui aura un identifiant menu, interagissant pleinement avec les styles et les fichiers menu.js.

Ru/actualités/">Actualités

à propos du projet

La troisième partie. Déposer démo.css.

Passons aux styles de menu fixes et notons les principales propriétés qui devraient être obligatoires ! Tout d'abord, nous nous inscrivons pour l'identifiant menu: fond, position et largeur. Deuxièmement, nous alignons le tout au centre et définissons la hauteur.

#menu ( arrière-plan:#ab4040; largeur:100%; position:fixe; ) #menu ul( marge:0 auto; largeur:750px; hauteur:40px; )

Ensuite, nous travaillons avec chaque élément de menu, ou plutôt avec des liens, et leur attribuons les propriétés suivantes.

Les propriétés de survol individuelles, les cadres, etc. sont uniquement destinés à la beauté et sont considérés comme facultatifs.

#menu ul li ( float:left; list-style:none; width:140px; text-align:center; border-right:1px encart #d0d0d0; height:40px; ) .menuleft( border-left:1px encart #d0d0d0 ; ) #menu ul li a ( line-height:40px; text-decoration:none; color:#ffffff; ) #menu ul li:hover( box-shadow:0 1px 0 #ab4040; background:#f43e3e; )

Quatrième partie. Déposer menu.js.

Nous avons maintenant la partie la plus intéressante. Nous fixerons notre menu au niveau où nous en avons besoin. Écrivons la variable hauteur_menu, dans lequel nous stockerons la hauteur de l'en-tête de notre site. Cela vous permettra de fixer avec précision le menu à la distance requise de l'en-tête du site lors du défilement de la page. En variable élément, nous stockons les propriétés d'identification menus et définir la propriété haut, indiquant que le menu sera en haut, et en comparant avec la variable menu_top, calculez la distance requise entre l'en-tête et le menu.