Tabbar ou Sidebar Pour mobile exclusivement

Présentation

Menu pour mobile : Tab bar ou side bar

En mode mobile vous avez accès à chaque catégorie par un insert au milieu droit de l'écran

Je vous propose 19 solutions au

 

Tab Bar Vertical

Amli 2 - Gauche

Caractéristiques

  • Menu fixe gauche
  • Affichage en deux temps : Au survol, le libellé du menu; Au clic, sa composition
  • Indonésie

Image cliquable pour voir le menu

menu css pur fixe

Références

Site web

[Créé / modifié] [31-07-2021 / 31-07-2021]

Code Bucks

- Solution mobile, ... quoique !

Caractéristiques

  • Deux possibilités : Un menu avec les seuls icônes ou un menu dans sa forme développée
  • Même rollover parfait dans les deux cas
  • Une petite image, en bas, sur laquelle il faut cliquer. Elle donne accès au profil.
  • CSS, JS, React.js
  • Excellent !
  • Gujarat, Inde

Image cliquable pour voir le menu

menu animé pour mobile en CSS pur

Références

Site web

[Créé / modifié] [12-11-2021 / 12-11-2021]

Cody House 2 - Droite

- Solution mobile

Caractéristiques

  • Menu déroulant par le haut
  • CSS, JavaScript, jQuery, Modernizr.js
  • Icons: Nucleoapp.com

Image cliquable pour voir le menu

Exemple de menu déroulant avec CodyHouse

Références

Site web

[Créé / modifié] [01-11-2018 / 01-11-2018]

Durand Vincent - Gauche

Caractéristiques

  • CSS pur ou quasi
  • Au premier contact, un carré bleu entoure l'icône de la ligne de menu, le schéma devient blanc et un libellé sort par la droite
  • Au second positionnement le carré bleu suit en mode 'gluant'
  • Nantes

Image cliquable pour voir l'exemple

menu en tableau vertical gauche

Références

Site web

[Créé / modifié] [30-10-2021 / 30-10-2021]

Ettrics - Gauche

Caractéristiques

  • CSS, Normalize.css, JS, jQuery
  • Le menu se développe vers le bas après avoir cliqué sur l'icône hamburger
  • Un clic sur un icône de menu provoque un défilement vertical de la 'page'
  • Effet de balancement arrière à l'affichage de la page
  • Ottawa, Canada

Image cliquable pour voir l'exemple

menu hamburger se developpant vers le bas

Références

Site web

Site de l'auteur

[Créé / modifié] [20-11-2021 / 20-11-2021]

Hartzet Alberto - Gauche

Caractéristiques

  • CSS pur, (Normalize.css)
  • Menu CSS de navigation sur une page
  • Les pages et le texte recouvrent l'espace par la droite
  • Rollover sur les icônes
  • Mexico

Image cliquable pour voir l'exemple

menu fixe a gauche avec glissement des pages de la droite

Références

Site web

[Créé / modifié] [20-11-2021 / 20-11-2021]

Iker Aaron - Gauche

Caractéristiques

  • CSS, JS, GSAP, MorphSVGPlugin3.js
  • Il faut la license pour utiliser MorphSVGPlugin3
  • L'icône s'anime à chaque clic
  • Dommage que le libellé ne soit pas caché !
  • Allemagne

Image cliquable pour voir l'exemple

menu en tableau vertical gauche twitter

Références

Site web

[Créé / modifié] [01-11-2021 / 01-11-2021]

 

Tab Bar Horizontal

Brynjulfsen Havard

Caractéristiques

  • CSS pur
  • Au survol l'cône voit sa signification s'afficher sur sa droite
  • Au clic l'affichage demeure
  • Bergen, Norvège

Image cliquable pour voir l'exemple

barre de menu bassereqctive au survol

Références

Site web

[Créé / modifié] [07-11-2021 / 07-11-2021]

Corti Gabriele - Bas

- Devient vertical gauche en dessous de 500px

Caractéristiques

  • CSS, JS
  • Au contact l'icône de la ligne de menu se décale vers la gauche pour laisser la place àau libellé du menu. Il change de couleur, comme le libellé et le fond d'écran
  • La largeur du tableau est trop importante en mode mobile
  • Europe

Image cliquable pour voir l'exemple

barre de menu basse devenant haute sur mobile

Références

Site web

[Créé / modifié] [28-10-2021 / 28-10-2021]

Dakua Sikriti

- Solution mobile

