Menu

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Menu

Message par MissCindy le Jeu 2 Juin 2011 - 16:37

Bonjour,

J'ai un petit souci avec un menu. J'ai suivi un tuto mais... le résultat n'est pas comme je l'attendais. J'me suis sûrement trompé quelque part :

http://i51.tinypic.com/214wdp3.jpg

Normalement, les "menu 1" "menu2" etc doivent être collés & les sous-menu doivent apparaître au passage de la souris...

Voici le css :

Code:
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 {
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: #ccc;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#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: #eee;
}


Merci !


Dernière édition par MissCindy le Sam 11 Juin 2011 - 22:25, édité 1 fois

MissCindy
***

Féminin
Messages : 104
Inscrit(e) le : 14/07/2006

MissCindy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu

Message par SoraNoHime le Jeu 2 Juin 2011 - 16:40

Bonjour

quel tutoriel avez-vous suivi ? Normalement il vous faut un script pour faire fonctionner ceci , l'avez-vous installer ?

Cordialement.

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu

Message par MissCindy le Jeu 2 Juin 2011 - 16:49

J'ai suivi celui ci : http://forum.forumactif.com/t186834-scripts-installation-menu-deroulant

& non je n'ai rien installé. Comment faire ?

MissCindy
***

Féminin
Messages : 104
Inscrit(e) le : 14/07/2006

MissCindy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu

Message par SoraNoHime le Jeu 2 Juin 2011 - 16:54

Comme expliquer vous avez tout le code à mettre dans un widget...

Puis-je avoir le code de votre menu ? Je vous expliqueait ensuite la marche à suivre. Cordialement.

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu

Message par MissCindy le Jeu 2 Juin 2011 - 16:55

J'ai mis ça dans ma PA :

Code:
<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="url-de-renvoi" title="Retour à l'accueil">Accueil</a></dt>
</dl>


<dl>   
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
<dd id="smenu1">
<ul>
<li><a href="url-de-renvoi">blabla</a></li>
<li><a href="url-de-renvoi">blabla</a></li>
<li><a href="url-de-renvoi">blabla</a></li>
<li><a href="url-de-renvoi">blabla</a></li>
<li><a href="url-de-renvoi">blabla</a></li>
<li><a href="url-de-renvoi">blabla</a></li>
</ul>
</dd>
</dl>


<dl>   
<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
<dd id="smenu2">
<ul>
<li><a href="url-de-renvoi">blabla</a></li>
<li><a href="url-de-renvoi">blabla</a></li>
<li><a href="url-de-renvoi">blabla</a></li>
<li><a href="url-de-renvoi">blabla</a></li>
</ul>
</dd>

</dl>


<dl>   
<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
<dd id="smenu3">
<ul>
<li><a href="url-de-renvoi">blabla</a></li>
<li><a href="url-de-renvoi">blabla</a></li>
</ul>
</dd>
</dl>


<dl>   
<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
<dd id="smenu4">
<ul>
<li><a href="url-de-renvoi">blabla</a></li>
<li><a href="url-de-renvoi">blabla</a></li>
<li><a href="url-de-renvoi">blabla</a></li>
</ul>
</dd>
</dl>


</div>

MissCindy
***

Féminin
Messages : 104
Inscrit(e) le : 14/07/2006

MissCindy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu

Message par SoraNoHime le Jeu 2 Juin 2011 - 16:57

Oui donc il vous manque le script ^^

Insérez ceci avant votre tableau dans la PA

Code:
<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>

Cordialement.

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Menu

Message par MissCindy le Jeu 2 Juin 2011 - 16:58

Mercii ! Ça marche. Sauf que maintenant, mes menus sont les uns en dessous des autres. Comment faire pour qu'ils soient côté à côté ?

MissCindy
***

Féminin
Messages : 104
Inscrit(e) le : 14/07/2006

MissCindy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu

Message par SoraNoHime le Jeu 2 Juin 2011 - 17:02

Donc c'était le tuto du dessous que vous auriez du prendre ^^

Mettez ceci pour votre tableau sans changer à ce que je vous ai fourni tout à l'heure

Code:
<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="url-de-renvoi" title="Retour à l'accueil">Accueil</a></dt>
</dl>


<dl>
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
<dd id="smenu1">
<ul>
<li><a href="url-de-renvoi">Sous-Menu 1.1</a></li>
<li><a href="url-de-renvoi">Sous-Menu 1.2</a></li>
<li><a href="url-de-renvoi">Sous-Menu 1.3</a></li>
<li><a href="url-de-renvoi">Sous-Menu 1.4</a></li>
<li><a href="url-de-renvoi">Sous-Menu 1.5</a></li>
<li><a href="url-de-renvoi">Sous-Menu 1.6</a></li>
</ul>
</dd>
</dl>


