Le menu horizontal

davyk · 29/09/2009 15:51:41

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)

jpg · 29/09/2009 16:23:38

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

davyk · 29/09/2009 17:03:51

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

puisque t'es là jean-paul , 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
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)

davyk · 30/09/2009 02:18:59

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

++

davyk · 02/10/2009 17:01:35

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)

jpg · 02/10/2009 23:26:36

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:

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

davyk · 03/10/2009 01:14:18

			<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

++vYk

PS:

jpg a écrit :

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

pour l'instant j'en suis à:

echo 'hello world!';

ou pas loin

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

jpg · 03/10/2009 09:50:12

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

davyk · 03/10/2009 14:31:52

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

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

jpg · 03/10/2009 23:47:15

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

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

davyk · 04/10/2009 00:45:13

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.

jpg · 04/10/2009 10:07:44

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

davyk · 04/10/2009 14:11:06

j'en suis fort aise

jpg · 04/10/2009 18:40:19

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

davyk · 04/10/2009 19:36:00

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

Forum ZitePLUS

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

Le menu horizontal

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

Re : Le menu horizontal

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

Re : Le menu horizontal

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

Re : Le menu horizontal

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

Re : Le menu horizontal

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

Re : Le menu horizontal

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

Re : Le menu horizontal

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

Re : Le menu horizontal

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

Re : Le menu horizontal

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

Re : Le menu horizontal

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

Re : Le menu horizontal

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

Re : Le menu horizontal

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

Re : Le menu horizontal

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

Re : Le menu horizontal

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

Re : Le menu horizontal

Pied de page des forums