Comment créer une barre de menu de redimensionnement

Dernièrement, certains sites Web, comme Ceci est la brigade et Tout vous , ont commencé à présenter un menu dynamique et animé qui redimensionne le défilement vers le bas. Minimiser la navigation principale pour laisser plus d'espace au contenu. Dans ce tutoriel, j'expliquerai comment vous pouvez créer ce menu vous-même avec HTML5, CSS3 et juste un peu de jQuery.

Ce type de menu est idéal si vous souhaitez accorder une attention particulière à votre contenu sur l'ensemble du site Web et vous permet également de créer une navigation plus importante et plus efficace lors de la première visite d'un utilisateur sur un site Web. Vous pouvez mieux montrer la marque ou le logo de votre site Web, idéal pour la vue ci-dessus; et après avoir invité l'utilisateur à une visite, une version réduite et réduite dissimule subtilement l'utilisateur afin de lui permettre de se concentrer principalement sur votre contenu.

Il y a plusieurs façons de le faire. Dans ce tutoriel, j'expliquerai comment créer une barre de menus fixe pleine largeur, qui redimensionne en hauteur avec le logo, en créant une version réduite simple de la première. Si vous préférez, vous pouvez également remplacer l’image du logo par une autre variante de votre logo, telle que les initiales ou une icône, mais gardez à l’esprit que la cohérence est très importante pour que l’utilisateur comprenne comment l’élément a changé. est toujours l'original; naviguer sur le site.

Avant de commencer, vous pouvez vérifier la démo ou télécharger la source d'ici .

Créer la structure de base en HTML

Nous allons commencer par créer le code HTML de base dont nous avons besoin. Nous nous en tiendrons à une structure HTML5 très simple pour le point de départ.

 How to create a dynamic top bar | Webdesigner Depot

Maintenant que notre code HTML initial est terminé, nous allons ajouter le code du menu ainsi que d’autres détails sur la tête de notre fichier HTML.

  How to create a resizing menu bar | Webdesigner Depot#">  Des postes
Impressionnants Freebies
  Faisons en sorte que ce menu soit petit! 
  Fin de la ligne.

In our : nous avons ajouté la balise meta pour que l'auteur identifie le créateur du fichier; Après cela, nous avons inclus le fameux reset.css d'Eric Meyer qui réinitialisera presque tous les éléments de votre fichier HTML, vous donnant ainsi un document plus propre et plus facile à utiliser. Et comme nous utiliserons jQuery plus tard, dans la dernière ligne de notre élément head, nous l'importons via le CDN jQuery.

J'ai lié à chaud la plupart des fichiers pour garder le document aussi simple que possible, mais gardez à l'esprit que si vous préférez, vous pouvez télécharger les dernières versions de tous ces fichiers et les utiliser localement le long de votre fichier HTML. changements dans ces fichiers à l'avenir.

Dans notre tag, nous avons utilisé le HTML5 par défaut

élément. Notre

sera pleine largeur et sera responsable des changements entre les grandes et petites versions du menu. Nous donnons notre

une classe nommée "large" afin que nous puissions modifier certaines propriétés spécifiques du CSS pour transformer notre menu en version plus petite. le

est notre conteneur de menu qui contient l’image du logo de notre site Web et un simple menu de liste non ordonné avec trois liens vers notre site Web.

Comme nous n'avons pas vraiment de contenu ici, le

va être utilisé pour étirer la page pour forcer le défilement, afin que nous puissions voir le changement de menu.

Et c'est à ce sujet sur HTML. A partir de maintenant, il suffit de styliser nos éléments avec CSS et de rendre le menu dynamique.

Style du menu et de la page

Pour conserver ce code dans un seul fichier, je créerai le CSS dans le fichier. élément. Donc, tout notre CSS viendra avant notre clôture marque.

Nous finissons ici notre style de base. le

servira de conteneur de menu. Il contiendra notre

element et sera l'élément où l'on définit la couleur d'arrière-plan, la hauteur du menu, les styles de liens de menu et autres. Il s'adaptera à la largeur de l'écran avec la largeur de la propriété: 100% et restera fixe sur les autres éléments du site. Il est important de ne pas oublier de définir le z-index pour s'assurer que cet élément recouvre le reste de la page, ainsi que la position: fixed pour que le div soit fixé en haut, de sorte qu'il reste à la même position pendant que l'utilisateur fait défiler le site Web. Comme vous pouvez le voir, en plus de définir les styles pour l'en-tête, nous définissons également des styles spécifiques pour la classe "large" en utilisant header.large. L'état initial de notre menu sera grand, et nous définissons donc uniquement les styles nécessaires pour le faire apparaître dès que l'utilisateur entre dans la page.

Redimensionnement dynamique du menu

Nous avons notre menu fait et stylisé, mais nous voulons toujours le minimiser. Pour créer cet autre état, nous allons créer une nouvelle classe pour le

