[Résolu] Probleme menu vertical par KqesaR - page 1

Alors pour le HTML cela va etre dur car j'utilise le CMS Joomla 1.5.22 par obligation je peux te filer le css,un screenshot et je commenterai le css que j'aurai selectionné pour que tu ne perd pas de temps à le déchiffrer :

/*Colonne de gauche contenant le menu*/
#leftcolumn {
	margin:0;
	width:200px;
	float:left;
	padding:0 4px 10px 0;
	text-align:left;
	text-decoration:none;
}
/*CSS pour le module du menu de Joomla*/
div.module_menu ul{
padding-left:0px;
position:relative;
display:block;


}
/*Le contenu du menu*/
.menu li{
	display:block;
	background: #f3f3f3 url(../images/bouton.png) top center no-repeat;
	height:37px;
	text-align:center;
	padding-top: 10px;
	padding-left:0px;
	margin:0px;
	list-style-type:none;
	width:190px;
	margin-bottom:-16px;
	text-decoration:none;
	position:relative;
}

/*Sous-menu du menu*/
.menu li ul{
text-decoration:none;
background-color:#F3F3F3;
background-image:none;
text-decoration:none;
background-color:#F3F3F3;	
padding-left:0px;
margin-bottom:10px;
}

.menu li:active{
 display:block;
 position:relative;
}
.menu li:link ul {
	background: #f3f3f3;
}

.menu li ul li:first-child{
	border-left:1px solid black;
	border-right:1px solid black;
	background: #f3f3f3;
	height:30px;
}
/*Contenu du sous-menu*/
.menu li ul li{
	border-left:1px solid black;
	border-right:1px solid black;
	background:none;
	height:30px;
	width:120px;
	z-index:4;
	background: #f3f3f3;
}

Voici le screen :

http://img848.imageshack.us/i/menuk.jpg/

Merci d'avance

Bien cordialement

Voila le code HTML quand il est plié :

<div id="top">
		<div id="search">
			<form action="index.php" method="post">
	<div class="search">
		<input name="searchword" id="mod_search_searchword" maxlength="20" alt="Recherche" class="inputbox" size="20" value="recherche..." onblur="if(this.value=='') this.value='recherche...';" onfocus="if(this.value=='recherche...') this.value='';" type="text">	</div>
	<input name="task" value="search" type="hidden">
	<input name="option" value="com_search" type="hidden">
	<input name="Itemid" value="1" type="hidden">
</form>	
		</div>
	</div>
		<div id="header">
			<div id="logo">
			</div>	
		</div>
		<!--<div class="pill_m">
			<div id="pillmenu">
				
			</div>
		</div> -->
	<div class="breadcrumb">
		
	</div>
	<div class="center">		
		<div id="wrapper">
			<div id="content">
				<div id="leftcolumn">	
							<div class="module_menu">
			<div>
				<div>
					<div>
											<ul class="menu">
<li id="current" class="active item1"><a href="http://localhost/joomla/"><span>Accueil</span></a></li>
<li class="parent item2"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=3&amp;Itemid=2"><span>Visiter les services</span></a></li>
<li class="parent item14"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=7&amp;Itemid=14"><span>Rendre une visite</span></a></li>
<li class="item17"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=17"><span>Passer un séjour</span></a></li>
<li class="item20"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=7&amp;Itemid=20"><span>Decouvrir l'hopital</span></a></li>
<li class="item21"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=2&amp;Itemid=21"><span>Actualite</span></a></li>
<li class="item22"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=6&amp;Itemid=22"><span>Espace usager</span></a></li>
<li class="item23"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=23"><span>Espace professionel</span></a></li>
<li class="item24"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=7&amp;Itemid=24"><span>Espace étudiant</span></a></li>
<li class="item25"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=25"><span>Marché public</span></a></li>
<li class="parent item26"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=26"><span>Contact</span></a></li>
/ul>					</div>
				</div>
			</div>
		</div>
	
				</div>
				
				<div id="maincolumn">	
				<div class="componentheading">
	monsite.fr</div>
<table class="blog" cellpadding="0" cellspacing="0">
<tbody><tr>
	<td valign="top">
				</td>
</tr>


