Sujet Précédent Sujet Suivant

HELP ME (menu)

Fermé
bowbow13 - 8 juin 2007 à 16:25
 dorot - 18 févr. 2008 à 10:11
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 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
8 juin 2007 à 17:19
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
8 juin 2007 à 16:32
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
11 juin 2007 à 09:04
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
11 juin 2007 à 09:24
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 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
11 juin 2007 à 18:25
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
12 juin 2007 à 08:51
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
18 févr. 2008 à 10:11
salut je viens de voir ton exemple comment l'appliq tu avec de frames
merci pour ta reponse
0

Discussions similaires

les entrées et les sortées
oussman -
MarsuGL -

2 réponses
mon ordi marque press the esc key for startup menu
jasonparris -
elow -

5 réponses
Accéder au menu Advanced Bios PC portable HP
Axferd -
Bill -

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

7 réponses