Forum ZitePLUS

La communauté des utilisateurs du CMS ZitePLUS

Vous n'êtes pas identifié(e).

#1 29/09/2009 15:51:41

davyk
Membre
Inscription : 09/09/2008
Messages : 819
Site Web

Le menu horizontal

Salut,

Voici le résultat de ma nuit de travail, un menu horizontal en css avec pages de niveau 2 qui s'affiche au survol de la souris sur les liens des pages mères.

http://mmultimediaservice.free.fr/zite8.3/

++ vYk

Dernière modification par davyk (30/09/2009 02:16:46)


Quand Chuck Norris utilise Windows, il ne plante pas.
ChuckNorrisN'aimePasWindows

Hors ligne

#2 29/09/2009 16:23:38

jpg
Administrateurs
Inscription : 19/11/2008
Messages : 2 082
Site Web

Re : Le menu horizontal

Bonjour,

Pas mal !

est-ce normal que le menu "bouge" quand on sélectionne un item ?

ps: le lien ne marche pas, corrige l'url de ton message: il manque un " ici [url="http://mmultimediaservice.free.fr/zite8.3/]a+
jean-paul

Hors ligne

#3 29/09/2009 17:03:51

davyk
Membre
Inscription : 09/09/2008
Messages : 819
Site Web

Re : Le menu horizontal

merci pour le lien c'est corrigé!
oui le menu bouge et c'est voulu, on peut bien entendu ne pas le faire bouger wink

puisque t'es là jean-paul wink , j'ai dû faire ce menu à la main because j'ai pas pu mettre la liste des pages filles d'un lien entre des div avec une class précise (ici class="zsous2")
j'ai cherché dans la fontion navbuilder() en vain

pourrais-tu orienter ma recherche, ce que j'aimerais c'est:
que la liste des zli2 soit dans une div class="zsous2"
que la liste des zli3 soit dans une div class="zsous3" etc..

pour être plus clair:

<div class="zli1">
  <a href="?perma=bienvenue">Bienvenue</a>
   <div class="zsous2">
     <a class="zli2" href="?perma=sous_page">Sous page</a>
       <div class="zsous3">
         <a class="zli3" href="?perma=test_sous_page">Test sous page</a>
       </div>
  <a class="zli2" href="?perma=a_sous_page">Autre sous page</a>
   </div>
</div>

le tout dans un module avec un beau papier cadeau car c'est pour offir wink
blague à part, voilà qui une fois terminé devrait servir à pas mal de monde
merci de ta réponse.

++ vYk

Dernière modification par davyk (29/09/2009 17:13:40)


Quand Chuck Norris utilise Windows, il ne plante pas.
ChuckNorrisN'aimePasWindows

Hors ligne

#4 30/09/2009 02:18:59

davyk
Membre
Inscription : 09/09/2008
Messages : 819
Site Web

Re : Le menu horizontal

Le menu est fonctionnel pour IE (testé avec ie6) quoi que pas tout à fait semblable notamment dans les espaces

++


Quand Chuck Norris utilise Windows, il ne plante pas.
ChuckNorrisN'aimePasWindows

Hors ligne

#5 02/10/2009 17:01:35

davyk
Membre
Inscription : 09/09/2008
Messages : 819
Site Web

Re : Le menu horizontal

salut,

je viens de faire une petite découverte dans navbuilder(): on peut remplacer tous les <li> et <ul> par <div>, le menu fonctionne de la même manière, n'est importante que la class qu'on lui attribut (zul, zli1 etc.)

je m'en suis rendu compte car chaque lien généré est du type <li class="maclass"><a href="monlien"></li> soit une liste... à un seul élément! ça n'est donc pas réellement une liste. Je préfère poser la question avant de dire que ça sert à rien:

à quoi ça sert de créer une liste puisqu'elle ne comporte qu'un seul élément?

pour ceux qui savent, je repose ma question précédente:
comment modifier la fonction navbuilder() (ligne 258 de zite.php) pour quelle regroupe les liens d'une même famille dans une div avec classe propre, du style:
la liste des zli2 soit dans une div class="zsous2"
la liste des zli3 soit dans une div class="zsous3" etc..