<dl>
<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
<dd id="smenu2">
<ul>
<li><a href="url-de-renvoi">Sous-Menu 2.1</a></li>
<li><a href="url-de-renvoi">Sous-Menu 2.2</a></li>
<li><a href="url-de-renvoi">Sous-Menu 2.3</a></li>
<li><a href="url-de-renvoi">Sous-Menu 2.4</a></li>
</ul>
</dd>

</dl>


<dl>
<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
<dd id="smenu3">
<ul>
<li><a href="url-de-renvoi">Sous-Menu 3.1</a></li>
<li><a href="url-de-renvoi">Sous-Menu 3.2</a></li>
<li><a href="url-de-renvoi">Sous-Menu 3.3</a></li>
<li><a href="url-de-renvoi">Sous-Menu 3.4</a></li>
<li><a href="url-de-renvoi">Sous-Menu 3.5</a></li>
</ul>
</dd>
</dl>


<dl>
<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
<dd id="smenu4">
<ul>
<li><a href="url-de-renvoi">Sous-Menu 4.1</a></li>
<li><a href="url-de-renvoi">Sous-Menu 4.2</a></li>
<li><a href="url-de-renvoi">Sous-Menu 4.3</a></li>
</ul>
</dd>
</dl>


</div>

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu

Message par MissCindy le Jeu 2 Juin 2011 - 17:05

En mettant ça, j'obtiens ce que j'avais au départ.

http://i51.tinypic.com/214wdp3.jpg

MissCindy
***

Féminin
Messages : 104
Inscrit(e) le : 14/07/2006

MissCindy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu

Message par SoraNoHime le Jeu 2 Juin 2011 - 17:09

Voici nomalement tout ce que vous devriez avoir :

Dans l'emplacement choisi pour les liens :

Code:
<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>

<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
</dl>

   
<dl>         
<dt onmouseover="javascript: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="javascript:montre('smenu2');">Menu 2</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>
<li><a href="">Sous-Menu 2.4</a></li>

</ul>
</dd>

</dl>

   
<dl>   
<dt onmouseover="javascript: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="javascript: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>


et dans la css :

Code:
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 dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
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 li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}

Cela marche chez moi, pouvez vous refaire un essai avec ces codes ?

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu

Message par MissCindy le Jeu 2 Juin 2011 - 17:14

Effectivement, ça marche !
Merci beaucoup ! & dernière chose, la balise center ne fonctionne pas ?

MissCindy
***

Féminin
Messages : 104
Inscrit(e) le : 14/07/2006

MissCindy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu

Message par SoraNoHime le Jeu 2 Juin 2011 - 17:15

Vous désirez aligner le texte ou le menu ?

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu

Message par MissCindy le Jeu 2 Juin 2011 - 17:15

Le menu

MissCindy
***

Féminin
Messages : 104
Inscrit(e) le : 14/07/2006

MissCindy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu

Message par SoraNoHime le Jeu 2 Juin 2011 - 17:17

Mettez le dans un tableau à centrer ^^

Code:
    <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>

    <center><table><tr><td><div id="menu">
    <dl>
    <dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
    </dl>

     
    <dl>       
    <dt onmouseover="javascript: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="javascript:montre('smenu2');">Menu 2</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>
    <li><a href="">Sous-Menu 2.4</a></li>

    </ul>
    </dd>

    </dl>

     
    <dl> 
    <dt onmouseover="javascript: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="javascript: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></td></tr></table></center>

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu

Message par MissCindy le Jeu 2 Juin 2011 - 17:19

Ça fonctionne ! Merci beaucoup !

Edit : Dernière question (a) :
Au passage de la souris, les sous menu apparaissent. Mais comment faire pour qu'ils disparaissent aussi lorsque j'enlève la souris ?

MissCindy
***

Féminin
Messages : 104
Inscrit(e) le : 14/07/2006

MissCindy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu

Message par SoraNoHime le Jeu 2 Juin 2011 - 17:27

Normalement, ils doivent disparaitre seuls non ?

Sinon c'est un problème de script, et là ce n'est plus vraiment mon domaine. J'espère que quelqu'un d'autre pourra vous aider à ce sujet.

Bonne journée.

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu

Message par MissCindy le Jeu 2 Juin 2011 - 17:28

Non, ça ne disparaît pas...
D'accord, merci encore !

MissCindy
***

Féminin
Messages : 104
Inscrit(e) le : 14/07/2006

MissCindy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu

Message par MissCindy le Sam 4 Juin 2011 - 16:09

Petit up bounce

MissCindy
***

Féminin
Messages : 104
Inscrit(e) le : 14/07/2006

MissCindy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu

Message par MissCindy le Jeu 9 Juin 2011 - 0:39

bounce

MissCindy
***

Féminin
Messages : 104
Inscrit(e) le : 14/07/2006

MissCindy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu

Message par tupac le Jeu 9 Juin 2011 - 6:35

