Creation des menu des lien

kasken -  
Bonjour,
j'ai un site, qui fonctionne bien, mais je vais commencer a utiliser de lien avec menu, si quelqu'un peu aider.je vous en pris.
Configuration: Windows XP
Firefox 3.0.5

17 réponses

  • Votes
  • Date
  • Date décroissante
Résumé de la discussion

Plusieurs échanges portent sur l'intégration d'un menu de navigation avec des liens, en utilisant Dreamweaver CS3 et des technologies HTML/CSS, éventuellement complété par du JavaScript ou du code PHP. Des conseils évoquent l'insertion de scripts, l'emploi d'un menu horizontal ou vertical, et des ajustements CSS pour limiter les problèmes liés à une mise en page en tableau. Plusieurs réponses évoquent Dreamweaver, l'emplacement des icônes de création de menu et les difficultés d'insertion du code dans une page utilisant une structure en tableau, avec des ajustements CSS recommandés. En cas de précisions supplémentaires, des conseils complémentaires mentionnent l'importance du choix entre menu horizontal et vertical ainsi que l'impact des technologies utilisées sur la compatibilité et la facilité de mise en œuvre.

Bobot (l’IA à votre service)
  1. kasken Auteur
    bonjour,
    pour plus de precission j'utilise dreamweaver avec easy php. merci
    1. RAD ZONE Contributeur
      ?? tu veux quoi ??

      un menu !! ? mais quel type de menu?
      1. kasken Auteur
        je m'explique, un menu qui fait naitre un sous menu sur effet de souris. de sorte qu'une foi la souris est placée sur un bouton, il y a une fenestre qui ouvre donnant la possibilité de glisser sur plusieurs d'autre lien que je peut dire sous-menu. merci
        1. RAD ZONE Contributeur
          Horizontal , vertical ??

          avec javascript , sans javascript ??

          RAD
          2. kasken Auteur
            Bonjour,
            bien mais justement c'est ce que je vais savoir, comment introduire ce script de java pour faire ce menu, aider moi, je ne me retrouve pas. est ce qu'il faut apprendre ce langage juste pour faire cette application aider moi je vous en pris.
            3. RAD ZONE Contributeur
              En voila un vite fais en html css ! tu adapte a tes besoins 

              <!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">
<head>
<title>RAD ZONE Webcreation</title>
<meta name="author" content="http://radservebeer.free.fr" />
<meta name="generator" content="PSPad editor, www.pspad.com" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body{ behavior:url("csshover2.htc");
	background-color: #333333;
}

.menu {
	float:left;
	padding: 0;
	margin: 0;
	color: #0F57FF;
	background: #9FBCFF;
	border: solid 1px #cfdeff;
	width:400px; 
	clear:both; } 
.rad_menu  a, .rad_menu a:visited {width: 120px;
	font-family: Georgia, Times New Roman, serif;
	font-style: normal;
	font-weight: normal;
	font-size: 18px;
	color: #0F57FF;
	background-color: #9FBCFF;
	text-decoration: none;
}
.rad_menu ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.rad_menu ul li {
	float: left;
	position: relative;
	z-index: auto !important;
	z-index: 1000;
	border-right: solid 1px #cfdeff;
	border-left: solid 1px #cfdeff;
}
.rad_menu ul li a {
	color: #0F57FF;
	background: #9FBCFF;
	float: none !important;
	float: left;
	display: block;
	height: 30px;
	line-height: 30px;
	padding: 0 10px 0 10px;
	text-decoration: none;
}
.rad_menu ul li ul {
	display: none;
	border: none;
	color: #0F57FF;
	background: #9FBCFF;
	width: 1px
}
.rad_menu ul li:hover a {
	background-color: #cfdeff;
	text-decoration: none;
	color: #0F57FF;
}

.rad_menu ul li:hover ul {
	display: block;
	position: absolute;
	z-index: 999;
	top: 29px;
	margin-top: 1px;
	left: 0;
}
.rad_menu ul li:hover ul li a {
	display: block;
	width: 120px
	height: auto;
	line-height: 1.3em;
	margin-left: -1px;
	padding: 5px 10px 5px 10px;
	border-left: solid 1px #cfdeff;
	border-bottom: solid 1px #cfdeff;
	background-color: #9FBCFF;
	color: #0F57FF;
}

.rad_menu ul li:hover ul li a:hover {
	background-color: #cfdeff;
	text-decoration: none;
	color: #0F57FF;
}

.rad_menu ul li a:hover {
	background-color: #cfdeff;
	text-decoration: none;
	color: #0F57FF;
}

.rad_menu ul li a:hover ul {
	display: block;
	width: 9em;
	position: absolute;
	z-index: 999;
	top: 29px;
	left: 0;
}
.rad_menu ul li ul li a:visited {
	background-color: #9FBCFF;
	color: #0F57FF;
}