<div class="zli1">
  <a href="?perma=bienvenue">Bienvenue</a>
   <div class="zsous2">
     <a class="zli2" href="?perma=sous_page">Sous page</a>
       <div class="zsous3">
         <a class="zli3" href="?perma=test_sous_page">Test sous page</a>
       </div>
  <a class="zli2" href="?perma=a_sous_page">Autre sous page</a>
   </div>
</div>

++ vYk

Dernière modification par davyk (02/10/2009 17:12:30)


Quand Chuck Norris utilise Windows, il ne plante pas.
ChuckNorrisN'aimePasWindows

Hors ligne

#6 02/10/2009 23:26:36

jpg
Administrateurs
Inscription : 19/11/2008
Messages : 2 082
Site Web

Re : Le menu horizontal

davyk a écrit :

salut,

je viens de faire une petite découverte dans navbuilder(): on peut remplacer tous les <li> et <ul> par <div>, le menu fonctionne de la même manière, n'est importante que la class qu'on lui attribut (zul, zli1 etc.)

je m'en suis rendu compte car chaque lien généré est du type <li class="maclass"><a href="monlien"></li> soit une liste... à un seul élément! ça n'est donc pas réellement une liste. Je préfère poser la question avant de dire que ça sert à rien:

à quoi ça sert de créer une liste puisqu'elle ne comporte qu'un seul élément?

Heu ? mais non,
la liste de comporte pas qu'un seul élément, mais tous les éléments visibles du menu.
Un truc du style:

<ul class="zul">
  <li class="zl1"> ..... </li>               
  <li class="zl1"> ..... </li>               
  <li class="zl1"> ..... </li>               
  <li class="zl2"> ..... </li>               
  <li class="zl2"> ..... </li>               
  <li class="zl3"> ..... </li>               
  <li class="zl3"> ..... </li>               
  <li class="zl2"> ..... </li>               
  <li class="zl2"> ..... </li>               
  <li class="zl1"> ..... </li>               
</ul>

Il s'agit donc d'une liste qui comprend 10 éléments dans cet exemple.
ul introduit la liste et li chaque élément de la liste

davyk a écrit :

pour ceux qui savent, je repose ma question précédente:
comment modifier la fonction navbuilder() (ligne 258 de zite.php) pour quelle regroupe les liens d'une même famille dans une div avec classe propre, du style:
la liste des zli2 soit dans une div class="zsous2"
la liste des zli3 soit dans une div class="zsous3" etc..

<div class="zli1">
  <a href="?perma=bienvenue">Bienvenue</a>
   <div class="zsous2">
     <a class="zli2" href="?perma=sous_page">Sous page</a>
       <div class="zsous3">
         <a class="zli3" href="?perma=test_sous_page">Test sous page</a>
       </div>
  <a class="zli2" href="?perma=a_sous_page">Autre sous page</a>
   </div>
</div>

++ vYk

Je suis pas sur de savoir ... mais a mon avis tu vas devoir coder wink
et parcourir la liste des pages pour avoir ce que tu souhaites.
Pour l'instant je ne vois pas bien à quoi ça peut servir de regrouper tous les zli2 dans une div class="zsous2"
Pourquoi regrouper des lignes de menu qui n'ont rien avoir entre elle ? (voir exemple précédent)

a+
jean-paul

Hors ligne

#7 03/10/2009 01:14:18

davyk
Membre
Inscription : 09/09/2008
Messages : 819
Site Web

Re : Le menu horizontal

			<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>

le groupement des pages fille en fonction de sa page mère permettra l'intégration (dynamique) du menu horizontal et utilisation du a:hover pour faire apparaître les sous pages grâce à cette css:

#divmenu {
        height:125px;
        text-align: center;
	margin: 0;
        position: relative;
	width: 900px;
}

.menu {
	font-size: 14px;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
        position: absolute;
        width: 900px;
}

.menu a {
	color: #e6e6e6;
	text-decoration: none;
}

