Menu déroulant horizontal

Mirabelle · 28/12/2009 04:25:55

Salut,

Je souhaite affiché le menu sous forme de menu déroulant horizontal.

Voici ce que je voudrais faire :

http://www.pohkao.org/
Réalisé par bvffalo73.

J'ai essayé les différentes tentatives présentes sur le forum (module pour ziteplus, modif de style.css) mais je n'y arrive pas.

Si vous avez une idée pour arriver à ce résultat je vous en serez reconnaissant.

davyk · 28/12/2009 14:19:26

salut et bienvenue sur le forum,

c'est du javascript, dans se source on trouve ça:

la plupart des navigateurs permettent d'afficher le code source d'une page web, donnant ainsi le lien permettant de voir sos fichier css.
tu as 2 choix:
1. tu décortiques son css et tu voit ce qui correspond à menu dl et children dd, ce qui te permettra d'apprendre et par là même valorisera ton travail
2. tu lui envoies un petit mail ou mp pour qu'il t'explique un peu tout ça car le sujet a déjà été traité plusieurs fois dans le fofo (tapes "menu déroulant" dans la recherche).

++ vYk

Dernière modification par davyk (28/12/2009 14:22:51)

Mirabelle · 28/12/2009 21:19:41

Salut, merci pour la réponse rapide.

J'ai effectivement les fichiers "style.css" et "js/jquery.js" mais il me manque les fichiers "template.php" et "zite.php".

J'ai essayé pendant plusieurs jours de rédiger ces fichiers mais cela ne fonctionne pas. Pas plus que les réponses aux sujets à propos de la création d'un menu déroulant. J'ai aussi essayé d'autres solutions telle qu'inclure mon (joli) menu déroulant dans la partie du haut et de faire mes liens (non dynamique) mais mon menu ne marche plus dans ce cas ;(.

J'avais aussi envoyé un mail à bvffalo73.

Je recherche les 3 fichiers ("style.css", "zite.php", "template.php" et le script javascript) qui permettent de faire un menu déroulant en haut du site à la place de celui sur le côté.

Je suis pas un crack en javascript (pas un débutant non plus) et ca m'intéresserai bien de comprendre pourquoi je butte sur ce menu horizontal déroulant.

Si vous avez une idée...

ps : Félicitations à Renaud pour avoir conçu ce CMS en utilisant des fichiers .txt ce qui facilite énormément les sauvegardes, les modifications et les migrations

davyk · 28/12/2009 22:02:52

allez, je t'aide pour le js:
http://jquery.com/

et pis pour le css:
http://www.pohkao.org/style.css

++ vYk

davyk · 28/12/2009 22:04:43

le code source dt template version html (et pas php) à adapter:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>POH KAO - Accueil</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<meta name="description" content="Association pour la protection du tigre indochinois" /> 
<meta name="keywords" content="tigre, pohkao, cambodge, association, tiger, protection, sustainable, development, foret" /> 
<link href="style.css" rel="stylesheet" type="text/css" media="screen" /> 
<style type="text/css"> 
body { background-color: #566226; }</style> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
$("#menu dl").children("dd").hide();
$("#menu dl").hover(
   function () { $(this).children("dd").fadeIn("slow"); },
   function () { $(this).children("dd").fadeOut(1000); });
});
</script> 
</head> 
<body> 
<div id="page"> 
 
<div class="ligne2">PROTEGEONS LE TIGRE D'INDOCHINE</div> 
<div id="banner"> 
	<img src="zfiles/17.jpg" title="banner image" height="135" alt="banner image" /> 