</tbody></table>
  
							<div id="random_img"><img style="position: absolute; top: 0px; left: 0px; display: block; z-index: 8; opacity: 1; width: 200px; height: 200px;" src="/joomla/images/stories/food/banniere-1.bmp" alt="" height="200" width="200"><img style="position: absolute; top: 0px; left: 0px; display: none; z-index: 7; opacity: 0; width: 200px; height: 200px;" src="/joomla/images/stories/food/bread.jpg" alt="" height="200" width="200"><img style="position: absolute; top: 0px; left: 0px; display: none; z-index: 7; opacity: 0; width: 200px; height: 200px;" src="/joomla/images/stories/food/bun.jpg" alt="" height="200" width="200"><img style="position: absolute; top: 0px; left: 0px; display: none; z-index: 7; opacity: 0; width: 200px; height: 200px;" src="/joomla/images/stories/food/coffee.jpg" alt="" height="200" width="200"><img style="position: absolute; top: 0px; left: 0px; display: none; z-index: 7; opacity: 0; width: 200px; height: 200px;" src="/joomla/images/stories/food/milk.jpg" alt="" height="200" width="200"><img style="position: absolute; top: 0px; left: 0px; display: none; z-index: 7; opacity: 0; width: 200px; height: 200px;" src="/joomla/images/stories/food/site-2.bmp" alt="" height="200" width="200"><img style="position: absolute; top: 0px; left: 0px; display: none; z-index: 7; opacity: 0; width: 200px; height: 200px;" src="/joomla/images/stories/food/site-3.bmp" alt="" height="200" width="200"></div>
							
			</div>		
		</div>
		<div id="lastest_news"><ul class="latestnews">
	<li class="latestnews">
		<a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=8:notre-engagement&amp;catid=6:decouvrir-lhopital&amp;Itemid=4" class="latestnews">
			Notre engagement</a>
	</li>
	<li class="latestnews">
		<a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=7:resultats-des-concours&amp;catid=1:resultat&amp;Itemid=14" class="latestnews">
			Résultats des concours</a>
	</li>
</ul></div>
		<div id="content_bottom"></div>			
	</div>	
	
	</div>
	
	<div id="footer">
		<div id="sgf">
		<a href="#">Accueil</a> | 
		<a href="#">Mentions légales</a> | 
		<a href="#">Plan de site</a> | 
		<a href="#">Comité éditoriale</a> | 
		CH Maubeuge © 2011 Tous droits réservés
		<br><br>
		Centre Hospitalier de Sambre Avesnois - 13, boulevard Pasteur BP 60249 59607 Maubeuge cedex - T : 03 27 69 43 43 - F : 03 27 69 43 00 
		</div>
	</div>

Et le code déplié

<div id="top">
		<div id="search">
			<form action="index.php" method="post">
	<div class="search">
		<input name="searchword" id="mod_search_searchword" maxlength="20" alt="Recherche" class="inputbox" size="20" value="recherche..." onblur="if(this.value=='') this.value='recherche...';" onfocus="if(this.value=='recherche...') this.value='';" type="text">	</div>
	<input name="task" value="search" type="hidden">
	<input name="option" value="com_search" type="hidden">
	<input name="Itemid" value="2" type="hidden">
</form>	
		</div>
	</div>
		<div id="header">
			<div id="logo">
			</div>	
		</div>
		<!--<div class="pill_m">
			<div id="pillmenu">
				
			</div>
		</div> -->
	<div class="breadcrumb">
		
	</div>
	<div class="center">		
		<div id="wrapper">
			<div id="content">
				<div id="leftcolumn">	
							<div class="module_menu">
			<div>
				<div>
					<div>
											<ul class="menu">
<li class="item1"><a href="http://localhost/joomla/"><span>Accueil</span></a></li>
<li id="current" class="parent active item2"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=3&amp;Itemid=2"><span>Visiter les services</span></a>
<ul>
    <li class="item3"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=2&amp;Itemid=3"><span>pole1</span></a></li>
    <li class="item4"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=8&amp;Itemid=4"><span>pole 2</span></a></li>
    <li class="item5"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=7&amp;Itemid=5"><span>pole 3</span></a></li>
    <li class="item6"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=6"><span>pole 4</span></a></li>
    <li class="item7"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=7"><span>pole 5</span></a></li>
    <li class="item8"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=8"><span>Pôle prestataires A</span></a></li>
    <li class="item9"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=9"><span>Pôle prestataires B</span></a></li>
    <li class="item10"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=10"><span>Le CAMSP</span></a></li>
    <li class="item11"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=11"><span>La maison de retraite</span></a></li>
    <li class="item12"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=12"><span>Psychiatrie</span></a></li>
    <li class="item13"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=13"><span>Les consultations</span></a></li>
