Menu vertical avec icônes CSS. Menu horizontal réactif avec CSS3 pur

Comme vous pouvez le voir, des modèles simples ont été utilisés ici Listes HTML, le tout afin d'afficher toutes les listes qui se trouvent sous les liens pour accéder à l'une ou l'autre catégorie. Le concept est qu'il est agréable d'organiser la liste de navigation en position horizontale, mais lorsqu'elle est mobile, elle deviendra automatiquement une position verticale, comme le montrent les images jointes au matériel.

Ce qui est initialement attribué à chaque demande, où le développeur lui-même peut changer de thème, ou de figures plus adaptées au thème. Le menu lui-même est créé en vert foncé ; cette teinte est simplement choisie, ce qui est rarement vu. Mais tout peut être radicalement changé en passant au style CSS, et là vous pouvez définir le style de conception dont vous avez besoin, et surtout, pour qu'il s'intègre parfaitement dans la base même de la ressource Internet.

1 . C'est ainsi que cela se passe par défaut ou lors de l'entrée sur le portail.

2 . Nous regardons déjà depuis un appareil mobile, mais nous ne l'avons pas encore appelé dans le menu.

3 . Ici, nous avons cliqué et toutes les requêtes demandées ont été affichées.

Commençons l'installation :

section(
largeur : 100 % ;
largeur maximale : 1 198 px ;
marge : 0px automatique ;
affichage:tableau;
position : relative ;
}

En-tête(
largeur : 100 % ;
affichage:tableau;
couleur d'arrière-plan : #175812 ;
marge inférieure : 50 px ;
}

#kamtukagnpos(
flotteur : gauche ;
taille de police : 25 px ;
transformation de texte : majuscule ;
couleur : #fffab2 ;
poids de la police : 600 ;
remplissage : 19,8px 0px ;
}

#kamtukagnpos: survol (
texte-ombre : 0px 0px 6px rgba(255, 250, 250, 0,67) ;
}

Nav(
largeur:automatique;
flotteur : à droite ;
}

Nav ul(
affichage:tableau;
flotteur : à droite ;
}

Navulli(
flotteur : gauche ;
}

Nav ul li:dernier-enfant(
padding-right:0px;
}

Navulli un (
couleur : #e4f2ff ;
taille de police : 19 px ;
rembourrage : 24px 19px ;
affichage : bloc en ligne ;
texte-ombre : 0 1px 0 #2e2f2e ;
}

Nav ul li a:survol (
couleur d'arrière-plan : #143a06 ;
couleur : #fff9c8 ;
transition : tous les 0,7 s facilitent les 0 ;
texte-ombre : 0 1px 0 #282b28 ;
}

Nav ul li a:survoler i (
couleur : #fdf7c9 ;
transition : tous les 0,7 s facilitent les 0 ;
texte-ombre : 0 1px 0 #1c1d1c ;
}

Nav ul li a i (
remplissage à droite : 9 px ;
couleur : #f4faff ;
transition : tous les 0,7 s facilitent les 0 ;
texte-ombre : 0 1px 0 #202120 ;
}

Navigation-menusaita ul(
affichage:tableau;
largeur : 24 px ;
}

Navigation-menusaita ul li(
largeur : 100 % ;
hauteur : 3 px ;
couleur d'arrière-plan :#e9f0f7 ;
marge inférieure : 4 px ;
}

Le menu de navigation contient le lien:last-child(
marge inférieure : 0px ;
}

Entrée, étiquette (
affichage : aucun ;
}

Écran @media uniquement et (largeur maximale : 1440 px) (
section(
largeur maximale : 95 % ;
}
}

Écran @media uniquement et (largeur maximale : 980 px) (
en-tête (
remplissage : 20px 0px ;
}

#kamtukagnpos(
remplissage : 0 px ;
}

Saisir(
position : absolue ;
haut : -9999px ;
gauche : -9999px ;
arrière-plan : aucun ;
}

Entrée:fous(
arrière-plan : aucun ;
}

