Navigation dans menu html

Bonjour, j’ai réalisé un design à partir d’un tutoriel dans lequel une navigation par un menu dont le code est en html est possible:

Voici le code du menu:

<LINK href="menu/menu.css" rel="stylesheet" type="text/css">
<ul class="menu">
	<a onClick="planHeader_id=2; displayPlan();"><li class="menu"><div class="sub"><img src="menu/img/roller.png" height=50px width=50px></div></li></a>
  	<a onClick="planHeader_id=10; displayPlan();"><li class="menu"><div class="sub"><img src="menu/img/temp.png" height=50px width=50px></div></li></a>
  	<a onClick="planHeader_id=5; displayPlan();"><li class="menu"><div class="sub"><img src="menu/img/car.png" height=50px width=50px></div></li></a>
	<a onClick="planHeader_id=8; displayPlan();"><li class="menu"><div class="sub"><img src="menu/img/outdoor.png" height=50px width=50px></div></li></a>
	<a onClick="planHeader_id=11; displayPlan();"><li class="menu"><div class="sub"><img src="menu/img/cam.png" height=50px width=50px></div></li></a>
	<a onClick="planHeader_id=9; displayPlan();"><li class="menu"><div class="sub"><img src="menu/img/light.png" height=50px width=50px></div></li></a>
	<a onClick="planHeader_id=6; displayPlan();"><li class="menu"><div class="sub"><img src="menu/img/energy.png" height=50px width=50px></div></li></a>
</ul>

Cependant, je n’arrive pas à naviguer à partir de ce menu, il faut que j’attribue l’ID présent dans le code à un autre design ?
De plus, je n’ai trouvé nulle part la fonction javascript « displayPlan() » qui doit être exécutée au clique sur l’icône et forcément envoyer vers la page/design concernée.
Pourrais-je avoir un coup de pouce ?

Bonjour,
Effectivement les « planheader_id » sont les ids de tes designs, créé les tous, même vide, note les ids et complète l’html ensuite tu pourras recopier celui ci dans chaque design.

La fonction displayplan() fait partie du core de jeedom donc elle est déjà présente.

Salut,

Ton menu ressemble beaucoup au menu F$B33.
Pour info, je propose une version améliorée qui permet de paramétrer ces ids dans un fichier de configuration json pour ne plus toucher au code (et risquer des erreurs)

Il permet aussi :

  • d’avoir un seul design pour le menu (plus besoin de le recopier sur chaque design avec modifications).
  • le contenu de chaque design de contenu est indépendant du menu
  • le menu est toujours présent, il n’est pas rechargé à chaque clic sur un bouton du menu

Merci pour le lien du tuto mais je n’arrive même pas à télécharger les png :

Je verrai demain…

Clique dessus ou ouvre-les, ils sont blancs et pas visibles facilement dans l’explorateur mais ils doivent être bien récupérés.

C’est bon, les icônes apparaissent, leur lien respectif est bien renseigné: montheme/images/xxx.png

:`{
« buttons »: [
{
« link »: « 1 »,
« icon »: « montheme/images/icon_home.png »
},
{
« link »: « 5 »,
« icon »: « montheme/images/icon_light.png »
},
{
« link »: « 6 »,
« icon »: « montheme/images/icon_thermometre.png »
},
{
« link »: « 7 »,
« icon »: « montheme/images/icon_alarme.png »
},
{
« link »: « 11 »,
« icon »: « montheme/images/icon_cast.png »
},
{
« link »: « 9 »,
« icon »: « montheme/images/icon_plante.png »
},
{
« link »: « 10 »,
« icon »: « montheme/images/icon_consomation.png »
}
]
}

Par contre, comment naviguer d’un design à l’autre en cliquant sur ces icônes ?
Où se trouvent les designs enregistrés par Jeedom ?`

La question est trop bête ?

Euh non, juste pas connecté hier🙂

Pour les designs, c’est à toi de les créer.
Quand tu passes la souris sur la liste des designs créés (Accueil->Design), tu verras l’id dans l’URL.
Tu positionnes ensuite ces ids dans le fichier json.

Merci beaucoup, c’était tout bête mais fallait le savoir, à plus…

Heu, dernière question, comment fait-on pour que la barre du menu ne fasse que la largeur des icônes nécessaires et non toute la largeur de la page ?
Il faut que je modifie le *.css pour adapter aux nombres d’icônes dont j’ai besoin ?

Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.