.rad_menu ul li a:hover ul li a {
	display: block;
	width: 9em;
	height: 1px;
	line-height: 1.3em;
	padding: 4px 16px 4px 16px;
	border-left: solid 1px #cfdeff;
	border-bottom: solid 1px #cfdeff;
	background-color: #9FBCFF;
	color: #0F57FF;
}
.rad_menu ul li a:hover ul li a:hover {
	background-color: #cfdeff;
	text-decoration: none;
	color: #0F57FF;
}

</style>
  </head>
  <body>
    <div class="rad_menu "> 
      <ul><li>
        <a href="/">Home</a>
        <ul><li>
          <a href="#"  > sub-menu 1</a></li><li>
          <a href="#"  > sub-menu 2</a></li>
        </ul></li>
      </ul>
      <ul><li>
        <a href="#">BBB</a>
        <ul><li>
          <a href="#"  > sub-menu 3</a></li><li>
          <a href="#"  > sub-menu 4</a></li>
        </ul></li>
      </ul>
      <ul><li>
        <a href="#">CCC</a>
        <ul><li>
          <a href="#"  >sub-menu 5</a></li><li>
          <a href="#"  > sub-menu 6</a></li>
        </ul></li>
      </ul>
    </div>
  </body>
  </html>


              et tu copie le code ci dessus que tu sauvegarde sous le nom csshover2.htc 

              <attach event="ondocumentready" handler="parseStylesheets" />
<script>
/**
 *	Whatever:hover - V2.02.060206 - hover, active & focus
 *	------------------------------------------------------------
 *	(c) 2005 - Peter Nederlof
 *	Peterned - https://peterned.home.xs4all.nl/
 *	License  - http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html
 *
 *	Whatever:hover is free software; you can redistribute it and/or
 *	modify it under the terms of the GNU Lesser General Public
 *	License as published by the Free Software Foundation; either
 *	version 2.1 of the License, or (at your option) any later version.
 *
 *	Whatever:hover is distributed in the hope that it will be useful,
 *	but WITHOUT ANY WARRANTY; without even the implied warranty of
 *	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 *	Lesser General Public License for more details.
 *
 *	Credits and thanks to:
 *	Arnoud Berendsen, Martin Reurings, Robert Hanson
 *
 *	howto: body { behavior:url("csshover.htc"); }
 *	------------------------------------------------------------
 */