dans le CSS nommé "small, ce sera le responsable de la modification des propriétés à modifier. Nous avons déjà défini le plus grand menu, nous devons donc maintenant raccourcir notre menu, réduire la taille de notre image proportionnellement, et la marge que nous utilisons dans notre

les éléments doivent également être réduits afin qu'ils restent centrés verticalement avec la nouvelle hauteur de menu:

/* Sizes for the smaller menu */header.small{ height: 50px; }header.small img{ width: 287px; height: 69px; margin-top: -10px; }header.small li{ margin-top: 17px; }

Donc, comme vous pouvez le voir, ces styles sont presque identiques à ceux du menu plus grand, nous avons simplement changé la classe "large" en "petite" et changé les valeurs que nous utilisions en plus petites. Nous utilisons une marge négative sur l'image pour la centrer dans le conteneur, car l'image a une ombre subtile et est supérieure à la typographie pour l'adapter. Maintenant, nous avons tous les styles nécessaires pour que le menu change de taille et si vous essayez de changer votre code HTML

, vous verrez dans le navigateur que le menu deviendra plus petit. Mais nous avons besoin de cela dynamiquement.

Changer notre classe de menu avec jQuery

Avec tous nos styles en place, il suffit d'ajouter un peu de JavaScript pour faire basculer les classes "grand" et "petit". Puisque nous voulons changer cela en fonction du défilement de l'utilisateur, nous utiliserons la fonction .scrollTop () dans jQuery. Cette fonction permet d'obtenir ou de définir la position du défilement en pixels. La position de défilement est le nombre de pixels qui ont déjà été déplacés hors de la vue du navigateur. Dans ce cas, il suffit de savoir comment l’utilisateur a fait défiler les pixels pour pouvoir déclencher notre code et changer de classe:

Ceci est le JavaScript nécessaire pour détecter quand l'utilisateur a fait défiler. Lorsque l'utilisateur a fait défiler plus de 100 pixels, il va supprimer la classe "large" que nous avons créée et ajouter notre nouvelle classe "small". De cette façon, le menu changera pour les dimensions précédemment définies dans le CSS. Essayez-le, il devrait déjà fonctionner, mais vous trouverez peut-être trop difficile de passer d'un état à l'autre.

`Transitions CSS pour animer le menu`

Pour faciliter le changement de classes dans notre menu, nous allons utiliser des transitions CSS. Utilisez simplement ce morceau de code à côté du reste de votre CSS.

header,nav, a, img, li{transition: all 1s;-moz-transition: all 1s; /* Firefox 4 */-webkit-transition: all 1s; /* Safari and Chrome */-o-transition: all 1s; /* Opera */}

Ici, nous définissons les transitions pour toutes les propriétés CSS pour le

  ,   et   éléments, essentiellement tous les éléments que nous modifions.  Ce code va animer les changements entre les deux classes avec CSS Transitions pendant 1 seconde.  Testez-le maintenant, le résultat devrait être beaucoup plus fluide. 
  C'est ton tour maintenant 
  Maintenant que vous avez vu avec quelle facilité cet effet peut être atteint, allez-y et créez votre propre version d'une barre de menu redimensionnée.  Vous pouvez également être plus créatif que moi et modifier encore plus de propriétés telles que la couleur d'arrière-plan, la couleur du texte et la taille et la position du menu, et même le tester avec différents types de transitions CSS. avec les modifications dans le menu.  Le menu et le logo du site Web sont généralement l'un des éléments les plus identifiables et les plus attendus. En les modifiant radicalement, vous risquez de semer la confusion chez les utilisateurs. Assurez-vous de garder une certaine cohérence entre les deux versions. 
  Avez-vous construit un menu comme celui-ci?  Préférez-vous une technique différente?  Faites le nous savoir dans les commentaires. 
  Image / vignette en vedette,   image d'accordéon  via Shutterstock. 


        
                        tout votre menu 
                        menu redimensionnable 
                        redimensionner sur défilement 
                        c'est le menu de la brigade



    
        
            
            ← Au-delà des blogs: WordPress en tant que plate-forme            
            Quoi de neuf pour les concepteurs, mars 2013 →


                
                                        
    
         Dernier 
         Le meilleur 
    

    
    
        
            
                          
                
                    
                        Sites dynamiques à vitesse statique: l'art de la mise en cache de sites Web
                    
                
            
                          
                
                    
                        Succès du site statique: Jekyll contre le reste du monde
                    
                
            
                          
                
                    
                        Codage par carte perforée: le secret du courrier électronique interactif
                    
                
            
                          
                
                    
                        Disposition Web moderne avec Flexbox
                    
                
            
                    
        
            
                              
                    
                        
                            Comment optimiser votre CSS
                        
                    
                
                              
                    
                        
                            Configuration d'un serveur local pour le développement WordPress
                        
                    
                
                              
                    
                        
                            eBook: solutions et considérations relatives aux navigateurs inter-navigateurs
                        
                    
                
                              
                    
                        
                            Création d'une page d'options de thème WordPress personnalisée