Forum d'aide création graphique / [Résolu]Kit 56 : Menu déroulant.

Ari07 · 24-12-2009 01:10:37

Bonsoir.

Tout d'abord, je voudrais vous féliciter pour vos création qui sont superbes.

J'ai téléchargé le kit 56 vert et je voudrai l'adapter à mes désirs :

La première chose que je n'arrive pas à faire, ce sont des menus déroulants (je crois que ça s'appelle comme ça) qui apparaitraient lorsqu'on survole les boutons [- rubrique -] un peu comme les menus horizontaux de ce site : http://www.ardeche.fr/
Le menu déroulant serait composé d'images identiques et avec les mêmes fonctions (vert plus foncé lorsqu'on survole) à celles des menus verticaux mais plus petites bien sûr !

Voila ma première (je crains pour vous que ça ne sera pas la dernière) question. J'espère avoir été clair.

Merci de répondre simplement car je suis un parfait débutant.

Ari.

Ari07 · 30-12-2009 10:58:12

Bonjour.
J'ai trouvé ça :


<div id="conteneurmenu">
<script language="Javascript" type="text/javascript">
preChargement();
</script>
<p id="menu1" class="menu"
onmouseover="MontrerMenu('ssmenu1');"
onmouseout="CacherDelai();">
<a href="http://iubito.free.fr"
onfocus="MontrerMenu('ssmenu1');">iubito.free.fr<span> :</span></a>
</p>
<ul id="ssmenu1" class="ssmenu"
onmouseover="AnnulerCacher();"
onmouseout="CacherDelai();"
onfocus="AnnulerCacher();"
onblur="CacherDelai();">
<li>
<a href="/">Accueil<span> ;</span></a>
</li>
<li>
<a href="/livre/">Livre d'Or<span> ;</span></a>
</li>
<li>
<a href="/annu/">Annuaire<span> ;</span></a>
</li>
<li>
<a href="javascript:addFav();">Ajouter aux favoris<span>.</span></a>
</li>
</ul>

... idem avec menu2 et ssmenu2 ... et ainsi de suite ...

</div>
<div id="texte"></div>
<script language="Javascript"
type="text/javascript">Chargement();</script>

Mais je ne sais pas trop ce que je dois en faire !

Merci.

Ari.

Maude · 30-12-2009 13:11:04

Bonjour personnellement j'utilise un autre code pour les sous menus je vais vite vous le faire pour vous montrer le résultat.

Edit : voila

http://www.kitgraphiquegratuit.org/commandes/Ari07/

Ari07 · 30-12-2009 21:24:53

Bonsoir.
C'est exactement ce que je voulais !
Je fais comment pour voir le code et savoir où le placer ?
Merci beaucoup.
Ari.

Maude · 31-12-2009 07:17:03

Bonjour,

Voila le fichier css et la page index : http://www.kitgraphiquegratuit.org/comm … ign56a.rar

Si jamais vous avez déjà du contenu dans vos pages et que vous ne souhaitez pas recommencer voici les modification apportées au style.css et à la page index.html :

Dans le css rajouter ceci :

Code:

