THELIA Forum

Welcome to the THELIA support and discusssion forum

Announcement

Rejoignez la communauté sur le Discord Thelia : https://discord.gg/YgwpYEE3y3

Offline


Bonsoir à tous,

J'ai cherché sur le forum une solution pour faire un menu déroulant horizontal à partir de la boucle de la page menu.html, mais je n'ai rien trouvé qui m'aide.

Si une bonne âme pouvais me filer un coup de main ce serait super sympa !

merci.

neofarm


Mac OS 10.5 Léopard - Mamp - Thelia versions 1.4.4 - 1.5.1 - 1.5.3.4

Offline


heu je précise que je ne veux pas être renseigné sur le design du menu mais seulement sur la construction du menu déroulant. D' après ce que j'ai compris il me faut utiliser la bibliothèque jsquery, mais je ne sais pas comment faire ni le code ni la boucle pour le menu.

Merci pour votre aide.


Mac OS 10.5 Léopard - Mamp - Thelia versions 1.4.4 - 1.5.1 - 1.5.3.4

Offline


Bon encore un poste sans réponse.


Mac OS 10.5 Léopard - Mamp - Thelia versions 1.4.4 - 1.5.1 - 1.5.3.4

Offline

Offline


J'ai essayé de le faire celui là mais je n'arrive à rien, mais oui ce genre là à part que j'aimerais que le menu se referme quand le curseur n'est plus sur le menu. Il faudrait aussi qu'il soit compatible avec la boucle thelia.

merci pour ta réponse.

Last edited by neofarm (16-12-2009 18:25:24)


Mac OS 10.5 Léopard - Mamp - Thelia versions 1.4.4 - 1.5.1 - 1.5.3.4

Offline


Bonsoir neofarm,

Si ce que j'ai fait pour http://www.paradise-boutik.com ressemble à ce que tu cherches, je veux bien t'aider.

Je précise que ce menu est 100% css et est généré par une boucle Thélia. Pas de javascript ni JQuery.

Si ça peut être utile, je me suis inspiré de:
http://glurt.com/css-horizontal-drop-do … -tutorials
http://www.tjkdesign.com/articles/dropdown/
http://www.htmldog.com/articles/suckerfish/dropdowns/

Tout dépend de ce que tu veux.

Offline


Super c'est ça qu'il me faut, je vais voir tes sources. Si tu veux me filer le code je t'en serais reconnaissante.

Merci NoMoreFailz.

Super ton site, bien fait.


Edit :

J'ai réussis à me débrouiller avec tes infos NoMoreFailz, je t'en remercie. Par contre tu dis qu'il n'y a pas de javascript mais dans l'exemple que j'utilise il est nécessaire d'ajouter quelque ligne de javascript. Si tu as un menu en css intégral je veux bien voir à quoi il ressemble, je veux dire pour les sous menu.
Je  remercie les personnes qui ont tenté de résoudre mon problème.

Last edited by neofarm (16-12-2009 22:37:44)


Mac OS 10.5 Léopard - Mamp - Thelia versions 1.4.4 - 1.5.1 - 1.5.3.4

Offline


neofarm: félicitations wink

Offline


Merci tongue


Mac OS 10.5 Léopard - Mamp - Thelia versions 1.4.4 - 1.5.1 - 1.5.3.4

Offline


Salut,

http://www.py-conseil.com/capeco/capecoFirst/

Ici c'est du full css sans un poil de js.
C'est pas sous thélia mais il suffit d'intégrer dans un boucle et le tour est joué.


Thelia 1.5 - Plugins Homepage et Livre d'or
Le portail de Douarnenez http://www.dz-en-vie.com

Offline


Merci GuinnessBoy, j'ai l'impression qu'il y a bien du javascript pourtant dans le code.


Mac OS 10.5 Léopard - Mamp - Thelia versions 1.4.4 - 1.5.1 - 1.5.3.4

Offline


Bonsoir tous

Ben c'est pas le script css qui m'embête, mais plutot la boucle thélia qui m'interesse wink.png

Offline


@ neofarm

autant pour moi.....
Il y a un bout de js pour l'effet rollover des menus boutons mais celui ci peut être facilement remplacé par une calsse hover et une image de fonds.
Comme pour les sous menus avec la transparence.


Thelia 1.5 - Plugins Homepage et Livre d'or
Le portail de Douarnenez http://www.dz-en-vie.com

Offline


griggione --> je n'ai pas modifier la boucle thelia de base en fait.

