HELP ME (menu)

bowbow13 -  
 dorot -
Voila je souhaiterais faire un menu soit en php, soit en css (le truc c'est que je crois qu il va falloir rajouter du java script dedans) :
Le but ca serait d avoir un menu en en-tête et lorsque la sourie passe desssus il ya une arborenscence qui descend.
Je pense qu un exemple vaudra mieux qu un long discours :
http://www.logitud.fr/public/accueil/accueil.php
ou bien
http://www.dotnetnuke.fr/(plus comme lui si c'est faisable)

Je n'ai pas envie de mettre du flash car ca augmente considérablement la place du site et ainsi son temps de chargement.

Si quelqu un peut m aider soit en m expliquant quels méthodes est la pratique ou comment, ou bien même un code source comme exemple sur lequels j étudierais.

Merci d avance j attend vos réponse avec impatience
A voir également:

7 réponses

Réponse 1 / 7
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
SALUT

voila un exemple CSS avec le js ! a toi de l adapter a ton site si c est ce que tu veux!! 

<!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 horizontal
    </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">
      <!--
      
      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%;
      }
      #menu dl {
      float: left;
      width: 12em;
      margin: 0 1px;
      }
      #menu dt {
      cursor: pointer;
      text-align: center;
      font-weight: bold;
      background: #ccc;
      border: 1px solid gray;
      }
      #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;
      height: 100%;
      border: 0 none;
      }
      #menu li a:hover, #menu dt a:hover {
      background: #eee;
      }
      
      a {text-decoration: none;
      color: black;
      color: #222;
      }
      -->
    </style>
  </head>
  <body>
    <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" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
          <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" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
          <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" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
          <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" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
          <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>
  </body>
</html>


RAD
2
Réponse 2 / 7
edevouge
 
Javascript, Php et CSS sont des technologies complémentaires. Moi je te conseil du javascript: http://www.javascriptfr.com
Puis utilise une feuille de style pour ce qui est de l'apparence.

Bon courrage!


Cordialement,

Edouard
0
Réponse 3 / 7
bowbow13
 
Merci beaucoup rad ca va etre tres utilie et surtout bien utilisé.
Si t a besoin d un coup de main n'hésite pas, je me ferais une joie de te rendre la pareille ;)
0
Réponse 4 / 7
bowbow13
 
En revanche j ai un petit probleme pour un truc que je n ai jamais réussie a faire :$.

<a href="#">
par exemple le menu que tu m a filé RAD, tu a les lien interne à la page représenté par un diez. Ce menu permet de faire la correspondance entre différentes pages. Cependant je souhaiterais faire afficher les différentes pages sans pour autant recharger le menu. En FRAME, c'est facile mais en div ou autre je n'y arrive pas.
Pourrais tu m'expliquer comment faut il faire?? (en ayant les différentes pages sous le meme dossier exemple d une page accueil.php)

merci d avance
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
SALUT 
Cependant je souhaiterais faire afficher les différentes pages sans pour autant recharger le menu. En FRAME, c'est facile mais en div ou autre je n'y arrive pas.

en html sans frame c est impossible !!!
il faut utiliser le php et des "include" pour le realiser sans frame!!!

TUTO PHP

RAD
0
Réponse 6 / 7
bowbow13
 
merci rad, c'est bon j ai reussi a me débrouiller(lol beau petit code batard en html, javascript et php lol)
0
Réponse 7 / 7
dorot
 
salut je viens de voir ton exemple comment l'appliq tu avec de frames
merci pour ta reponse
0

Discussions similaires

accéder au menu caché
Kabos -
Andy31200 -

1 réponse
menu caché
laurent -
ChariduP -

7 réponses
Comment activer le Bluetooth sur une TV Samsung ?
zaraki490 -
Marjo -

110 réponses
Mon PC marque press the esc key for startup menu
Jonas2022 -
SATS_fr -

5 réponses
Déblocage du mode hôtel Philips 20HF5234/10
Jo_3 -
TRAORE_2505 -

7 réponses