Titre: Menu
Posté par: Fidjie le le 07-09-2006 a 22:35:44
J'ai refais le design de mon site ce qui veut dire nouvelle harmonie donc nouveau menu.
Mon menu horizontal est la base des menus, qui en se déroulant dévoile des catégories, ces catérogies dérivent sur de sous-catégories puis des articles (le thème est très riche).
Mes exigeances étant que les menus doivent être accessibles, simples, pratiques, dynamiques et à portées de main (frames, j'aimerais éviter l'effet labyrinthe).
Pour vous faire une idée, voici un schéma:
menu
menu
-catégorie
-catégorie
-sous-catégorie
-article
-article
menu
-catégorie
etc.
L'i-frame de gauche (lien du site plus bas) doit contenir un menu-modèle (sous-catégorie), seul le contenu et les liens changeraient, jusqu'ici vous me suivez?^^
Mon souci est que j'ai trouvé deux menus qui me conviendraient bien, mon but étant de les combiner...
Le premier est du Css, l'autre aussi d'ailleurs, ou du javascript (j'suis pas très calée en langage :-\)
Liens des menus
http://css.alsacreations.com/modelesmenus/g01.htm (http://css.alsacreations.com/modelesmenus/g01.htm)
http://css.alsacreations.com/modelesmenus/vd1.htm (http://css.alsacreations.com/modelesmenus/vd1.htm)
Avez-vous une idée pour m'aider à réaliser le menu de mes rêves?
Merci pour vos idées et astuces.
Lien du site
equisis.new.fr (http://equisis.new.fr) |
Titre: Re:Menu
Posté par: Netah le le 08-09-2006 a 09:23:45
Les cours de Raphael (Sibelius) sont tres bien fait, je ne vois pas bien ce que tu demandes de plus en fait ?
Si ces menus te conviennent, que te manque-t-il ? |
Titre: Re:Menu
Posté par: Fidjie le le 08-09-2006 a 18:33:03
J'aimerais trouver une solution qui les combine en modifiant le code, j'aimerais une image mappée, la souris passe dessus, opacité de la cellule, puis par un clique, déroule les sous-menus (l'image mappée se prolonge).
J'ai déjà mis une image de base, superposée d'un masque, comme ce menu:
http://css.alsacreations.com/modelesmenus/g01.htm
Je me débrouille comme je peux pour tout ce qui est html, css et javascript, je n'arriverais pas à superposer les deux codes.
equisis.new.fr |
Titre: Re:Menu
Posté par: OKKO le le 10-09-2006 a 11:24:25
salut
pour avoir une image en rollOver comme sur http://css.alsacreations.com/modelesmenus/g01.htm
il faut que tu changes les propriétés des background de http://css.alsacreations.com/modelesmenus/vd1.htm#
en gros comme ça (tu peux faire un copier coller ) et il te faut l'image "newsletter.jpg" que colle a la rcine du fichier
Code:
<!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" xml:lang="fr" lang="fr">
<head>
<title>Menu déroulant vertical</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
window.onload=montre;
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">
/* CSS issu des tutoriels css.alsacreations.com */
<!--
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;
}
#menu {
width: 15em;
}
#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: transparent url(newsletter.jpg) top left no-repeat; /* arrière-plan général du menu */
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: transparent url(newsletter.jpg) top left no-repeat; /* arrière-plan général du menu */
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu dt a:hover {
background: transparent url(newsletter.jpg) 0% -327px no-repeat; /* arrière-plan général du menu */
}
.mentions {
position: absolute;
top : 300px;
left : 10px;
color: #000;
background-color: #ddd;
}
-->
</style>
</head>
<body>
<dl id="menu">
<dt onclick="javascript:montre();"><a href="#">Menu 1</a></dt>
<dt onclick="javascript:montre('smenu2');"><a href="#">Menu 2</a></dt>
<dd id="smenu2">
<ul>
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
</ul>
</dd>
<dt onclick="javascript:montre('smenu3');"><a href="#">Menu 3</a></dt>
<dd id="smenu3">
<ul>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
</ul>
</dd>
<dt onclick="javascript:montre('smenu4');"><a href="#">Menu 4</a></dt>
<dd id="smenu4">
<ul>
<li><a href="#">Sous-Menu 4.1</a></li>
<li><a href="#">Sous-Menu 4.1</a></li>
</ul>
</dd>
</dl>
<div class="mentions">Raphaël GOETTER<br />
<a href="http://www.alsacreations.com">Alsacréations</a><br />
<a href="http://css.alsacreations.com/Galeries-de-menus-en-CSS">Retour</a></div>
</body>
</html>
|
|
|
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|