</ul>
</li>
<li class="parent item14"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=7&amp;Itemid=14"><span>Rendre une visite</span></a></li>
<li class="item17"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=17"><span>Passer un séjour</span></a></li>
<li class="item20"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=7&amp;Itemid=20"><span>Decouvrir l'hopital</span></a></li>
<li class="item21"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=2&amp;Itemid=21"><span>Actualite</span></a></li>
<li class="item22"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=6&amp;Itemid=22"><span>Espace usager</span></a></li>
<li class="item23"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=23"><span>Espace professionel</span></a></li>
<li class="item24"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=7&amp;Itemid=24"><span>Espace étudiant</span></a></li>
<li class="item25"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=25"><span>Marché public</span></a></li><li class="parent item26"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=26"><span>Contact</span></a></li></ul>					</div>
				</div>
			</div>
		</div>
	
				</div>
				
				<div id="maincolumn">	
					<div class="componentheading">
		submenu	</div>
<table class="contentpaneopen">
<tbody><tr>
						<td class="buttonheading" align="right" width="100%">
		<a href="/joomla/index.php?view=article&amp;id=3%3Ales-poles-dactivites&amp;format=pdf&amp;option=com_content&amp;Itemid=2" title="PDF" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;" rel="nofollow"><img src="/joomla/images/M_images/pdf_button.png" alt="PDF"></a>		</td>
		
				<td class="buttonheading" align="right" width="100%">
		<a href="/joomla/index.php?view=article&amp;id=3%3Ales-poles-dactivites&amp;tmpl=component&amp;print=1&amp;layout=default&amp;page=&amp;option=com_content&amp;Itemid=2" title="Imprimer" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;" rel="nofollow"><img src="/joomla/images/M_images/printButton.png" alt="Imprimer"></a>		</td>
		
				<td class="buttonheading" align="right" width="100%">
		<a href="/joomla/index.php?option=com_mailto&amp;tmpl=component&amp;link=aHR0cDovL2xvY2FsaG9zdC9qb29tbGEvaW5kZXgucGhwP29wdGlvbj1jb21fY29udGVudCZ2aWV3PWFydGljbGUmaWQ9MzpsZXMtcG9sZXMtZGFjdGl2aXRlcyZJdGVtaWQ9Mg==" title="Envoyer" onclick="window.open(this.href,'win2','width=400,height=350,menubar=yes,resizable=yes'); return false;"><img src="/joomla/images/M_images/emailButton.png" alt="Envoyer"></a>		</td>
					</tr>
</tbody></table>

<table class="contentpaneopen">