Étiquette(
flotteur : à droite ;
remplissage : 8px 0px ;
affichage : bloc en ligne ;
curseur:pointeur;
}

Entrée : vérifié ~ nav (
affichage:bloc;
}

Nav(
affichage : aucun ;
position : absolue ;
à droite : 0px ;
haut : 53 px ;
couleur d'arrière-plan : #174810 ;
remplissage : 0 px ;
indice z : 99 ;
}

Nav ul(
largeur:automatique;
}

Navulli(
flotteur : aucun ;
remplissage : 0 px ;
largeur : 100 % ;
affichage:tableau;
}

Navulli un(
couleur : #f7f2f2 ;
taille de police : 15 px ;
remplissage : 10px 20px ;
affichage:bloc;
bordure inférieure : 1px solide rgba (204, 197, 197, 0,1) ;
}

Nav ul li a i(
couleur : #f9f5d5 ;
remplissage à droite : 13px ;
}
}

Écran @media uniquement et (largeur maximale : 480 px) (
section (largeur maximale : 90 % ;)
}

Écran @media uniquement et (largeur maximale : 360 px) (
étiquette (remplissage: 5px 0px;)
#kamtukagnpos (taille de police : 20 px ;)
navigation(haut :47px ;)
}

Il s'agit d'une liste de liens menant vers différentes pages du site. Cela a l'air bien lorsque la liste des liens, au lieu de simples marqueurs, est complétée par des icônes et il n'est pas du tout nécessaire d'utiliser des graphiques ici. Pourquoi créer des requêtes de base de données inutiles ?

Code HTML