</div> 
<div class="ligne2">AVEC LES PEUPLES DES FORETS DE LA PENINSULE INDOCHINOISE</div> 
<div id="ligne1"><marquee scrollamount="2" scrolldelay="10">ARRETONS LE MASSACRE ! IL RESTE MOINS DE 3000 TIGRES SAUVAGES SUR LA PLANETE  --->>---  VOS DONS SONT ESSENTIELS, NOUS COMPTONS SUR VOUS</marquee></div> 
<div id="lside"> 
  <div id="menu"> 
    <dl><dt><a href="/" title="acceuil">Accueil</a></dt></dl><dl><dt><a href="#" title="">L'association</a></dt><dd><ul><li><a href="presentation.html" title="Présentation">Présentation</a></li><li><a href="equipe.html" title="L'équipe">L'équipe</a></li><li><a href="partenaires.html" title="Nos partenaires">Nos partenaires</a></li></ul></dd></dl><dl><dt><a href="#" title="">Etat des lieux</a></dt><dd><ul><li><a href="la-foret.html" title="La forêt">La forêt</a></li><li><a href="les-hommes.html" title="Les hommes">Les hommes</a></li><li><a href="les-tigres.html" title="Les tigres">Les tigres</a></li></ul></dd></dl><dl><dt><a href="#" title="">Projet</a></dt><dd><ul><li><a href="les-actions.html" title="Actions">Actions</a></li><li><a href="les-outils.html" title="Outils">Outils</a></li></ul></dd></dl><dl><dt><a href="#" title="">Les + de POH KAO</a></dt><dd><ul><li><a href="boutique.html" title="La boutique">La boutique</a></li><li><a href="les-liens.html" title="Liens">Liens</a></li><li><a href="a-lire-voir.html" title="A lire, à voir">A lire, à voir</a></li></ul></dd></dl>  </div> 
  <div id="translink"><a href="homepage.html"><img src="deco/en.png" alt="English" title="English" /></a></div><div id="grTitle">Accueil</div> 
<div id="mainContent"> 
<blockquote><p> 
<span class="mCtnYellow">Parce que cet animal emblématique est menacé d'extinction,<br /> 
Parce que les richesses de la forêt diminuent de jour en jour,<br /> 
Parce que les populations isolées de ces régions demandent de l'aide,</span></p></blockquote> 
<p dir="ltr" align="justify"> 
<img style="margin:5px 20px;" src="zfiles/page_accueil_tigre.jpg" alt="tigre" width="160" height="120" align="left" /></p> 
<p><span class="mCtnGreen">En 2006, nous avons décidé de réagir <br />                     en créant "POH KAO, des Tigres et des Hommes"</span></p> 
<p><span class="mCtnYellow">Mais pour  relever  ce défi  nous avons besoin de vous.</span></p> 
<p><span class="mCtnGreen">Rejoignez-nous !</span></p> 
<p><span class="mCtnYellow">Notre campagne 2008 poursuit son action au coeur d'un village des forêts tropicales du Cambodge.</span></p> 
<blockquote> 
<p><span class="mCtnYellow">Seules votre générosité, votre détermination  et votre coopération<br /> 
pourront donner à ces hommes et aux tigres un espoir pour le futur.<br /><br /> 
Avec tous nos remerciements<br /><br /> 
Les Fondatrices<br /> 
Véronique Audibert-Pestel & Claire Marion-Pham </span></p></blockquote> 
<div id="mid" style="background: url(zfiles/col_accueil.jpg) repeat-x;"> 
<div class="midTitle">REPERES</div> 
<div class="midCtnYellow">91% des espèces vivantes de la planète sont concentrées dans les zones déclarées "hot spots" de biodiversité.</div> 
<div class="midCtnYellow"><b>Le "hot spot" Cambodge:</b><br /> 
- 61% de sa superficie est couverte de forêts tropicales<br /> 
- 195 espèces menacées sont présentes dans ce pays dont le rarissime tigre indochinois.<br /> 
- Le braconnage alimente le trafic d'animaux sauvages qui menace la biodiversité rare de ce pays.</div> 
<div class="midCtnYellow"><b>Notre objectif</b>:<br /> 
préserver le tigre et la biodiversité exceptionnelle du Cambodge, enrayer la chasse et l'utilisation des animaux sauvages à travers un développement durable des communautés, et la diffusion des connaissances sur l'environnement et la faune.
</div> 
</div></div> 
</div><!-- lside --> 
<div id="rside"> 
	<div id="stn" align="center"><strong><a href="soutenez-nous.html">SOUTENEZ-NOUS</a></strong></div> <div align="center" style="color: #ee1a07"><strong><br /><br /><font color="#f2f140">ENVOYEZ VOS DONS A</font></strong></div> <div align="center" style="color: #ea8522"><br /><strong>POH KAO<br /><font size="1">des Tigres et des Hommes<br /><br /> 14 rue Hector Guimard<br /> 75019 PARIS</font></strong><br /><br /> <a href="zfiles/formulaire_don.pdf" title="Formulaire de don"><img style="width: 120px; height: 120px" src="zfiles/10.gif" alt="reduction impot" width="120" height="120" /></a> </div><div align="center" style="color: #ea8522"><br /></div><div align="center" style="color: #ea8522"> </div><div align="center" style="color: #ea8522"> </div><div align="center" style="color: #ea8522"> </div><div align="center" style="color: #ea8522"><font color="#f3f241"><a href="zfiles/formulaire_don.pdf" title="Formulaire de don"><font color="#f2f140"><font size="1">Cliquez ici pour imprimer<br /> un formulaire de dons</font> </font></a> <br /></font><br /> </div></div> 