Bonjour

Je peux vous proposer ce menu dont les sous menu disparaissent.

Code a placer dans votre page d'accueil.
Spoiler:
Code:

 <script type="text/javascript">
      sfHover = function() {
      var sfEls = document.getElementById("menu").getElementsByTagName("LI");
      for (var i=0; i<sfEls.length; i++) {
         sfEls[i].onmouseover=function() {
            this.className+="sfhover";
         }
         sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp("sfhover\\b"), "");
         }
      }
      }
      if (window.attachEvent) window.attachEvent("onload", sfHover);
  </script>


<center><table widht="100%"><tr><td>
  <ul id="menu">

  <li>
  <a href="#">Onglet 1</a>
   <ul>
         <li><a href="#">sous menu 1</a></li>
         <li><a href="#">sous menu 2</a></li>
         <li><a href="#">sous menu 3</a></li>
         <li><a href="#">sous menu 4</a></li>
        </ul>
    </li>

  <li>
  <a href="#">Onglet 2</a>
   <ul>
         <li><a href="#">sous menu 1</a></li>
         <li><a href="#">sous menu 2</a></li>
         <li><a href="#">sous menu 3</a></li>
         <li><a href="#">sous menu 4</a></li>
        </ul>
    </li>
 
  <li>
  <a href="#">Onglet 3</a>
   <ul>
         <li><a href="#">sous menu 1</a></li>
         <li><a href="#">sous menu 2</a></li>
         <li><a href="#">sous menu 3</a></li>
         <li><a href="#">sous menu 4</a></li>
        </ul>
    </li>

  <li>
  <a href="#">Onglet 4</a>
   <ul>
         <li><a href="#">sous menu 1</a></li>
         <li><a href="#">sous menu 2</a></li>
         <li><a href="#">sous menu 3</a></li>
         <li><a href="#">sous menu 4</a></li>
        </ul>
    </li>
               
  <li>
  <a href="#">Onglet 5</a>
   <ul>
         <li><a href="#">sous menu 1</a></li>
         <li><a href="#">sous menu 2</a></li>
         <li><a href="#">sous menu 3</a></li>
         <li><a href="#">sous menu 4</a></li>
        </ul>
    </li>
  </ul>
</td></tr></table>

Puis la partie CSS a placer dans votre feuille de style.
Spoiler:
Code:
#menu, #menu ul {
   padding : 0; /* pas de marge intérieure */
   margin : 0; /* ni extérieure */
   list-style : none; /* on supprime le style par défault de la liste */
   line-height : 21px; /* on défini une hauteur pour chaque élément */
   text-align : center; /* on centre le texte qui se trouve dans la liste */
}

#menu{
   font-weight : bold; /* on met le texte en gras */
   font-family : Arial; /* on utilise Arial c'est plus beau  */
   font-size : 12px; /* hauteur du texte : 12 pixels */
}

#menu a{
   display   : block;
   padding   : 0; /* aucune marge intérieure */
   background : #005aae; /* couleur de fond */   
   color : #b1d9ff; /* couleur du texte */
   text-decoration : none; /* on supprime le style par défault des liens */
   width : 144px;
}

#menu li{
   float : left;
   /* pour ie qui ne reconnait pas "transparent" */
   border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}

/* ie ne reconnaissant pas le sélecteur ">" */
html>body #menu li{
   border-right: 1px solid transparent ; /* on met une bordure transparante à droite de chaque élément */
}

#menu li ul{  /* Sous-listes */
   position: absolute; /* Position absolu */
   width: 144px; /* Largeur des sous-listes */
   left: -999em; /* Hop, on envoi loin du champ de vision */
}

#menu li ul li{/* Eléments de sous-listes */
   /* pour ie qui ne reconnait pas "transparent" (comme précédement) */
   border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}

/* ie ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li{
   border-top : 1px solid transparent; /*met une bordure transparante en haut de chaque élément */
}

html>body #menu li ul ul{  /* ie ne reconnaissant pas le sélecteur ">" */
   border-left   : 1px solid transparent ; /*bordure transparante sur la gauche de chaque élément */
}

#menu a:hover{  /* Lorsque la souris passe sur un des liens */
   color: #005aae; /* On passe le texte en noir ... */
   background: #b1d9ff; /* ... et au contraire, le fond en blanc */
}

#menu li:hover ul{/* Sous-listes lorsque la souris passe sur un élément de liste*/
   left: auto; /* Repositionnement normal */
   min-height: 0; /* Corrige un bug */
}

tupac
+ Hyperactif +

Masculin
Messages : 2334
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu

Message par MissCindy le Sam 11 Juin 2011 - 22:25

C'est parfait ! Merci beaucoup !

MissCindy
***

Féminin
Messages : 104
Inscrit(e) le : 14/07/2006

MissCindy a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum