THELIA Forum

Welcome to the THELIA support and discusssion forum

Announcement

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

Offline


Bonjour un petit post après m'être galerée à faire fonctionner un menu avec sous menu en javascript + css : voici ce qui fonctionne chez moi et peut servir à d'autres (mon css est laborieux, mais bon il fonctionne) :

dans menu html :

 <div id="menuGeneral">
<dl id="menu">
          <THELIA_MENU_RUBRIQUES type="RUBRIQUE" parent="0" profondeur="1" classement="manuel">
                <dt onmouseover="javascript:montre('smenu#ID');">
                <a href="#URL">#TITRE</a>
                </dt>
                <dd class="ssmenu" id="smenu#ID">
                    <ul>
                    <THELIA_BLOC_SOUS_MENU type="RUBRIQUE" parent="#ID">
                    <THELIA_SOUS_MENU_RUBRIQUE type="RUBRIQUE" id="#ID" courante="0">
                        <li>
                        <a href="#URL">#TITRE</a>
                        </li>
                    </THELIA_SOUS_MENU_RUBRIQUE>   
                     
                    <THELIA_SOUS_MENU_RUBRIQUE_SELECTION type="RUBRIQUE" id="#ID" courante="1">
                        <li>
                        <a href="#URL" class="selected" >#TITRE</a>
                        </li>
                    </THELIA_SOUS_MENU_RUBRIQUE_SELECTION>
                    </THELIA_BLOC_SOUS_MENU>
                    </ul>
                </dd>
         </THELIA_MENU_RUBRIQUES>

</dl>
</div>

dans meta.html

 <script src='js/jquery.js' type='text/javascript'></script>
<script src='js/jquery-ui-1.8.9.custom.min.js' type='text/javascript'></script>
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
    for (var i = 1; i<=30; i++) {
        if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
    }
if (d) {d.style.display='block';}
}
//-->
</script>

Evidemment il faut aller télécharger "jquery-ui-1.8.9.custom.min.js" et le glisser dans le dossier "js"

Ensuite direct dans styles.css, j'ai rajouté pour mes besoins et avec mes couleurs ceci que vous pouvez amplement modifier (!!!) : 

#menuGeneral
{float: left;
	width:200px;
	padding: 0;
background-color:#d7292b;
	}
	
	#menuGeneral a
{color:#ffffff;
	text-decoration: none;

	}
	
		#menuGeneral a:hover
{color:#3F3F3F;
	text-decoration: none;
	

	}
	
	
	
	
	#menuGeneral dl {
margin: 0;
padding-top: 5px;
padding-left: 0px;
list-style-type: none;
color:#ffffff;
font-size:16px;
	font-weight:bold;
	
}

#menuGeneral dt {
margin: 0;
padding: 5px;
list-style-type: none;
color:#ffffff;
font-size:16px;
	font-weight:bold;

border-bottom: 1px solid #ffffff;
	
}

#menuGeneral dd {
margin: 0;

list-style-type: none;
color:#ffffff;
font-size:16px;
	font-weight:bold;
	
	
	
}

#menuGeneral ul {
margin: 0;
padding: 5px;
list-style-type: none;
color:#ffffff;
font-size:16px;
	font-weight:bold;
	background-color:#bbbdbf;
	
}

#menuGeneral li {
margin: 0;
padding-left: 5px;padding-bottom: 5px;
list-style-type: none;
color:#ffffff;
font-size:16px;
	font-weight:bold;
	background-color:#bbbdbf;
	border-bottom: 1px solid #FFFFFF;
	
}

Voilà, rien de bien nouveau, juste pour trouver une source complète ça a été un peu compliqué entre ce qui fonctionne à moitié, pas du tout ou juste un peu...

Après à vous de modifier le javascript en faisant des recherches idem pour les boucles et le css...

olivia


Les vices entrent dans la composition des vertus, comme les poisons entrent dans la composition des remèdes.
La Rochefoucauld

Offline


Pas mal le display:none en javascript.
{document.getElementById('smenu'+i).style.display='none';}

Ton menu fonctionne donc avec javascript désactivé ? Ton script est en ligne ? Tu veux m'envoyer un lien par MP que j'ai un petit aperçu de ce qu'il donne ? Ça pourrait m'intéresser xD

Merci ^^


Thomas Lartaud
Graphiste Illustrateur Webdesigner freelance
http://www.tom-portfolio.fr

Offline


Réflexion faite, et après avoir vu ton script sur ton site, je comprends pas trop pourquoi tu utilises Javascript alors que tu peux avoir exactement le même rendu en CSS.
En effet, tu n'utilises ni de fonction exécutée via un click ( irréalisable en CSS ), ni de transition Jquery par exemple qui apporterait un plus à l'utilisation du Javascript.

Ton menu déroulant ne déroule donc pas si Javascript est désactivé. Tu pourrais pourtant, juste avec CSS, permettre aux utilisateurs qui n'ont pas Javascript activé, d'avoir le même rendu.
Jettes un oeil par là, ça te donnera une idée du principe à utiliser :
http://forum.thelia.fr/viewtopic.php?id=6365 message n°7

Sinon, si tu veux un menu en accordéon, qui répond au clic, et non au survol de la souris ( le survol peut parfois poser problème quand les sous-menu ont des tailles très différentes. ), et qui marche sans Javascript activé, tu as un bon tuto ici :
http://www.alsacreations.com/tuto/lire/ … Query.html

Last edited by Kouik (24-01-2011 18:16:23)


Thomas Lartaud
Graphiste Illustrateur Webdesigner freelance
http://www.tom-portfolio.fr

Offline

Offline


Je viens de terminer le menu de mon site, basé sur le principe du left:-999em

Si tu veux voir le code et le résultat, pour n'avoir qu'à recopier, demande moi le lien par MP; Je ne le poste pas ici parce que le site n'est pas terminé, et n'est pas encore sur le bon serveur. Je ne veux donc pas le poster ici pour éviter qu'il soit référencé à une mauvaise adresse.

[ sigh ... need to sleep mad ^^ ]


Thomas Lartaud
Graphiste Illustrateur Webdesigner freelance
http://www.tom-portfolio.fr