La Communauté Webmaster  forum rss


  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  Menu		 « Précédent Suivant »
Pages: [1] Descendre
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
  Auteur  Sujet: Menu  (Lu 1247 fois)
Menu
« sur: le 07-09-2006 a 22:35:44 »
Fidjie
Membre récent
*

Hors-Ligne

Messages: 13





Voir le Profil
Répondre avec citation

  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/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
Rapporter au modérateur  

Re:Menu
« Répondre #1 sur: le 08-09-2006 a 09:23:45 »
Netah
Modérateur Global
*****

Hors-Ligne

Sexe: Male
Messages: 1256



ZoneB.org
netah_x@yahoo.com
Voir le Profil    WWW
Répondre avec citation

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 ?
Rapporter au modérateur  
skalae.fr -  Stages photo - Blog Webmaster - Twitter TLS
Re:Menu
« Répondre #2 sur: le 08-09-2006 a 18:33:03 »
Fidjie
Membre récent
*

Hors-Ligne

Messages: 13





Voir le Profil
Répondre avec citation

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
Rapporter au modérateur  
Re:Menu
« Répondre #3 sur: le 10-09-2006 a 11:24:25 »
OKKO
Superactif
****

Hors-Ligne

Sexe: Male
Messages: 645



Gueulard Deluxe - Disponible à 25% -

Voir le Profil    WWW
Répondre avec citation

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>
« Dernière Édition: le 10-09-2006 a 11:25:14 par OKKO » Rapporter au modérateur  
" Le raffinement est chose froide "
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
Pages: [1] Monter
« Précédent Suivant »
Sauter à: 

Votre statut : Invité
Vous devez être membre pour participer.
 
 
Let’s Encrypt : le certificat SSL gratuit
Tester votre site internet sur différents navigateurs
[WordPress] Des problèmes avec l’administration ?
Rappel : Mettez à jour vos CMS et vos sites E-commerce
Le .fr fête ses 25 années d’existence !
Mesurer votre audience en temps réel avec BubbleStat
Porter réclamation contre Google Panda ?
Zlio n’est plus …
 
 
 
 
 
Logo du forum du webmaster

Copyright (c) Devclic 2002 - 2026 - Tous droits réservés

creation site internet strasbourg