Caractéristiques

  • Menu fixe
  • Mémorisation de l'icône sélectionné par un léger halo de lumière
  • CSS, JS, rien d'autre
  • très subtile
  • Inde

Image cliquable pour voir le menu

menu se deployant a l'horizontal

Références

Site web

[Créé / modifié] [31-10-2021 / 31-10-2021]

Dash Zed

- Solution mobile

Caractéristiques

  • Menu fixe se déployant vers la droite
  • Mémorisation du menu sélectionné
  • CSS; JS; jQuery
  • Material Design
  • Belle proposition

Image cliquable pour voir le menu

menu se deployant a l'horizontal

Références

Site web

[Créé / modifié] [14-01-2021 / 14-01-2021]

De Bruyne Kasper

Caractéristiques

  • CSS, JS
  • Au clic le libellé s'affiche à droite de l'icône qui se déporte à gauche. De plus un fond plus clair se déplace
  • Avec ".link-background { top: 35px; }", tout est centré
  • Bergen, Norvège

Image cliquable pour voir l'exemple

barre de menu basse developpee en CSS et JS

Références

Site web

[Créé / modifié] [07-11-2021 / 07-11-2021]

Gary Simon

- Cette barre peut se placer n'importe où gauche

Caractéristiques

  • CSS, JS, GSAP 3
  • Au contact de l'icône hamburger sort une ligne d'icônes de menu
  • À de chaque contact d'un icône de menu un petit ovale transparent apparaît
  • USA

Image cliquable pour voir l'exemple

barre de manu basse devenant haute sur mobile

Références

Site web

[Créé / modifié] [28-10-2021 / 28-10-2021]

Iker Aaron (2) - Bas

Caractéristiques

  • CSS, JS, GSAP, MorphSVGPlugin3.js
  • Il faut la license pour utiliser MorphSVGPlugin3
  • Cliquer sur l'icône fait se déplacer le curseur qui envoie un jet d'encre pour le remplir
  • Allemagne

Image cliquable pour voir l'exemple

menu en position basse pour mobile

Références

Site web

[Créé / modifié] [01-11-2021 / 01-11-2021]

Pagès Andy

- Solution mobile
- L'affichage peut sortir de l'écran s'il est mal placé

Caractéristiques

  • Menu flottant positionnable
  • Le menu se déploie sur la gauche
  • CSS, JavaScript, jQuery
  • Jolie proposition

Image cliquable pour voir le menu

menu flottant horizontal

Références

Site web

[Créé / modifié] [20-04-2020 / 09-11-2020]

Parag Ryan

- Solution mobile

Caractéristiques

  • Menu fixe
  • Au clic l'icône change de couleur. La page prend, en plus atténué, la même couleur
  • Au clic l'icône central tourne le regard vers l'icône sélectionné
  • CSS, JS, Rien d'autre
  • Tampa, Floride, USA

Image cliquable pour voir le menu

menu fixe en CSS et Javascript et rien d'autre

Références

Site web

Site de l'auteur

[Créé / modifié] [07-11-2021 / 07-11-2021]

Raring Milan

- Solution mobile

Caractéristiques

  • À la sélection de l'icône une bille est projetée sur celui-ci, qui réagit à cette onde de choc
  • CSS, JS, Rien d'autre
  • Original
  • Munster, Allemagne

Image cliquable pour voir le menu

menu fixe en CSS et Javascript et rien d'autre

Références

Site web

[Créé / modifié] [31-10-2021 / 31-10-2021]

Raring Milan (2)

- Solution mobile

Caractéristiques

  • Au clic, l'icône de menu se dédouble vers l'arrière : L'image de devant devient transparente, celle de derrière s'incline
  • CSS pur
  • C'est beau
  • Munster, Allemagne

Image cliquable pour voir le menu

menu fixe pour mobile en CSS pur

Références

Site web

[Créé / modifié] [12-11-2021 / 12-11-2021]

Raring Milan (3)

- Solution mobile

Caractéristiques

  • Au clic, une goutte d'eau colorée tombe dans le menu 'récipient' et le remplit à moitié
  • Une animation simule des vagues à l'intérieur de l'icône et le fait vibrer à réception de la goutte
  • CSS pur
  • Un véritable artiste cet homme là !
  • Munster, Allemagne

Image cliquable pour voir le menu

menu animé pour mobile en CSS pur

Références

Site web

[Créé / modifié] [12-11-2021 / 12-11-2021]