GuinnessBoy --> Merci pour tes renseignements.


Mac OS 10.5 Léopard - Mamp - Thelia versions 1.4.4 - 1.5.1 - 1.5.3.4

Offline


RE

OK merci neofarm
Déjà de savoir que la boucle ne bouge pas rasure.

Offline


bonjour,

Il y a quand même un problème avec le site Capecoenergie : le menu ne s'affiche pas correctement sous IE 7, vraisemblablement à cause des problèmes de centrage de blocs sous IE.

JHR

Offline


@jhr  Cette version n'as pas été retenue par le client du coup j'ai plus touché. Sous IE8 pas de soucis. MAis effectivement sous IE7 ça doit merder un peu à cause de la position absolute de certains blocks.

Juste comme ça une question. IE8 c'est juste une impression ou ça le fait ? J'ai  pas noté de gros bugs d'affichage.


Thelia 1.5 - Plugins Homepage et Livre d'or
Le portail de Douarnenez http://www.dz-en-vie.com

Offline


Bonjour GuinnessBoy

Ho non pas du tout, il y a 1 ou 2 amélioration dans le sens du W3C, mais pas plus.
Toujours aussi propriétaire et en dehors de tout.

Les commentaires conditionnels ne sont pas prés de s'arreter.

Offline


Bonjour,

J'ai besoin de votre aide.. le menu horizontal sur le site
http://www.plaisancenauticservices.fr/test ne s'affiche pas sous IE7...

pas de pb? sur firefox.

Y  a t  il une solution ? ou un autre tyoe de menu a mettre en œuvre?
MErci

Offline


Ça ne m'étonnerait pas qu'il soit "caché" sous une div sous IE7.

Peux tu changer un peu la position (le mettre plus haut pour voir où il se cache), car il apparait bien dans la source de ta page, donc c'est qu'il est juste "caché".

Offline


je l'ai remonté à 5px

Merci de ta réponse rapide, il semble caché derrière l image de fond...
mais que faire!!?

Offline


image de fond la claire ?

Ceci dit, il est nécessaire de  revoir le css pour que le menu s'affiche partout pareil. là c'est Une question de jouer avec les balises position, float, etc... de sa div mais aussi de ses div parents.
En général IE7 et firefox ne traitent pas pareil les ul et li.

Je ne peux pas te donner de réponse absolue, car chaque div peut dépendre des autres, donc faut tester.

Offline


Tu n'as peut être pas besoin de ul, et des <a> en ligne suffiraient.

Offline


Merci , apres mains essais, j'ai abandonné, et suis retourné sous un js classique en image.. halte aux abus du css ... ( que je ne maitrise malheureuseument pas!)

Offline


J'ai planché sur des menus horizontaux avec une liste en sous-menu fixe et une déroulée final sur des contenus, maquette visible ici…
J'avais déjà un premier menu horizontal, il me fallait ajouter un second niveau une fois sur la page du premier niveau avec la possibilité de lister des pages de contenu au survol du second niveau.

Tous les menus comprennent des états actifs avec design CSS différents.

Le menu de second niveau n'apparaît que pour les pages ayant des sous-dossiers sinon il disparaît.