<div id="fl_tiger"><img src="zfiles/11.gif" alt="Tigre" width="237" height="146" /></div> 
<!-- credits --> 
<div id="bot"> 
Réalisé avec<a href="http://zite.prositif.com/"><b> ZITE-CMS </b>0.62b</a> 
 <<a href='index.php?z=login'>Login</a>>
</div> 
</div><!--page--> 
!--google-analytics-->
 
<script type="text/javascript"> 
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write("\<script src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'>\<\/script>" );
</script> 
<script type="text/javascript"> 
var pageTracker = _gat._getTracker("UA-3227291-1");
pageTracker._initData();
pageTracker._trackPageview();
</script> 
</body> 
</html>

davyk · 28/12/2009 22:06:12

amuses-toi bien

Mirabelle · 29/12/2009 01:09:05

Salut !

Le difficulté vient du fichier template.php !

Avec le module xmenu sous ziteplus j'ai :
<ul class="xzul1"><li class="xzli1 xzon xnest">
<a class="xzli1 xzon xnest" href="/testcmsplus/index.php?perma=">Bienvenue</a>
<ul class="xzul2"><li class="xzli2">
<a class="xzli2" href="/testcmsplus/index.php?perma=1151951290">Sous page</a>

Avec zite (classique) j'ai :
<ul class="zul">
<li class="zli1 zon">
<a href="/testcms/">Bienvenue</a></li>
<li class="zli2">
<a href="index.php?z=2">1.1</a>

Sur le site www.pohkao.org :
<dl><dt>
<a href="#" title="">L'association</a></dt><dd>
<ul><li>
<a href="presentation.html?PHPSESSID=afb65ce74347cafeec3b5d4acc296f64" title="Présentation">Présentation</a>

Sur le site mmultimediaservice.free.fr/zite8.3 :
<div class="zli1">
<a href="?perma=bienvenue">Bienvenue</a>
<div class="zsous2">
<a class="zli2" href="?perma=sous_page">Sous page</a>

On voit bien que le "formatage" est différend à chaque fois... et je n'arrive jamais à un résultat proche des sites
mmultimediaservice.free.fr/zite8.3 ou www.pohkao.org

Davyk, j'ai lu que tu avais réalisé mmultimediaservice.free.fr/zite8.3, pourrais-tu poster, s'il te plait, ton fichier "template.php" sur ce forum pour m'aider ?

davyk · 29/12/2009 02:29:40

ce menu déroulant, je l'ai fait "à la main", il ne sera donc pas plus utile que de décortiquer le code de pohkao.
je veux dire que j'ai mis les liens en dur dans le template, je n'ai pas utilisé xmenu, car il n'existait pas encore; il est arrivé 2 semaines après, comme par magie grâce à doekia

mais bon, si tu le veux:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php echo ($zite->rewrite===2?'<base href="'.$zite->rewritebase.'"/>':"") ?>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><?php echo $zite->content['menu_title'].', '.$zite->get_data('site_title') ?></title>
<META NAME="description" CONTENT="<?php echo $zite->content["page_desc"];?>">
<META NAME="keywords" CONTENT="<?php echo $zite->content["page_keyword"];?>">
<link href="<?php echo $zite->config['files_style'] ?>" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
		<LINK href="ie.css" type=text/css rel=stylesheet><![endif]-->
<script type="text/javascript" src="fz/jquery.js"></script>
<script type="text/javascript" src="fz/jquery.shadow.js"></script>
<script type="text/javascript" src="fz/jquery.ifixpng.js"></script>
<script type="text/javascript" src="fz/jquery.fancyzoom.js"></script>
<script type="text/javascript">
			$(function(){
				$('#main > a:first').fancyzoom({Speed:400,showoverlay:false});
				$.fn.fancyzoom.defaultsOptions.imgDir='fz/ressources/'; 
				$('#fz').fancyzoom({Speed:440,showoverlay:true,overlay:4/10});
				$('img.fancyzoom').fancyzoom();
			});
		</script>
		<?php
		$startTime = array_sum(explode(" ",microtime()));