.menu .zli1 {
	background-color: #000000;
        background-image: none;
	border-right: 1px solid #666666;
	display: inline-block;
	margin: 0px;
	vertical-align: top;
	width: 206px;
}

.menu .zli1:hover .zsous2 {
	display: block;
}

.menu .zli1 a {
	display: block;
	height: 14px;
	overflow: visible;
	padding-bottom: 8px;
	padding-top: 6px;
}

.menu .zli1 a:hover {
	color: #ffffff;
}

.menu .zsous2{
	border: 0;
	border-right: 0;
	display: none;
	font-size: 12px;
	text-align: left;
}

.menu .zli2 {
	border-bottom: 0;
        background-image: none;
        margin-left: 0px;
	display: block;
	padding-top: 3px;
	padding-left: 15px;
	padding-bottom: 7px;
}

.menu .zli2:hover {
	background-color: #262626;
	color: #ffffff;
}

j'ai décortiqué le navbuilder() et page_sitemap() sans succès.
je suis juste arrivé à ce résultat qui ne fonctionne pas avec la css:

<div class="zsous1">
				<a class="zli1"href="index.php?perma=bienv">Bienvenue</a></div>
				<div class="zsous2">
				<a class="zli2"href="index.php?perma=bienvenue">bien</a></div>
				<div class="zsous2">
				<a class="zli2"href="index.php?perma=1151951292">Autre sous page</a></div>

une aide est la bienvenue wink

++vYk

PS:

jpg a écrit :

Je suis pas sur de savoir ... mais a mon avis tu vas devoir coder wink

pour l'instant j'en suis à:

echo 'hello world!';

ou pas loin wink

Dernière modification par davyk (03/10/2009 01:31:31)


Quand Chuck Norris utilise Windows, il ne plante pas.
ChuckNorrisN'aimePasWindows

Hors ligne

#8 03/10/2009 09:50:12

jpg
Administrateurs
Inscription : 19/11/2008
Messages : 2 082
Site Web

Re : Le menu horizontal

davyk a écrit :

...
le groupement des pages fille en fonction de sa page mère permettra l'intégration (dynamique) du menu horizontal et utilisation du a:hover pour faire apparaître les sous pages grâce à cette css:
...

Tu peux m'éclairer sur la technique, car tel que je comprends le code exemple que tu as donné je ne vois pas comment tu vas pouvoir faire cela avec ce code et ce css (et un peu de javascript peut-être ?)
comment tu va faire la différence entre les pages filles de "a_propos" et celles de "bienvenue" par exemple ?
toutes les deux auront pour classe css: zsous2 et zli2

Hors ligne

#9 03/10/2009 14:31:52

davyk
Membre
Inscription : 09/09/2008
Messages : 819
Site Web

Re : Le menu horizontal

salut Jean-Paul,

merci pour ta réponse
L'exemple que j'ai donné est celui que j'ai utilisé ici:
http://mmultimediaservice.free.fr/zite8.3/
il est donc fonctionnel.
le js utilisé est sous la forme d'un fichier htc mais il est utilisé unique pour lt IE6 (évidement, car ils ne gèrent pas le a:hover ces mer#es).
pour les autres navigateurs cela se fait en full css;) tu comprends donc pourquoi je passe tellement de temps sur ce travail car, sous forme de module, ça devrait faire un carton. Il n'y a qu'à voir le nombre de posts sur le sujet.

le principe est le suivant:

toutes les divs zsous2 sont cachées, les divs zli2 ont une visibilité en bloc. zli2 faisant partie de zsous2, elle est cachée de fait.
.menu .zli1:hover .zsous2 {display: block;} permet d'afficher le contenu de la div zsous2 en fonction du zli1 appelé.

je t'envoies par mail les codes d'accès pour que tu puisses avoir accès à la partie admin et voir par toi même que je n'utilise pas de js pour le menu (le seul que j'utilise, c'est pour ce fameux plugin de jquery pour les images).
Tu peux désactiver le js (dans firefox ou chrome), tu verras que ça marche!
j'allègerais et annoterais bien sûr la css une fois que la génération dynamique des liens en divs sera réalisé.

