Creation des menu des lien

kasken Messages postés 51 Date d'inscription   Statut Membre Dernière intervention   -  
JooS Messages postés 2468 Date d'inscription   Statut Membre Dernière intervention   -
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.
A voir également:

17 réponses

Réponse 1 / 17
kasken Messages postés 51 Date d'inscription   Statut Membre Dernière intervention   2
 
bonjour,
pour plus de precission j'utilise dreamweaver avec easy php. merci
0
Réponse 2 / 17
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
?? tu veux quoi ??

un menu !! ? mais quel type de menu?
0
Réponse 3 / 17
kasken Messages postés 51 Date d'inscription   Statut Membre Dernière intervention   2
 
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
0
Réponse 4 / 17
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
Horizontal , vertical ??

avec javascript , sans javascript ??

RAD
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 17
kasken Messages postés 51 Date d'inscription   Statut Membre Dernière intervention   2
 
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.
0
Réponse 6 / 17
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
ton menu doit etre horizontal ou vertical !!!!!§
0
Réponse 7 / 17
kasken Messages postés 51 Date d'inscription   Statut Membre Dernière intervention   2
 
ce horizontal
0
Réponse 8 / 17
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
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>
0
Réponse 9 / 17
kasken Messages postés 51 Date d'inscription   Statut Membre Dernière intervention   2
 
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.
0
Réponse 10 / 17
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
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 !!
0
Réponse 11 / 17
kasken Messages postés 51 Date d'inscription   Statut Membre Dernière intervention   2
 
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.
0
Réponse 12 / 17
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
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 :-))
0
Réponse 13 / 17
kasken Messages postés 51 Date d'inscription   Statut Membre Dernière intervention   2
 
ce bon, une foi encore merci.
0
Réponse 14 / 17
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.
0
Réponse 15 / 17
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
il faudris voir ton code !!
0
kasken
 
bien, je suis ravis de cette precision, je part explorer ca et je vais vousdonner la suite le jeudi. une fois encore merci.
0
Réponse 16 / 17
JooS Messages postés 2468 Date d'inscription   Statut Membre Dernière intervention   228
 
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
0
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922
 
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…
0
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360 > Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention  
 
Salut Dalida
et souvent ça se termine comme ça… looool
oui surtout quand il n ont plus dream pour le modifier le menu spry :-))
0
JooS Messages postés 2468 Date d'inscription   Statut Membre Dernière intervention   228 > Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention  
 
mais non, c'est pas dans ce sens la, je parlais de la forme, des dimensions,.....
0
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922 > RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention  
 
salut mister Rad,

c'est standard le .htc ?
0
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360 > Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention  
 
C 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
0
Réponse 17 / 17
kasken Messages postés 51 Date d'inscription   Statut Membre Dernière intervention   2
 
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.
0
JooS Messages postés 2468 Date d'inscription   Statut Membre Dernière intervention   228
 
salut, bien sure on parle de Dreamweaver CS3, pour les autres je sais pas...

regarde iciiii...!!
0

Discussions similaires

Copier un lien instagram
alaurore -
LEFEUVRE -

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

3 réponses
Rajout de lien sur plusieurs pages
leparradiss -
David -

11 réponses
copie d'un lien dans le navigateur internet
Ulysse Orseau -
diamantnoir -

4 réponses