?>
</head>

<body>
	<div id="page">
		<div id="top">

			<h1><?php echo $zite->get_data('site_title') ?></h1>
			<h2><?php echo $zite->get_data('site_subtitle') ?></h2>
		</div>
		<div id="mid">
			<div id="divmenu">
	<div class="menu">
				<div class="zli1">
					<a href="?perma=bienvenue">Bienvenue</a>
					<div class="zsous2">
						<a class="zli2" href="?perma=sous_page">Sous page</a>
						<a class="zli2" href="?perma=a_sous_page">Autre sous page</a>
					</div>
				</div>
				<div class="zli1">
					<a href="?perma=a_propos">¿ propos</a>
					<div class="zsous2">
						<a class="zli2" href="?perma=sous_page2">Sous page</a>
						<a class="zli2" href="?perma=a_sous_page2">Autre sous page</a>
						<a class="zli2" href="?perma=t_sous_page">TroisiËme sous page</a>						
					</div>
				</div>
				<div class="zli1">
					<a href="?perma=outils">Outils</a>
					<div class="zsous2">
						<a class="zli2" href="?perma=album">Album photo</a>
						<a class="zli2" href="?perma=agenda">Agenda</a>
					</div>
				</div>
<div class="zli1">
					<a href="?z=sitemap">Plan du site</a>
					
				</div>
	</div>
</div>
				
			<div id="side">
				<?php echo $zite->content['menu'] ?>
			</div>
			<div id="main">
				<?php echo $zite->content['main'] ?>
<a href="<?php echo $_SERVER['REQUEST_URI'] ?>#">Haut</a>
			</div>
			<div id="break"></div>
		</div>	
<div id="bot">
<br>
Site motorisÈ par <a href="http://www.giausserand.fr/index.php?perma=ziteplus"> <?php echo ZITEVER ?></a>--
<?php
echo "Page gÈnÈrÈe en <b>".round((array_sum(explode(" ",microtime())) - $startTime), 7)*1000000 ."</b> µsec";
?>--
<br>
<?php echo $zite->get_content(copyright, true) ?><br>
<br></div>

</div>
		
 <?php include('zite/module/ga.txt') ?></body>
</html>

tu as tout ce qu'il faut pour faire l'association entre les id et classes générées par xmenu et celles utilisées dans le template (même html) de pohkao
allez courage, tu vas bcp apprendre

Dernière modification par davyk (29/12/2009 02:31:15)

Mirabelle · 29/12/2009 19:20:34

Merci beaucoup davyk, avec ton fichier "template.php" j'arrive au même résultat que sur http://mmultimediaservice.free.fr/zite8.3/

Ce n'est pas dynamique mais ca fonctionne... sous Firefox ! En effet ca marche pas du tout sous Internet Explorer (IE 7 par exemple).

J'ai essayé d'adapter le fichier "style.css" pour que cela fonctionne sous IE mais après plusieurs heures, je n'arrive toujours pas à afficher le menu correctement (il reste en menu vertical complètement décalé en haut à droite). Cela m'aurait fait plaisir de poster mon résultat sur ce forum !

D'autre part avec le module xmenu sous zite plus, je n'arrive pas non plus à afficher un menu déroulant horizontal. Est-ce possible ?

Donc retour case départ :

- j'ai un javascript qui fonctionne (firefox, IE...) avec des <li> et des <ul>
http://css.developpez.com/tutoriels/menu-deroulant/
http://marcarea.com/code/css/menu/menu01test.html

- un site zite qui fonctionne avec des <ul class="zul"> et des <li class="zli1 zon">

- un site zite plus avec des <div class zli1> et des <div class zsous>

