Un menu slider pour design Jeedom

Un menu slider pour design Jeedom

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é 113 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é 80 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 :

mode édition

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

ajout texte / html

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

Paramètre d'affichage

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

ajout de l'html et changement de position
  • 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

7 thoughts on “Un menu slider pour design Jeedom

  1. Bonjour,

    Merci de partager tout ça pour les non-initiés comme moi ! Je l’utiliserai pour le Nest Hub.
    J’aimerais adapter ce menu pour un smartphone, c’est à dire que le bandeau se déplie à la verticale et vers le bas, ainsi qu’une modif de la taille des écritures du coup. D’habitude j’aime bien trifouiller, mais en ce moment j’ai besoin d’aller vite, j’ai une maison à rénover à côté. Ca demande bcp de modifications ?
    line 116: vertical par exemple ? + toutes les lines avec un « translate » ?

    1. Bonjour Kalu,
      Merci pour le feedback. Tu trouveras l’alternative que tu demandes dans la mise à jour de l’article.
      Il y a donc maintenant la version verticale et horizontale 🙂

  2. Bonjour
    j’ai mis en place dans mon design, le menu vertical
    j’ai un message d’erreur « token d’accés invalide »
    si dans le html j’enlève l’avant dernière ligne
    script type= »text/javascript » src= »https://code.jquery.com/jquery-1.9.1.js »
    je n’ai plus l’erreur mais les menus sont les uns sur les autre
    cordialement
    Pierre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *