Aller au contenu

menu CSS et XHTML..

KexS

Par KexS
dans (X)HTML et CSS

 Partager

Sujets conseillés

KexS

KexS

Posté
Posté (modifié)

Bonjour,

J'ai trouvé un menu déroulant horizontal qui va très bien avec mon site et qui correspond exactement à ce que je recherchai. Le seul problème est que j'aimerai bien avoir une cible _blank pour les liens, que ça soit ceux des menus ou des sous-menus..

Savez vous où je pourrais modifier ça dans le code car je n'y connais absolument rien!

Le code ( j'ai l'horizontale ) : http://css.alsacreations.com/Construction-...l-et-horizontal

Merci d'avance!

KexS

EDIT : C'est bon j'ai trouvé comment faire! ++ ;)

Modifié par KexS
Lien vers le commentaire
Partager sur d’autres sites
KexS

KexS

Posté
  • Auteur
Posté (modifié)

Le truc c'est que je veux mettre des liens vers des pages vraiment anexes comme par exemple un formulaire où il faudra de toute façon quitter la fenêtre après le "Merci pour votre message" , ou pour agrandir une photo dans une liste de photo, alors je vais pas faire quitter le site à l'internaute alors que je suis sur qu'il voudra revenir dessus.. c'est pas mieux de faire une page qu'il fermera une fois qu'il en aura plus besoin et en dessous de laquelle il retrouvera son site adoré? :)

Modifié par KexS
Lien vers le commentaire
Partager sur d’autres sites
real34

real34

Posté
Posté

Peut-être que sur ce coup-ci dans ce cas là il peut être intéressant d'utiliser le window.open de javascript ...

Sinon, pour ce qui est du formulaire, il te suffit de rediriger le visiteur vers ta page d'accueil une fois le formulaire validé.

Lien vers le commentaire
Partager sur d’autres sites
oxerrois

oxerrois

Posté
Posté

J'avais adapté le code de ce menu sur un design, pour mon usage, si ça peut t'aider.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xml:lang="fr" lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>_________</title>

<script type="text/javascript">
<!--
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>

<style type="text/css">
.header {
background-color:#3174ac;
width:764px;
height:130px;
}

#conteneur {
position: absolute;
width:764px;
}
#centre {
width:764px;
}
a {
color:#f6b70d;
}

a:hover {
color:#FF0000;
}

body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%; /* précision pour Opera */
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background:#2d6391;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background:#2d6391;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
}
.fondcentre {
background-color:#009e01;
width:764px;
height:300px;
font-family;"Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
font-size:14px;
background-color:#3174ac;
}
.pied {
background-color:#000000;
width:764px;
height:15px;
color:#ffffff;
font-family:"Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
font-size:10px;
}
</style>
</head>
<body>
<div class="header">
</div>
<div id="conteneur">
<div id="menu">
	<dl>
		<dt onmouseover="java script:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
	</dl>
	<dl>			
		<dt onmouseover="java script:montre('smenu1');">Menu 1</dt>
			<dd id="smenu1">
				<ul>
					<li><a href="#">Sous-Menu 1.1</a></li>
					<li><a href="#">Sous-Menu 1.2</a></li>
					<li><a href="#">Sous-Menu 1.3</a></li>
					<li><a href="#">Sous-Menu 1.4</a></li>
					<li><a href="#">Sous-Menu 1.5</a></li>
					<li><a href="#">Sous-Menu 1.6</a></li>
				</ul>
			</dd>
	</dl>
	<dl>	
		<dt onmouseover="java script:montre();"><a href="">Menu 2</a></dt>
	</dl>
	<dl>	
		<dt onmouseover="java script:montre('smenu3');">Menu 3</dt>
			<dd id="smenu3">
				<ul>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.2</a></li>
					<li><a href="#">Sous-Menu 3.3</a></li>
					<li><a href="#">Sous-Menu 3.4</a></li>
					<li><a href="#">Sous-Menu 3.5</a></li>
				</ul>
			</dd>
	</dl>
	<dl>	
		<dt onmouseover="java script:montre('smenu4');">Menu 4</dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.2</a></li>
					<li><a href="#">Sous-Menu 4.3</a></li>
				</ul>
			</dd>
	</dl>
</div>
<div id="centre">
<div class="fondcentre">
</div>
</div>
<div class="pied">
 © Tous droits reservés à Pierre Matel
</div>

</div>

</body>
</html>

Bon courage

Pierre

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...