<tbody><tr>
<td valign="top">
<p><strong> </strong></p>
<table align="left" border="0">
<tbody>
<tr>
<td>
<table style="width: 541px; height: 306px; border: 1px solid rgb(29, 125, 194);" align="center" border="1">
<tbody>
<tr>
<td>
<p align="center"><strong><span style="font-family: Verdana;"><span style="font-size: medium; color: rgb(29, 125, 194);"><span style="font-size: large; color: rgb(255, 219, 0);">V</span></span></span><span style="font-size: medium; color: rgb(29, 125, 194); font-family: verdana,geneva;">isiter les services par pôles d'activités<br><br></span></strong></p>
</td>
</tr>
<tr>
<td>
<p align="left"><span style="font-size: x-small;"><span style="font-size: small; font-family: verdana,geneva;"><strong><span style="font-family: Verdana;"><span style="font-size: medium; color: rgb(29, 125, 194);"><span style="font-size: large; color: rgb(255, 219, 0);">P</span></span></span><span style="font-size: medium; color: rgb(29, 125, 194); font-family: verdana,geneva;">ôle 1</span></strong></span></span></p>
<p align="justify"><span style="font-size: x-small;"><span style="font-size: small; font-family: verdana,geneva;">Service  de Cardiologie-USIC, Gastroentérologie, Médecine Interne,  Néphrologie-Hémodialyse, Neurologie (Douleur, Mémoire), Pneumologie</span><br><span style="font-family: Verdana;"> </span><br><span style="font-size: small; color: rgb(29, 125, 194); font-family: verdana,geneva;"><strong><span style="font-size: large; color: rgb(255, 219, 0);">P</span><span style="font-size: medium; color: rgb(29, 125, 194); font-family: verdana,geneva;">ôle 2</span><br></strong></span><br></span><span style="font-size: x-small;"><span style="font-size: small; font-family: verdana,geneva;">Service  d'Anesthésie, Chirurgie Viscérale, Clinique de l'appareil Locomoteur,  "spécialités chirurgicales" (odonto-stomato-ORL), Urologie, Blocs  opératoires</span> <br><br><span style="font-size: small; color: rgb(29, 125, 194); font-family: verdana,geneva;"><strong><span style="font-size: large; color: rgb(255, 219, 0);">P</span><span style="font-size: medium; color: rgb(29, 125, 194); font-family: verdana,geneva;">ôle 3</span><br></strong></span><br></span><span style="font-size: x-small;"><span style="font-size: small; font-family: verdana,geneva;">Service et Département de Gynécologie-Obstétrique, Orthogénie, Pédiatrie, Pédopsychiatrie</span> <br><br><strong><span style="font-size: small; color: rgb(29, 125, 194); font-family: verdana,geneva;"><span style="font-size: large; color: rgb(255, 219, 0);">P</span><span style="font-size: medium; color: rgb(29, 125, 194); font-family: verdana,geneva;">ôle 4</span><br></span><br></strong></span><span style="font-size: small; font-family: verdana,geneva;">Service  de Médecine d'Urgences (SAU-SMUR, Médecine Légale, Médecine  Pénitentiaire), Réanimation, Prélèvements d'organes, Brancardage,  Chambre Mortuaire, Dépôt de Sang.<br><br><span style="font-size: small; color: rgb(29, 125, 194); font-family: verdana,geneva;"><span style="font-size: large; color: rgb(255, 219, 0);"><strong>P</strong></span><span style="font-size: medium; color: rgb(29, 125, 194); font-family: verdana,geneva;"><strong>ôle 5<br><br></strong><span style="font-size: small; font-family: verdana,geneva;"><span style="color: rgb(51, 51, 51);">Service de Psychiatrie 38 - Service de Psychiatrie 39 - Service de Psychiatrie 40 - Unité de Soins pour Anxio-Dépressifs</span></span></span></span><br><br><strong><span style="color: rgb(29, 125, 194);"><span style="font-size: large; color: rgb(255, 219, 0);">P</span><span style="font-size: medium; color: rgb(29, 125, 194); font-family: verdana,geneva;">ôle Prestataires spécialisés A</span><br></span></strong><br></span><span style="font-size: small; font-family: verdana,geneva;">Services  et Département de Médecine au travail, Santé&nbsp; Publique (hygiène,  évaluation, information médicale, qualité, éducation à la santé, réseaux  de santé, addictologie), Diététique, Kinésithérapie, Service social<br><br><br><strong><span style="color: rgb(29, 125, 194);"><span style="font-size: large; color: rgb(255, 219, 0);">P</span><span style="font-size: medium; color: rgb(29, 125, 194); font-family: verdana,geneva;">ôle Prestataires spécialisés B<br></span></span></strong><br></span><span style="font-size: small; font-family: verdana,geneva;">Services de Biologie, Pharmacie-Stérilisation, Imagerie Médicale<br><br><br></span></p>
<p align="justify">&nbsp;</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

</td>
</tr>

</tbody></table>
<span class="article_separator">&nbsp;</span>
  
							<div id="random_img"><img style="position: absolute; top: 0px; left: 0px; display: none; z-index: 7; opacity: 0;" src="/joomla/images/stories/food/banniere-1.bmp" alt="" height="200" width="200"><img style="position: absolute; top: 0px; left: 0px; display: none; z-index: 6; opacity: 0;" src="/joomla/images/stories/food/bread.jpg" alt="" height="200" width="200"><img style="position: absolute; top: 0px; left: 0px; display: none; z-index: 7; opacity: 0; width: 200px; height: 200px;" src="/joomla/images/stories/food/bun.jpg" alt="" height="200" width="200"><img style="position: absolute; top: 0px; left: 0px; display: block; z-index: 8; opacity: 1; width: 200px; height: 200px;" src="/joomla/images/stories/food/coffee.jpg" alt="" height="200" width="200"><img style="position: absolute; top: 0px; left: 0px; display: none; z-index: 3; opacity: 0;" src="/joomla/images/stories/food/milk.jpg" alt="" height="200" width="200"><img style="position: absolute; top: 0px; left: 0px; display: none; z-index: 2; opacity: 0;" src="/joomla/images/stories/food/site-2.bmp" alt="" height="200" width="200"><img style="position: absolute; top: 0px; left: 0px; display: none; z-index: 1; opacity: 0;" src="/joomla/images/stories/food/site-3.bmp" alt="" height="200" width="200"></div>
							
			</div>		
		</div>
		<div id="lastest_news"><ul class="latestnews">
	<li class="latestnews">
		<a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=8:notre-engagement&amp;catid=6:decouvrir-lhopital&amp;Itemid=4" class="latestnews">
			Notre engagement</a>
	</li>
	<li class="latestnews">
		<a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=7:resultats-des-concours&amp;catid=1:resultat&amp;Itemid=14" class="latestnews">
			Résultats des concours</a>
	</li>