Le résultat que je souhaite obtenir (http://www.pohkao.org/) qui fonctionne avec des <dl> et des <dt>

Comment faire pour obtenir le résultat attendu (http://www.pohkao.org/) ?

.

Dernière modification par Mirabelle (29/12/2009 19:24:30)

didoch54000 · 29/12/2009 20:34:10

Bonjour tout les deux,
Message qui n'a pas pour but de t'apporter de l'aide désoler mais simplement pour dire que je suis dans la même galère que toi.
Même après voir lu plein de choses sur le CSS je suis en panic, une aspirine vite !!!!!
Je suis donc ce post avec un grand intérêt.
Bon courage

Mirabelle · 29/12/2009 21:41:39

Salut didoch54000,

J'ai trouvé une solution :

1. tu installes zite (pas encore testé avec ziteplus)
2. tu colles les codes suivants dans le fichier template.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title><?php echo $zite->content['menu_title'].', '.$zite->get_data('site_title') ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="robots" content="all" />
<link rel="shortcut icon" href="/favicon.ico" type="image/ico" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<style type="text/css">
body {
font: 11px verdana, sans-serif;
background: #AFA99B url("fond.jpg") top left no-repeat;
margin: 0;
padding: 0;
}
/* ------------------------------------------------------------------------------------
Tha Drop-down Menu
------------------------------------------------------------------------------------ */
/* Elements de premier niveau
--------------------------------------*/
#menuDeroulant
{
background: #6A6458;
width: 644px;
height: 21px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
position: absolute;
top: 0;
left: 200;
}
#menuDeroulant li
{
float: left;
width: 150px;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
height: 1%;
color: #FFF;
background: #3B4E77;
margin: 0;
padding: 4px 8px;
border-right: 1px solid #fff;
text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }
#menuDeroulant .sousMenu
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant .sousMenu li
{
float: none;
margin: 0;
padding: 0;
border: 0;
width: 149px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
background: transparent url("fondTR.png") repeat;
}
#menuDeroulant .sousMenu li a:hover
{
background-image: none;
background-color: #F2462E;
}
#menuDeroulant li:hover > .sousMenu { display: block; }
</style>
<body>
<ul id="menuDeroulant">
<li>
<a href="#">1</a>
<ul class="sousMenu">
<li><a href="index.php?perma=11">11</a></li>
<li><a href="index.php?perma=12">12</a></li>
<li><a href="index.php?perma=13">13</a></li>
</ul>
</li>
<li>
<a href="#">2</a>
<ul class="sousMenu">
<li><a href="index.php?perma=21">21</a></li>
<li><a href="index.php?perma=22">22</a></li>
<li><a href="index.php?perma=23">23</a></li>
</ul>
</li>
<li>
<a href="#">3</a>
<ul class="sousMenu">
<li><a href="index.php?perma=31">31</a></li>
<li><a href="index.php?perma=32">33</a></li>
<li><a href="index.php?perma=33">34</a></li>
</ul>
</li>
<li>
<a href="#">4</a>
<ul class="sousMenu">
<li><a href="index.php?perma=41">41</a></li>
<li><a href="index.php?perma=42">42</a></li>
<li><a href="index.php?perma=43">43</a></li>
</ul>
</li>
</ul>
<div id="page">
<div id="top">
</div>
<div id="mid">
<div id="side">
<?php echo $zite->get_content(1156957918, true) ?>
</div>
<div id="main">
<?php echo $zite->content['main'] ?>
</div>
<div id="break"></div>
</div>
<div id="bot"><a href="index.php?z=login">login</a>
</div>
</div>

Ce menu déroulant fonctionne sous firefox et internet explorer... Mais ...
1. Il n'est pas dynamique donc : tu fais ton site et après tu fais tes liens "à la main" dans ton fichier "template.php"
2. Je suis arrivé à le décaler de 200 pixels pour qu'il soit aligné sous IE... Mais il ne se décale pas sous Firefox (si vous avez une idée...)

Avez-une solution pour que ce menu soit dynamique (création du menu dès qu'une page est crée) ?

Forum ZitePLUS

#1 28/12/2009 04:25:55

Menu déroulant horizontal

#2 28/12/2009 14:19:26

Re : Menu déroulant horizontal

#3 28/12/2009 21:19:41

Re : Menu déroulant horizontal

#4 28/12/2009 22:02:52

Re : Menu déroulant horizontal

#5 28/12/2009 22:04:43

Re : Menu déroulant horizontal

#6 28/12/2009 22:06:12

Re : Menu déroulant horizontal

#7 29/12/2009 01:09:05

Re : Menu déroulant horizontal

#8 29/12/2009 02:29:40

Re : Menu déroulant horizontal

#9 29/12/2009 19:20:34

Re : Menu déroulant horizontal

#10 29/12/2009 20:34:10

Re : Menu déroulant horizontal

#11 29/12/2009 21:41:39

Re : Menu déroulant horizontal

Pied de page des forums