++ vYk

Si tu veux quelque chose d'autre dans le site, serts-toi  wink

Dernière modification par davyk (03/10/2009 14:59:12)


Quand Chuck Norris utilise Windows, il ne plante pas.
ChuckNorrisN'aimePasWindows

Hors ligne

#10 03/10/2009 23:47:15

jpg
Administrateurs
Inscription : 19/11/2008
Messages : 2 082
Site Web

Re : Le menu horizontal

davyk a écrit :

le principe est le suivant:

toutes les divs zsous2 sont cachées, les divs zli2 ont une visibilité en bloc. zli2 faisant partie de zsous2, elle est cachée de fait.
.menu .zli1:hover .zsous2 {display: block;} permet d'afficher le contenu de la div zsous2 en fonction du zli1 appelé.

Ok, merci pour le commentaire. J'avais zappé le .menu .zli1:hover .zsous2 {display: block;}

et en plus je viens de voir pourquoi ton bout de code (   <div id="divmenu"> etc...) que j'ai mis dans un template de test fonctionnait sur ton site et pas chez moi.

j'avais généré la page html avec pspad et le défaut c'est <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> hmm

Après avoir remis le bon doctype, ton exemple fonctionne bien smile

Hors ligne

#11 04/10/2009 00:45:13

davyk
Membre
Inscription : 09/09/2008
Messages : 819
Site Web

Re : Le menu horizontal

et aurais-je l'outrecuidance de caresser l'espoir d'obtenir une aide quelconque, quant à la façon de coder ce menu sus-décrit qui me (nous) servirait tant.

à vous lire mon très cher.


Quand Chuck Norris utilise Windows, il ne plante pas.
ChuckNorrisN'aimePasWindows

Hors ligne

#12 04/10/2009 10:07:44

jpg
Administrateurs
Inscription : 19/11/2008
Messages : 2 082
Site Web

Re : Le menu horizontal

davyk a écrit :

et aurais-je l'outrecuidance de caresser l'espoir d'obtenir une aide quelconque, quant à la façon de coder ce menu sus-décrit qui me (nous) servirait tant.

à vous lire mon très cher.

Vous pouvez mon bon, vous pouvez big_smile

Hors ligne

#13 04/10/2009 14:11:06

davyk
Membre
Inscription : 09/09/2008
Messages : 819
Site Web

Re : Le menu horizontal

j'en suis fort aise big_smile


Quand Chuck Norris utilise Windows, il ne plante pas.
ChuckNorrisN'aimePasWindows

Hors ligne

#14 04/10/2009 18:40:19

jpg
Administrateurs
Inscription : 19/11/2008
Messages : 2 082
Site Web

Re : Le menu horizontal

Bon, alors, en fait, comme je le disais précédemment, il faut recoder le navbuilder pour générer un menu complet et avec une structure hiérarchique.
Actuellement, en simplifiant un peu, il n'y a que la partie visible du menu qui est générée.

je suis en train de réfléchir à la façon la plus simple de procéder tout en garder une compatibilité totale avec l'existant.
Pour l'instant je pencherais pour créer un nouveau paramètre global pour indiquer le type du menu: standard, fixe ou dynamique.
- standard serait le menu actuel
- fixe permettrait pour les micros sites d'avoir la totalité du menu toujours visible
- dynamique serait le menu dont tu parlais. Dynamique et facilement gérable par css

a+
jean-paul

Hors ligne

#15 04/10/2009 19:36:00

davyk
Membre
Inscription : 09/09/2008
Messages : 819
Site Web

Re : Le menu horizontal

ben moi qui croyais, en pauvre néophyte que je suis, qu'il suffisait de changer quelques lignes..
c'est maintenant sûr, c'est bien au-delà de mes humbles capacités.
je pouvais toujours chercher!
le plus simple ne serait-il pas de créer un (des) module(s) permettant la génération de tels menus?

++ vYk


Quand Chuck Norris utilise Windows, il ne plante pas.
ChuckNorrisN'aimePasWindows

Hors ligne

Pied de page des forums