</ul></div>
		<div id="content_bottom"></div>			
	</div>	
	
	</div>
	
	<div id="footer">
		<div id="sgf">
		<a href="#">Accueil</a> | 
		<a href="#">Mentions légales</a> | 
		<a href="#">Plan de site</a> | 
		<a href="#">Comité éditoriale</a> | 
		CH Maubeuge © 2011 Tous droits réservés
		<br><br>
		Centre Hospitalier de Sambre Avesnois - 13, boulevard Pasteur BP 60249 59607 Maubeuge cedex - T : 03 27 69 43 43 - F : 03 27 69 43 00 
		</div>
	</div>

KqesaR

21 mars 2011 à 13:12:08

Bonjour tout le monde,

Voila étant en stage pour refaire un site web on me demande d'implémenter un menu vertical dynamique qui se déroule verticalement pour afficher les sous-menus.

Le problème quand le menu se déroule les sous-menus passent par dessus les menus d'en dessous... et je souhaiterais que les menus se décalent vers le bas pour laisser la place aux sous-menus afficher.

Voici le script JS :

var taille_menu;
	var taille_menu_modifie;
	$('.menu li').click(function(){
		taille_menu=$(this).height();
		taille_menu_modifie=taille_menu;
		if($(this).has('ul')){
			$(this > 'ul > li').each(function(){
				taille_menu_modifie+=$(this).height();
			});
		}
		$(this).height(taille_menu_modifie);
		$(this).toggle();
	});

Merci d'avance

Bien Cordialement

MKBB

21 mars 2011 à 15:13:19

Ca semble etre plutot un probleme de CSS que de javascript, car si ton menu se déroule bien, c'est que le js est bon, s'il s'affiche mal, c'est qurement que le css foire.

Colle nous ton css et le html de ton menu (et eventuellement un screenshot si tu peux)

21 mars 2011 à 15:24:26

21 mars 2011 à 15:30:20

D'apres ton screenshot, j'aurais tendance a confirmer que c'est un problème de css, tu as une version en ligne ou tu bosse en local (si en local, installe firebug et essaye de modifier le css directement en live notamment les attribut position et display) ?

21 mars 2011 à 15:34:35

c'est ce que j'ai fait durant les 2 derniers jours de boulot :/

J'ai joue avec les positions:relative et absolute et les display:none et block mais rien a faire les menus principaux ne se décalent pas ,soit les sous menus sont sur les menus ou alors le menu disparait complètement.

Ps:Je vais t'avouer que si j'avais fait le menu à la main je m'en serais peut-être mieux sorti...

21 mars 2011 à 15:41:11

Citation : amph3t

Je vais t'avouer que si j'avais fait le menu à la main je m'en serais peut-être mieux sorti...

C'est toujours comme ça... "Tiens je vais utiliser un script ça me fera gagner du temps", et finalement... combien de fois je suis passé par la !

Bon et sinon pas de version en ligne sur laquelle je puisse jeter un oeil ?

21 mars 2011 à 15:43:18

Si tu parle du fichier css et/ou js il est en local mais si tu veux je peux le mettre sur megaupload et te donner le lien sinon je n'ai que du local car moi meme je n'ai pas acces au ftp

21 mars 2011 à 15:46:08

nan nan en fait c'etait pour voir le truc tourner en ligne pour zieuter en direct...

Parce que sans la structure html exacte c'est un poil complexe