Entre les balises liécris le lien un(# stub temporaire) avec deux éléments de bloc à l'intérieur portée. Dans la première travée - tag je avec une classe d'icônes dont le code a été copié du site Police géniale. Dans la seconde portée- le nom du lien, c'est-à-dire le texte.

• 
  
  
  Vélos
  
  


• 
  
  
  Motos
  
  


• 
  
  
  Autobus
  
  


• 
  
  
  Voitures
  
  


• 
  
  
  Hélicoptères
  
  

Après la connexion entre les balises tête police d'icône Police géniale- le menu ressemble à ceci.

Styles CSS

Pour commencer Police Google Nous sélectionnerons une police attrayante prenant en charge le cyrillique si le menu vertical est en russe.

Copiez le code de connexion de la police sélectionnée et collez-le dessus CSS déposer.

@import url("https://fonts.googleapis.com/css?family=Marck+Script");

Dans le sélecteur corpsécrivez le nom de la police sélectionnée et définissez sa taille.

Corps (
marge : 0 ;
remplissage : 0 ;
famille de polices : "Marck Script", sans empattement ;
taille de police : 20 px ;
}

Nous positionnons notre menu par rapport à la fenêtre du navigateur, en reculant du haut de 10 % et de la gauche de 20 %. Bien entendu, ces chiffres sont tirés du plafond, vous aurez les vôtres.

Ul (
position : absolue ;
haut : 10 % ;
gauche : 20 % ;
}

Nous fixons la largeur du menu à 200 pixels.

Largeur : 200 px ;

Nous avons atteint les éléments du menu de la liste. Supprimer les marqueurs des éléments li.

Ulli (
style de liste : aucun ;
}

Nous désignons des cadres en haut et en bas qui séparent les éléments de menu les uns des autres.

Bordure supérieure : 1px solide #131313 ;
bordure inférieure : 1px solide #131313 ;
marge : -1px 0 ;

Il n'y a pas assez de cadres latéraux et de séparateurs entre les icônes et les noms de liens.

Dessinez le bon cadre pour le tag un, qui est un élément en ligne, et vous ne pouvez pas créer de bordure autour d'un élément en ligne. Par conséquent, nous affichons la balise unélément de bloc.

Ulli un (
affichage : bloc ;
}

Vous pouvez maintenant définir le cadre, supprimer le soulignement des liens et spécifier la couleur des liens.

Bordure droite : 1px solide #131313 ;
décoration de texte : aucune ;
couleur : #131313 ;

Le cadre gauche est toujours manquant.

Balises portée- bloquer les éléments qui contiendront du texte, donc portée affichez-le comme un élément de bloc en ligne.

Ulli une travée (
position : relative ;
affichage : bloc en ligne ;
}

Nous avons besoin pour le premier portée, à l'intérieur duquel il y aura une icône, définissez des styles qui diffèrent du second portée. A cet effet, le premier portée désigner par pseudo-classe - span: nième enfant (1) et stylisez-le séparément. Définissez le cadre et la largeur droit et gauche.

Ul li a span:nth-child(1) (
largeur : 30 px ;
bordure gauche : 1px solide #131313 ;
bordure droite : 1px solide #131313 ;
}

Les icônes seront placées au milieu avec des marges de 10 pixels dans toutes les directions.

Alignement du texte : centre ;
remplissage : 10 px ;

Les icônes seront de couleur sombre, d’une taille de 20 pixels, sur fond rouge.

Couleur : #131313 ;
taille de police : 20 px ;
arrière-plan : #f44336 ;

Dans la deuxième pseudo-classe, il vous suffit de définir les champs.

Ul li a span:nth-child(2) (
remplissage : 10 px ;
}

Maintenant menu vertical a pris sa forme définitive. Voir l'intégralité du code et du résultat.

Menu vertical se fait sur la base d’une liste, à puces ou numérotée. Par défaut, tous les éléments de la liste sont disposés verticalement, occupant toute la largeur de l'élément conteneur, qui à son tour occupe toute la largeur de son bloc conteneur.

Les éléments de liste peuvent contenir non seulement des liens, mais également des titres, des icônes et des images. A l'aide du menu vertical, vous pouvez créer des commentaires sur le site, une liste de catégories, etc.

1. Menu vertical avec en-tête

Option de conception simple et élégante. Convient aux catégories de style sur un site Web. Lorsqu'il est survolé, l'élément de liste change la couleur du lien.

2. Menu vertical dans le style « plan du métro »

Une solution intéressante pour concevoir un menu vertical ; il est possible d'ajouter des menus imbriqués. « Ligne de métro » est le bord gauche de la liste, des marqueurs sont générés avant chaque lien.

• Élément de liste
  • Élément de liste imbriquée
  • Élément de liste imbriquée
  • Élément de liste imbriquée
• Élément de liste
• Élément de liste

3. Menu vertical avec effets de survol

L'icône et le remplissage d'arrière-plan qui apparaissent lorsque vous survolez un élément de liste aideront à diversifier la conception des éléments de menu verticaux.

couleur : blanc ; )

4. Menu vertical avec icônes

* (dimensionnement de la boîte : border-box ; marge : 0 ;).widget ( padding : 20px ; border : 5px solid #f1f1f1 ; background : #fff ; border-radius : 5px ; font-family : "Roboto", sans- serif; ) .widget h3 (marge inférieure : 20 px ; alignement du texte : centre ; taille de la police : 24 px ; poids de la police : normal ; couleur : #424949 ; ) .widget ul ( marge : 0 ; remplissage : 0 ; liste -style : aucun ; largeur : 250px ; ) .widget li ( border-bottom : 1px solid #eaeaea ; padding-bottom : 15px ; margin-bottom : 15px ; ) .widget li : dernier-enfant ( border-bottom : aucun ; margin-bottom: 0; padding-bottom: 0; ) .widget a ( text-decoration: none; color: #616a6b; display: inline-block; ) .widget li:before ( font-family: FontAwesome; font-size : 20px; alignement vertical:bas; couleur: #dd3333; marge-droite: 14px; 2):avant (contenu:"\f0d0";) .widget li:nth-child(3):avant (contenu :"\ f0cd";) .widget li:nth-child(4):avant (contenu:" \f028";).widget li:nth-child(5):avant (contenu:"\f03d";)

5. Menu vertical avec images

Cet exemple peut être utilisé pour concevoir des blocs avec de nouveaux produits, des produits similaires, etc. site de boutique en ligne.