Vous trouverez aujourd’hui dans cet article un menu slider pour design Jeedom, sobre, animé et responsive. Quand il est fermé, il est discret et déplié, le bandeau apparait pour avoir une navigation facilitée. Vous trouverez ce menu en 2 versions : horizontal et vertical.

Menu dans sa version horizontale

Comme vous l’avez peut être vu en preview sur ma page facebook, voici rapidement le rendu en vidéo de ce menu.

Je vous recommande d’afficher vos pages avec une iframe pour faciliter l’usage et la maintenabilité. Voici un article qui pourrait vous aider à le mettre en place.

Voici les sources de ce menu, adapté à Jeedom depuis l’original ici : https://codepen.io/raptor5/pen/WxQvgw

Télécharger “Archive Menu Slider Horizontal” Archive-Menu-Horizontal.zip – Téléchargé 405 fois – 3 Ko

Quelques explications pour la personnalisation

Vous trouverez dans les premières lignes du fichier css des paramètres que vous pourrez modifier pour personnaliser le menu.

:root{
  --height:64px; /* Hauteur du bandeau */
  --width:64px; /* Largeur du bouton quand le menu est replié */
  --background_color: #4e4e4e;/* Couleur du fond */
  --color:#fff; /* Couleur du texte */
  --font-size:1.5rem; /* Taille du texte */
}

Vous verrez dans l’archive les mêmes styles de fichier que d’habitude, le fichier html vous permettra de personnaliser la structure de votre menu.

• Les textes sont aussi remplaçables par des icônes et vous pourrez utiliser la librairie Font-awesome.
• J’utilise toujours la police Montserrat pour mon design, si vous souhaitez utiliser la police Arial ou une quelconque autre.

Menu dans sa version verticale

Vous trouverez ci-dessous une alternative en version verticale, toujours responsive et en partie paramètrable (hauteur et largeur n’étant dans cette version que pour l’icône d’ouverture / fermeture)

Télécharger “Archive Menu Slider Vertical” Archive-slider-vertical.zip – Téléchargé 340 fois – 3 Ko

Comment « installer » ce menu ?

En attendant, il vous faudra le plugin Jeexplorer pour déposer les fichiers css et js dans un dossier à la racine telle que sur la capture d’écran : mytheme/menu_slider/ …

Maintenant rendez vous dans le design en question, il vous faudra passer en mode édition en faisant clic droit au milieu de votre écran :

Puis il vous faudra ajouter un élément Texte / Html toujours grâce au clic droit :

Il vous faudra ensuite faire un nouveau clic droit sur le texte qui est apparu pour afficher les paramètres :

Et dans le champs texte vous pourrez copié/collé le contenu du fichier html :

• Comme potentiellement votre menu viendra au dessus de votre design, il est important d’augmenter la position.
• Il est important de configurer votre design avec la taille de votre écran.
• Je vous recommande soit manuellement soit en modifiant la hauteur et la largeur dans l’écran ci-dessus pour faire en sorte que ca couvre la largeur de votre Design.
• Il vous faudra être vigilant sur les chemins d’accès aux fichiers css et js. Dans mon cas, mytheme/menu_slider/menu.css ou mytheme/menu_slider/menu.js qui remplacera les lignes ci-dessous :

<!-- line 1 -->
<link rel="stylesheet" href="./menu.css">

<!-- line 30 -->
<script  src="./menu.js"></script>

Comment lier ce menu avec vos pages ?

J’ai écris il y a quelques semaines un article qui pourrait vous intéresser si vous vous posez cette question. Pour lier vos pages à ce menu et assurer une navigation fluide, je vous propose 2 options dans cet article. Dans tous les cas, ca se passera dans la balise a, comme ci-dessous :

<!-- remplacer le # par le lien vers votre plan -->
<a href="#" class="menu-link">
    <li>Home</li>
</a>

N’hésitez pas à poser vos questions sur ce menu slider pour design Jeedom ou me faire du feedback en utilisant les commentaires ou ma page facebook.

A bientôt
/F