#menu, #menu ul        {padding : 0;margin : 0; list-style : none; line-height : 21px;text-align : center;}
#menu                  {font-weight : bold;font-family : Arial;font-size : 12px;}
#menu a                {display : block;height:30px;color: #FFF;text-decoration : none;line-height: 30px;width: 160px;font-weight: bold;    background: url(images/menu_h.png); outline:none}
#menu li /* Elements des listes */ {
    float : left;}/* pour ie qui ne reconnait pas "transparent" *//*border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
html>body #menu li     {border-right: 1px solid transparent;}
#menu li ul            {position: absolute; width: 160px; left: -999em; text-align:left;}
#menu li ul li         {text-align:left;border-left:#bdbdbd solid 1px;border-right:#bdbdbd solid 1px;}
#menu li ul li a       {text-align:center;outline:none;font-weight:normal;background-color:#bdbdbd;}
#menu li ul li a:hover {background-color:#bdbdbd;outline:none}
html>body #menu li ul li {border-bottom:#bdbdbd solid 1px;}
#menu li ul ul         {margin : -22px 0 0 111px; border-left : 1px solid #fff; }
html>body #menu li ul ul {border-left : 1px solid transparent;}
#menu a:hover {background: url(images/menu_h_hover.png)}
#menu li:hover ul ul, #menu li.sfhover ul ul  {left: -999em;text-align:left;padding:1px 2px;font-weight:normal;}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul{left: auto;min-height: 0;}

Dand la page index.html modifier ceci :

Code:

<div id="centrer_menu">    <!-- Début Menu -->
<table summary="" class="centre" cellpadding="0" cellspacing="0">
<tr>
<td class="centre"> 
<ul id="menuhorizon">
    <li><a href="" title="">- Rubrique -</a></li>
    <li><a href="" title="">- Rubrique -</a></li>
    <li><a href="" title="">- Rubrique -</a></li>
    <li><a href="" title="">- Rubrique -</a></li>
    <li><a href="" title="">- Rubrique -</a></li>
    <li><a href="" title="">- Rubrique -</a></li>
</ul>
</td>
</tr>
</table>
</div><!-- Fin Menu -->

par :

Code:

<div id="centrer_menu">    <!-- Début Menu -->
<table summary="" class="centre" cellpadding="0" cellspacing="0">
<tr>
<td class="centre"> 

  <ul id="menu">
      <li> <a href="#">Rubrique</a>
        <ul>
          <li><a href="#">Lien</a></li>
          <li><a href="#">Lien</a></li>
          <li><a href="#">Lien</a></li>
          <li><a href="#">Lien</a></li>
        </ul>
      </li>
      <li><a href="#">Rubrique</a>
        <ul>
          <li><a href="#">Lien</a></li>
          <li><a href="#">Lien</a></li>
          <li><a href="#">Lien</a></li>
          <li><a href="#">Lien</a></li>
        </ul>
      </li>
      <li><a href="#">Rubrique</a>
        <ul>
          <li><a href="#">Lien</a></li>
          <li><a href="#">Lien</a></li>
          <li><a href="#">Lien</a></li>
          <li><a href="#">Lien</a></li>
        </ul>
      </li>
      <li><a href="#">Rubrique</a>
        <ul>
          <li><a href="#">Lien</a></li>
          <li><a href="#">Lien</a></li>
          <li><a href="#">Lien</a></li>
          <li><a href="#">Lien</a></li>
        </ul>
      </li>
      <li><a href="#">Rubrique</a>
        <ul>
          <li><a href="#">Lien</a></li>
          <li><a href="#">Lien</a></li>
          <li><a href="#">Lien</a></li>
          <li><a href="#">Lien</a></li>
        </ul>
      </li>
      <li><a href="#">Rubrique</a>
        <ul>
          <li><a href="#">Lien</a></li>
          <li><a href="#">Lien</a></li>
          <li><a href="#">Lien</a></li>
          <li><a href="#">Lien</a></li>
        </ul>
      </li>
</ul>
</td>
</tr>
</table>
    
</div><!-- Fin Menu -->

Ari07 · 31-12-2009 14:09:16

Bonjour.
Tout fonctionne à merveille ! Merci pour votre aide et votre patience.
Une autre question : Lorsque j'ouvre ma page avec IE7, il s'affiche ceci en haut de ma page : "Pour vous aider à protéger votre ordinateur, Internet Explorer a restreint l’exécution des scripts ou des contrôles ActiveX de cette page Web qui pourraient accéder à votre ordinateur." Que faire ?
Merci encore.
Ari.

Maude · 01-01-2010 09:48:52

Bonjour

c'est surement du au contenu que vous avez intégré au kit.

Bonne Année

Ari07 · 01-01-2010 20:13:26

Bonsoir et bonne année.

Ce n'est pas ce que j'ai ajouté car lorsque j'ouvre le kit 56 original, j'ai le même message.
Mais ce n'est pas grave ; peut-être que j'ai mal réglé la sécurité.

Merci pour votre aide.

Ari.

#1 24-12-2009 01:10:37

[Résolu]Kit 56 : Menu déroulant.

#2 30-12-2009 10:58:12

Re: [Résolu]Kit 56 : Menu déroulant.

#3 30-12-2009 13:11:04

Re: [Résolu]Kit 56 : Menu déroulant.

#4 30-12-2009 21:24:53

Re: [Résolu]Kit 56 : Menu déroulant.

#5 31-12-2009 07:17:03

Re: [Résolu]Kit 56 : Menu déroulant.

Code:

Code:

Code:

#6 31-12-2009 14:09:16

Re: [Résolu]Kit 56 : Menu déroulant.

#7 01-01-2010 09:48:52

Re: [Résolu]Kit 56 : Menu déroulant.

#8 01-01-2010 20:13:26

Re: [Résolu]Kit 56 : Menu déroulant.

Pied de page des forums