Cet exemple est dédié aux contenus (le site n'est pas une boutique) mais ça peut ce modifier pour du produit/rubrique.

Les 3 boucles de menus :

Premier niveau - Placé dans le header du template - fichier entete.html

  <div id="header_menu">
    <ul>
      <li><a href="#URLSOMMAIRE">::accueil::</a></li>
      
      <THELIA_MENU_DOSSIER type="DOSSIER" parent="0" classement="manuel" num="5">
      
        <li><a href="#URL" #FILTRE_egalite(#DOSSIER_ID||#ID||class="selection")#FILTRE_egalite(#DOSSIER_PARENT||#ID||class="selection")>#TITRE</a> 
          
          <!-- <T_BLOC_SOUS_MENU>
                <ul>
                    <THELIA_BLOC_SOUS_MENU type="DOSSIER" parent="#ID" niveau="1">
                    <li><a href="#URL" #FILTRE_egalite(#DOSSIER_ID||#ID||class="selection")>#TITRE</a></li>
                    </THELIA_BLOC_SOUS_MENU>
                </ul>
	    </T_BLOC_SOUS_MENU>
	    <//T_BLOC_SOUS_MENU> --> 
        </li>
      </THELIA_MENU_DOSSIER>
    </ul>
  </div>

Second et troisième niveaux - Toujours dans le header du template - fichier entete.html

  <T_SOUS_MENU>
  <div class="sous_menu">
    <ul>
      <THELIA_SOUS_MENU type="DOSSIER" parent="#DOSSIER_ID" classement="manuel" num="6">
      <li><a href="#URL">#TITRE</a>
      <T_DEROUL_MENU>
        <ul>
      <THELIA_DEROUL_MENU type="CONTENU" dossier="#ID" classement="manuel">
          <li><a href="#URL">#TITRE</a></li>
		</THELIA_DEROUL_MENU>
        </ul>
      </T_DEROUL_MENU>
      <//T_DEROUL_MENU>
      </li>
	</THELIA_SOUS_MENU>
    </ul>
  </div>
  </T_SOUS_MENU>
  <TEST_NIVEAU variable="#DOSSIER_PARENT" test="superieur" valeur="0">
	<div class="sous_menu">
    <ul>
      <THELIA_SOUS_MENU type="DOSSIER" parent="#DOSSIER_PARENT" classement="manuel">
      <li><a href="#URL" #FILTRE_egalite(#DOSSIER_ID||#ID||class="selection1")>#TITRE</a>
      <T_DEROUL_MENU>
        <ul>
      <THELIA_DEROUL_MENU type="CONTENU" dossier="#ID" classement="manuel">
          <li><a href="#URL"#FILTRE_egalite(#CONTENU_ID||#ID||class="selection2")>#TITRE</a></li>
		</THELIA_DEROUL_MENU>
        </ul>
      </T_DEROUL_MENU>
      <//T_DEROUL_MENU>
      </li>
	</THELIA_SOUS_MENU>
    </ul>
  </div>
</TEST_NIVEAU>
<//TEST_NIVEAU>
  <//T_SOUS_MENU>

Le test en alternatif me sert à récupérer le menu lorsque l'on est en navigation de 3e niveau, le menu de second niveau est alors affiché avec l'état actif du dossier parent.

CSS des second et troisième niveaux :

/* sous menus niveaux 2 et 3 */
.sous_menu {
	display: block;
	height: 30px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:0.9em;
	background-color: #FFF;
	position: relative;
	z-index: 50;
}
.sous_menu ul {
	margin:0px;
	padding:0px;
	list-style-type:none;
	text-align:center;
}
.sous_menu li {
	float:left;
	margin-left: 10px;
	margin-right: 5px;
	position: relative;
	padding: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	height: 100%;
}
.sous_menu li a {
	display:block;
	font-weight:bold;
	color:#4a83ce;
	text-decoration:none;
	padding-top: 6px;
	padding-bottom: 6px;
	margin: 0px;
}
.sous_menu li a:hover {
	color: #083f88;
}
.sous_menu .selection1 {
	color: #083f88;
	padding-top: 9px;
	padding-bottom: 2px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #083f88;
}
.sous_menu .selection2 {
	color: #FFF;
	background-color: #083f88;
}
.sous_menu ul li ul {
	display:none;
	position: absolute;
	z-index: 30;
	left: 0px;
	top: 28px;
	background-color: #FFF;
	text-align: left;
	margin: 0px;
	width: 180px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #083f88;
	border-bottom-color: #083f88;
	border-left-color: #083f88;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #083f88;
	padding: 0px;
}
.sous_menu ul li:hover ul {
	display:block;
}
.sous_menu ul li ul li {
	margin: 0px;
	font-size: 0.9em;
	line-height:125%;
	padding: 0px;
	height: 100%;
}
.sous_menu ul li ul li a {
	display: block;
	padding-top: 5px;
	padding-right: 8px;
	padding-bottom: 5px;
	padding-left: 8px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.sous_menu ul li ul li a:hover {
	background-color: #d6dfec;
}
.sous_menu li:hover ul li {
	float:none;
}

A adapter selon vos besoins.

Le menu déroulant est pur CSS mais du coup on perd en accessibilité (display:none), j'ai donc opté pour une reprise des liens en signature du site pour les moteurs qui tombent sur la page d'accueil et les visiteurs.

Marche très bien avec IE7 et 8 mais il faut ajouter dans le head :

<!-- styles alternatifs pour explorer -->
<!--[if !IE]> 
<style type="text/CSS">.sous_menu li ul {position:absolute;}</style>
<![endif]-->

<!--[if IE 8]>
<style type="text/CSS">.sous_menu li ul {position:absolute;}</style>
<![endif]-->

Si ça peut aider… smile

Last edited by momo-fr (19-10-2011 18:13:34)