var csshoverReg = /(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active))|((a|input|textarea)(#.[^ ]+)?:unknown)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
	onhover:{on:'onmouseover', off:'onmouseout'},
	onactive:{on:'onmousedown', off:'onmouseup'},
	onunknown:{on:'onfocus', off:'onblur'}
}

function parseStylesheets() {
	if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
	window.attachEvent('onunload', unhookHoverEvents);
	var sheets = doc.styleSheets, l = sheets.length;
	for(var i=0; i<l; i++) 
		parseStylesheet(sheets[i]);
}
	function parseStylesheet(sheet) {
		if(sheet.imports) {
			try {
				var imports = sheet.imports, l = imports.length;
				for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
			} catch(securityException){}
		}

		try {
			var rules = (currentSheet = sheet).rules, l = rules.length;
			for(var j=0; j<l; j++) parseCSSRule(rules[j]);
		} catch(securityException){}
	}

	function parseCSSRule(rule) {
		var select = rule.selectorText, style = rule.style.cssText;
		if(!csshoverReg.test(select) || !style) return;
		
		var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
		var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
		var className = (/\.([a-z0-9_-]*on(hover|active|unknown))/i).exec(newSelect)[1];
		var affected = select.replace(/:(hover|active|unknown).*$/, '');
		var elements = getElementsBySelect(affected);
		if(elements.length == 0) return;

		currentSheet.addRule(newSelect, style);
		for(var i=0; i<elements.length; i++)
			new HoverElement(elements[i], className, activators[pseudo]);
	}

function HoverElement(node, className, events) {
	if(!node.hovers) node.hovers = {};
	if(node.hovers[className]) return;
	node.hovers[className] = true;
	hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
	hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
	function hookHoverEvent(node, type, handler) {
		node.attachEvent(type, handler);
		hoverEvents[hoverEvents.length] = { 
			node:node, type:type, handler:handler 
		};
	}

	function unhookHoverEvents() {
		for(var e,i=0; i<hoverEvents.length; i++) {
			e = hoverEvents[i]; 
			e.node.detachEvent(e.type, e.handler);
		}
	}

function getElementsBySelect(rule) {
	var parts, nodes = [doc];
	parts = rule.split(' ');
	for(var i=0; i<parts.length; i++) {
		nodes = getSelectedNodes(parts[i], nodes);
	}	return nodes;
}
	function getSelectedNodes(select, elements) {
		var result, node, nodes = [];
		var identify = (/\#([a-z0-9_-]+)/i).exec(select);
		if(identify) {
			var element = doc.getElementById(identify[1]);
			return element? [element]:nodes;
		}
		
		var classname = (/\.([a-z0-9_-]+)/i).exec(select);
		var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
		var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
		for(var i=0; i<elements.length; i++) {
			result = tagName? elements[i].all.tags(tagName):elements[i].all; 
			for(var j=0; j<result.length; j++) {
				node = result[j];
				if(classReg && !classReg.test(node.className)) continue;
				nodes[nodes.length] = node;
			}
		}	
		
		return nodes;
	}
</script>
              1. kasken Auteur
                ce bon, je vous ai dis que je ne sais pas comment introduire ce script et j'utilise me fichier en php, j'espère que ce la ne va pas me cause de difficultés. je part essai, je vous donne la suite le Lundi. Merci beaucoup.si vous avez d'autre précisions je vous en pris aider moi.
                1. RAD ZONE Contributeur
                  oui mais je ne peux pas l inserrer pour toi !

                  alors tu separe le CSS dans un fichier menu.css que tu lieras a ta page avec un lien css

                  tu n oublie de mettre le csshover2.htc avec ta page

                  et tu ne prend que la partie 
                   <div class="rad_menu "> 
      <ul><li>
        <a href="/">Home</a>
        <ul><li>
          <a href="#"  > sub-menu 1</a></li><li>
          <a href="#"  > sub-menu 2</a></li>
        </ul></li>
      </ul>
      <ul><li>
        <a href="#">BBB</a>
        <ul><li>
          <a href="#"  > sub-menu 3</a></li><li>
          <a href="#"  > sub-menu 4</a></li>
        </ul></li>
      </ul>
      <ul><li>
        <a href="#">CCC</a>
        <ul><li>
          <a href="#"  >sub-menu 5</a></li><li>
          <a href="#"  > sub-menu 6</a></li>
        </ul></li>
      </ul>
    </div>


                  que tu met ou tu veux qu il soit dans ta page php ou html !!
                  1. kasken Auteur
                    excellent merci, je vais vous donner la suite ce Lundi, alors je ne sais pas si je vais vous trouver, si vous pouvez me faire grâce d'avoir votre mail. pour plus d'assurance de peur que nous nous perdîmes pas.
                    1. RAD ZONE Contributeur
                      je suis contributeur sur CCM tu me trouveras ici ;-))

                      ou si vraiment tu ne me trouve pas tu vas sur le forum mon site RAD ZONE :-))
                      2. kasken
                        Bonjour,
                        jetiens a vous remercier, j'ai reucu a le faire tout en modiffiant le code que vous m'aviez donne, mais je ne pas arrive a inserer ce code dans mon site. je vais vous precisser que j'utilise la forme de tableau, je pense que ce ceux qui me rend difficile pour appliquer le CSS. si vous avez comment faire je vous en pris aidez-moi.
                        1. RAD ZONE Contributeur
                          il faudris voir ton code !!
                          1. kasken
                            bien, je suis ravis de cette precision, je part explorer ca et je vais vousdonner la suite le jeudi. une fois encore merci.
                        2. JooS
                          Salut, ben si tu veut faire ça tout seul, dreamweaver a inclu cette option d'insertion de menu,
                          dans Mise en forme > Barre de menus spry, donc tu aura a peut prés ce que RAD ZONE a fait pour toi, mais tu peut le modifier tres facilement sans te préoccuper du code,
                          comme ceci
                          1. Dalida Contributeur
                            salut,

                            tu aura a peut prés ce que RAD ZONE a fait pour toi
                            c'est ça tout est dans l'à peu près…

                            et souvent ça se termine comme ça…
                          2. RAD ZONE Contributeur
                            @DalidaSalut Dalida
                            et souvent ça se termine comme ça… looool
                            oui surtout quand il n ont plus dream pour le modifier le menu spry :-))
                          3. JooS
                            @Dalidamais non, c'est pas dans ce sens la, je parlais de la forme, des dimensions,.....
                          4. Dalida Contributeur
                            @RAD ZONEsalut mister Rad,

                            c'est standard le .htc ?
                          5. RAD ZONE Contributeur
                            @DalidaC est un hack presque indispensable si tu fais du web 2 qui patche les états :hover, :active, et :focus pour I6, IE7 et même IE8
                        3. kasken Auteur
                          Bonjour,
                          je suis tres satisfait, car la chose que je nepouvais pas faire m'ai faisable aujourd'hui grace a vous. Merci.
                          Je suis capable de modifier comme je vais cette page seulement, mais pour le reste je n'arrive pas. Vous m'aviez conseille d'aller dans l'icone creation de menu dans Dreamweaver, mais je ne voie pas ou trouver cette icone. qui va me permetre avec dreamweaver d'incere ces codes. si vous avez d'autres precissions je vous en prie aidez-moi.
                          1. JooS
                            salut, bien sure on parle de Dreamweaver CS3, pour les autres je sais pas...

                            regarde iciiii...!!

                        Discussions similaires

                        Copier un lien instagram
                        alaurore

                        7 réponses
                        Retrouver liens copiés sur le téléphone
                        SAMA

                        2 réponses
                        copie d'un lien dans le navigateur internet
                        Ulysse Orseau

                        4 réponses
                        Rajouter des éléments à un menu en HTML
                        leparradiss

                        11 réponses