Titre: Menus "à la frame" sans frame :-)
Posté par: Jelpy le le 13-12-2006 a 03:19:19
Bonjour,
Je m'explique: j'ai achté un kit graphique pour faire un portail.
Cependant aujourd'hui on n'utilise plus de frames qui avaient l'avantage de séparer la structure de navigation et les contenus des pages: on n'avais qu'a modifier la structure une seule fois à chaque ajout de page.
Mais aujourd'hui, et notemment avec mon kit graphique, sans frame pour gérer le menu séparément ça devient vite super compliqué au delà d'une dizaine de page et ça s'arrange pas à chaque nouvelle page. Puisque le menu est alors du simple texte lié aux autres pages. Il faudrait donc rouvrir toutes les pages, rajouter les textes des liens et créer les liens idoines. Un vrai casse-tête et surtout une perte de temps énorme.
Comment gérer de multiples menus (en haut à gauche et en bas de page)? En DHTML? en CSS, en JavaScript?
En fait, seul le menu de gauche serait assez compliqué, les autres menus étant juste liés à une seule page en principe, soit la première page de la rubrique.
Où trouver des indications concrètes sur le net ou un bouquin? voir y a-t-il un programme pour générer facilement un menu simple avec un niveau de sous-menus.
Voir la copie d'écran de ce que j'ai et que j'ai complété en bidouillant avec un prog graphique pour expliciter le résultat voulu; en cliquant par exemple sur "Alimentation" on déroule le sous-menu listant les options du sous menu; et en cliquant sur un sous menu on accède à la page désirée, laquelle affichera toujours le même menu:
Merci pour tout tuyau utile.
Jelpy |
Titre: Re:Menus "à la frame" sans frame :-)
Posté par: theonlydrayk le le 13-12-2006 a 04:41:52
Bonjour,
Faire des menu pour des dizaines de page statiques je comprend que c'est un travail enorme.
Les sites web aujourdhui avec un menu sans frame sont fait avec un script qui inclus le menu dans toute les pages. Personne ne fait de copier-coller le menu 15 fois !!
Tu devrais t'orienter vers un script PHP si ton hebergeur est sous linux ou ASP si ton hebergeur est sous Windows.
|
Titre: Re:Menus "à la frame" sans frame :-)
Posté par: TinMar le le 14-12-2006 a 21:10:39
Bon j'ai un peu bossé pour toi pour la partie HTML; il va falloir que tu te mettes au PHP (au moins les bases)!
Voila ce que je ferrais. c'est à titre indicatif.
Si d'autres personnes ont d'autres solution je suis aussi interessé.
Pour le menu tu vas voir sur
http://tinmarweb.free.fr/FWM/testmenu/test-menu.html (http://tinmarweb.free.fr/FWM/testmenu/test-menu.html)
Tu trouveras le menu en CSS avec la page suivante:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>test</title>
<style type="text/css">
<!--
#menu { list-style-position:inside;
margin: 0;
padding: 0;
width:200px;
border-left:solid 1px #000;
border-right:solid 1px #000;
font-family: arial;
font-size: 12px;
}
#menu a{
text-decoration: none;
color: #000
}
#menu li{
border-bottom: dotted 1px #ccc;
padding: 5px;
list-style-image:url( puce.jpg );
}
#menu li ul{display: none}
#menu li.active ul{display: block}
#menu li.active{
list-style-image:url( puce2.jpg );
}
#menu li ul li{
border: none;
margin: 0;
padding:0;
list-style-type:none;
list-style-image:none;
}
-->
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">Administration</a></li>
<li class="active"><a href="#">Alimentation</a>
<ul>
<li><a href="#">Alimentation diététique</a></li>
<li><a href="#">Boulangeries</a></li>
<li><a href="#">Cafés-Restaurant</a></li>
</ul>
</li>
<li><a href="#">Animaux</a>
<ul>
<li><a href="#">Alimentation diététique</a></li>
<li><a href="#">Boulangeries</a></li>
<li><a href="#">Cafés-Restaurant</a></li>
</ul>
</li>
<li><a href="#">Arts & Antiquités</a></li>
<li><a href="#">Assurances</a></li>
<li><a href="#">Autos / Motos</a></li>
</ul>
</body>
</html>
|
|
En regardant le menu tu vois qu'il n'y a que un sous menu dans la partie Alimentation. Par contre dans le CODE il y en a aussi un dans sous Animaux. En gros en ajoutant le code class="active" tu affiche et cache les sous menu.
Apres tu fais intervenir le PHP pour:
- faire tes pseudo frame http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Construire-un-site-sans-tableaux (http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Construire-un-site-sans-tableaux)
- ensuite avec une ptite fonction PHP tu fais apparaitre l'élément class="active" en fonction de la page.
A+ |
Titre: Re:Menus "à la frame" sans frame :-)
Posté par: Jelpy le le 15-12-2006 a 01:40:40
ouaaah super et merci TinMar !!
J'apprend plein de trucs intéressants avec ton code.
En effet, et par exemple, le concepteur de mon kit a fait un tableau compliqué pour le menu avec des lignes graphiques pleines (cadre) ou traitillées (entre les lignes), ce qui fait que c'est super galère pour ajouter un élément parce que tu dois dupliquer la ligne de texte ET la ligne du tableau contenant l'image de la ligne. Trop galère!!
Possiblement parce que le kit a été créé avec Photoshop, lequel transcrit très certainement le cadre et les lignes traitillées en images dans un tableau!!
Mais là, il suffit de déclarer tes lignes par du texte; balèze et souple!!
C'est sûr que je vais pouvoir le réutiliser!!
Et merci pour les liens aussi. J'ai zieuté un coup, mais pas trop le temps de lire ce soir, et zou classé dans mes favoris.
Par contre je veux éviter de placer le code du remplissage du menu dans la page elle même pour éviter de ré-ouvrir chaque page déjà créée pour rajouter les éléments correspondants à chaque fois que je rajoute une nouvelle page.
Mon but est d'externaliser les éléments et la structure de mon menu et les liens respectifs et de seulement déclarer la position du menu au bon endroit sur chaque page.
Exactement comme on le fait d'une image: l'image est un fichier externe qui est déclaré le nombre de fois voulu dans toutes les pages voulues.
Si t'as la même puce rouge affichée 5 fois sur chacune des 50 pages de ton site, tu la déclare partout au bon endroit; du genre <a ref trucbidule "puce.gif" etc. Maintenant tu te dis je veux une puce bleue à la place, tu n'as absolument rien à modifier dans tes pages, tu remplace juste la couleur de ta puce dans ton fichier puce.gif et tu upload l'image. Maintenant partout dans ton site tes puces sont bleues.
Donc l'idée est de faire pareil avec le menu: déclarer dans toutes tes pages à l'endroit voulu genre <a ref machinchose "menu1.css" (ou menu1.php ou je ne sais pas trop quoi), etc. Et tu n'as plus jamais à modifier ton menu1 dans tes 50 ou 100 pages.
Seul le fichier "menu1.css" (ou menu1.php, ou que sais-je, suivant la technique/language utilisé) contiendra --et une seule fois dans tout ton site-- la structure comprenant les éléments, sous-menus et liens. Et ça te fait un seul endroit dans lequel ajouter/modifier tes éléments de menu avec les liens correspondants à chaque ajout d'une nouvelle page.
|
Titre: Re:Menus "à la frame" sans frame :-)
Posté par: TinMar le le 15-12-2006 a 07:43:25
ben pas de pb c'est le principe des pseudo frame. Tu trouveras tt dans alsacreations et sinon en cherchant dans google à "pseudo frame".
Bon courage |
Titre: Re:Menus "à la frame" sans frame :-)
Posté par: boy le le 04-01-2007 a 13:31:57
Bonjour !
J'aimerais bien avoir des infos sur l'utilisation de php pour mettre à jour, je suis pas trop féru de css pour le moment ^^
Genre faire un "echo" d'une nouvelle définition de la classe div ? |
Titre: Re:Menus "à la frame" sans frame :-)
Posté par: TinMar le le 04-01-2007 a 20:12:35
Le CSS est indépendant du PHP. Le PHP permet de générer du code, le CSS permet de mettre en page.
Je ne vois pas trop ce que tu veux avec les ECHO.
|
Titre: Re:Menus "� la frame" sans frame :-)
Posté par: boy le le 04-01-2007 a 23:32:39
Vu qu'il n'est PAS possible de modifier une donnée sans utiliser au minimum une pseudo frame et donc forcément recharger l'index en entier pour actualiser la pseudo frame index.php?action=tutu, je me suis dit qu'en envoyant des définitions css avec une commande php "echo" depuis cette page pouvait modifier uniquement le ou les tag css de cette page sans avoir a la recharger ...
En clair, se servir de la commande php "echo" pour n'envoyer qu'une modification CSS à la page, pour que cette modification soit répercutée sans avoir a recharger toute la page.
Moi je vois que cette solution pour ne pas avoir a recharger la page. Chose qui est totalement possible avec une iframe et qui me va super méga bien. Vous voyez ce que je veux dire ?
Si j'ai 49900 milliards d'éléments sur une seule page et que je veux juste changer 1 élément de cette page par exemple ....
Vu qu'avec l'iframe, on peut modifier QUE le contenu d'un cadre sans avoir a ne serais-ce que toucher à quoi que ce soit d'autre. |
Titre: Re:Menus "à la frame" sans frame :-)
Posté par: TinMar le le 05-01-2007 a 19:24:25
on comprend pas ce que tu appelles éléments?
En gros dans ta page tu as:
- Ta mise en page (incluant couleur taille etc des polices) qui est géré par UN SEUL fichier CSS. Dc si tu le modifies 1 fois tu le fais pour TOUTES les pages
- Ton menu et ton contenu (du texte)
Le but du PHP d'afficher un contenu en fonction de variable. Ca peut etre dans une page seulement (index.php) et si c'est le cas, a chaque chargement elle se rafraichirera entierement ce qu'il ne veut pas dire qu'elle chargera les éléments de ta page (genre image, menu etc) à chaque fois |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|