21 mars 2011 à 15:48:18

J'avoue...

Apres j'ai firebug donc si tu veux je peux te copier le contenu HTML généré via firebug avec l'onglet "inspecter l'onglet HTML"

21 mars 2011 à 15:50:12

je veux bien (colle moi le truc pas déplié, et apres déplié)

21 mars 2011 à 16:02:12

21 mars 2011 à 16:17:36

J'ai l'impression (mais c'est bizarre) qu'il se mélange les pinceaux dans ses $(this) et qu'il attribue pas le height correctement.

Essaye de rajouter un overflow:hidden ou overflow:auto dans ton css .menu li (ligne 19 dans le bout de css que tu m'a donné), et dis moi si ça change quelque chose

21 mars 2011 à 16:22:41

alors,

avec le overflow:auto tu as un petit emplacement pour affichier un element de sous-menu et tu as une barre de defilement

avec le overflow:hidden tu as un emplacement vide ou devait se situer le sous sous-menus

Et par hasard mettre une taille a mon .menu li ul ne ferait pas quelquechose?

21 mars 2011 à 16:43:15

Bin normalement, c'est ce qu'est censé faire le script, mais je pense que c'est l'embrouille avec les this qui fait qu'il ne se voit pas attribué de height correctement.

Alors essaye un autre truc, remplace ton bout de script par:

$('.menu li').click(function(){

		$(this).height(200);
		$(this).toggle();
	});

et dis moi si le truc passe au dessus des autres menus et si le sous menu est bien visible
(oublie pas de retirer les overflow dans le css)

22 mars 2011 à 9:36:30

Désolé de la réponse tardive j'avais fini ma journée et chez moi je n'ai pas accés au code source,

Alors le bug reste le même malgres la modification a 200

PS:je viens de regarder le css dans firefug je viens de remarquer que le script n'a aucun effet et j'ai remarqué aussi que le <li> qu'on sélectionne possède l'id "current" donc on pourrais peut-être s'en servir?

Edit:Je viens de remarquer que le js se déroule a moitié correctement car je vois bien la taille se modifier mais l'élément revient de suite a sa taille initiale...

Il faut que je regarde si je ne peux pas modifie cela

22 mars 2011 à 10:21:05

avec la modif a 200 ça passe toujours au dessus c'est ça ?
J'avais bien flairé qu'il y avait un problème de modification de taille par le js, mais qu'il prenne le 200 puis qu'il revienne a normal c'est bizarre.

T'as pas un autre bout de script un peu plus loin qui reset les tailles ?

22 mars 2011 à 10:30:15

Non, a moins que joomla fais des siennes ce qui m'étonnerais pas...

Cependant en définissant dans le css l'ID #current sa semble marcher mais le problème j'arrive pas a le modifier dynamiquement...

J'ai essaye de mettre height:auto dans le fichier css sa marche nikel mais le problème il suffit que le menu en question n'a pas de sous-menu et sa bug donc je voulais modifier le #current directement maintenant que la balise css existe bah non marche pas non plus

Si c'est Joomla qui fou sa merde bah voila quoi...

Edit:La modification marche mais en mode rapide a travers firebug je vois que le height:auto passe mais il s'enleve automatiquement...le pourquoi je ne sais pas encore

22 mars 2011 à 10:47:30

Aaaah mais attends, je suis un gland j'avais meme pas vu.
Tes class sur tes li, ils servent a rien, vu qu'ils sont tous différents, transforme les en id.
tu pourras les utiliser comme tu utilise ton current

22 mars 2011 à 11:08:52

tu n'es pas seul j'en suis presque géné je viens de regarder par pur hasard dans joomla, je vais dans les modules de menu je vois un oblget style de menu avec une liste de choix je regarde je vois affichage sous liste vertical...je teste et sa fait exactement comme je le voulais a part qu'au lieu d'utiliser des puces sa utilise des tableaux....

Les CMS ou comment ne pas se faciliter la tache pour le développeur...

Je vais marquer ce post comme résolu car malheuresement je vais garder ce systeme de tableau pour gain de temps à mon stage,je te remerci strikez d'avoir donner de ton temps pour m'aider

Bien Cordialement

22 mars 2011 à 14:00:26

no problem, l'essentiel c'est que ce soit résolu

Probleme menu vertical

Probleme menu vertical

Supprimer

Modérer

Signaler le message aux modérateurs