Menu déroulant - Programmation
TomsGuide.com : 700 000 inscrits répondent à toutes vos questions high-tech et informatique.
Pour obtenir de l'aide, inscrivez-vous gratuitement !
 

Ajouter une réponse



Mot :   Pseudo :  
 
Bas de page
Auteur
 Sujet : Menu déroulant
 
VirtuAiles
Profil : IDNaute
Plus d'informations
n°53497
26-02-2006 à 23:45:53

Bonjour à tous,

J'ai fait un menu déroulant (le code est plus bas) et je voudrais l'aligner à gauche. Comment faire ?

Voici le code.

Code :
  1. <style type="text/css">
  2. body{
  3.     font-family: sans-serif;
  4.     padding-left:5%;
  5.     padding-right:5%;
  6. }
  7. #logo{
  8.     font-size:2em;
  9.     border-bottom:1px dotted silver;
  10.     color:silver;
  11. }
  12. #myMenu{
  13.     float:right;
  14.     width:20%;
  15. }
  16. #content{
  17.     float:left;
  18.     width:70%;
  19.     font-size:0.8em
  20. }
  21. h3{
  22.     margin-top:0;
  23. }
  24. p{
  26. }
  27. #copyright{
  28.     clear:both;
  29.     border-top:1px solid silver;
  30.     margin-top:20px;
  31.     text-align:right;
  32.     padding-right:5px;
  33.     font-size:0.5em;
  34. }
  35. /* menu styles */
  36. li.myMenu0{
  37.     margin:0;
  38.     padding:0;
  39.     list-style : none;
  40. }
  41. a.myMenu0{
  42.     display:block;
  43.     position:relative;
  44.     background-color:white;
  45.     padding:3px;
  46.     text-decoration:none;
  47.     color:Navy;
  48.     border:1px solid blue;
  49.     margin-top:10px;
  50. }
  51. </style>
  52. </head>
  53. <body>
  54. <div align="left">
  55.   <ul id="myMenu">
  56.       <li><a href="#">
  57.         Menu
  58.     </a>        <ul>
  59.         <!-- NOTE: No space between A tag and UL or IE will make space between the elements -->
  60.                 <li><a href="http://virtuailes.iquebec.com">Accueil</a></li>
  61.                 <li><a href="http://virtuailes.iquebec.com/avianews.php">News Aéronautiques</a></li>
  62.                 <li><a href="http://virtuailes.iquebec.com/index2.php">News du site</a></li>
  63.                 <li><a href="http://galerie.virtuailes.iquebec.com/">Galerie</a></li>
  64.                 <li><a href="http://virtuailes.iquebec.com/connexion.php">Connexion</a></li>
  65.         </ul>
  66.     </li>
  67.         <li>
  68.      
  69.         <a href="#">Contenu</a>
  70.               <ul>
  71.                 <li><a href="http://virtuailes.iquebec.com/script/engine.php">Recherche Interne</a></li>
  72.                 <li><a href="http://virtuailes.iquebec.com/google.php">Recherche Google</a></li>
  73.                 <li><a href="http://virtuailes.iquebec.com/dossiers.php">Dossiers</a></li>
  74.                 <li><a href="http://virtuailes.iquebec.com/creations.php">Créations</a></li>
  75.                 <li><a href="http://virtuailes.iquebec.com/fichiers.php">Téléchargements</a></li>
  76.                 <li><a href="http://galerie.virtuailes.iquebec.com/">Galerie</a></li>
  77.                 <li><a href="http://virtuailes.iquebec.com/privacypolicy.php">Copyright</a></li>
  78.           </ul>
  79.     </li>
  80.         <li>
  81.           <a href="#">Communauté</a>
  82.           <ul>
  83.               <li><a href="http://client0.sigmachat.com/sc.pl?id%3d133784">Chat</a></li>
  84.                 <li><a href="http://139968.aceboard.fr/index.php">Forum</a></li>
  85.                 <li><a href="http://virtuailes.iquebec.com/liens.php">Liens</a></li>
  86.                 <li><a href="http://virtuailes.iquebec.com/contact.php">Nous Contacter</a></li>
  87.                 <li><a href="http://vote.weborama.fr/fcgi-bin/vote.fcgi?206750">Voter au Weborama</a></li>
  88.           </ul>
  89.     </li>
  90.         <li>
  91.           <a href="#">Forum</a>
  92.           <ul>
  93.               <li><a href="http://139968.aceboard.fr/139968-867-0-Annonces.htm">Annonces</a></li>
  94.                 <li><a href="http://139968.aceboard.fr/139968-1443-0-Bistrot.htm">Le Bistrot</a></li>
  95.                 <li><a href="http://139968.aceboard.fr/139968-863-0-Sondages.htm">Sondages</a></li>
  96.                 <li><a href="http://139968.aceboard.fr/139968-1686-0-Actualite.htm">Actualité</a></li>
  97.                 <li><a href="http://139968.aceboard.fr/139968-1662-0-Dossiers.htm">Dossiers</a></li>
  98.                 <li><a href="http://139968.aceboard.fr/139968-1436-0-rapport-avec-aviation.htm">En rapport avec l'aviation</a></li>
  99.                 <li><a href="http://139968.aceboard.fr/139968-866-0-Site-VirtuAiles.htm">Le Site VirtuAiles</a></li>
  100.                 <li><a href="http://139968.aceboard.fr/139968-1434-0-Questions-Techniques.htm">Questions Techniques</a></li>
  101.                 <li><a href="http://139968.aceboard.fr/139968-864-0-Media-Photos-Video.htm">Média/Photos/Vidéo</a></li>
  102.                 <li><a href="http://139968.aceboard.fr/139968-1444-0-connais-veux-vous-dire.htm">Je connais... et je veux vous dire</a></li>
  103.                 <li><a href="http://139968.aceboard.fr/139968-1435-0-Questions-Generales.htm">Questions Générales</a></li>
  104.                 <li><a href="http://139968.aceboard.fr/139968-1283-0-Liens-proposer.htm">Liens à proposer</a></li>
  105.                 <li><a href="http://139968.aceboard.fr/139968-1457-0-Debats.htm">Débats</a></li>
  106.                 <li><a href="http://139968.aceboard.fr/139968-1871-0-Reserve-Inscrits.htm">Réservé aux Inscrits</a></li>
  107.           </ul>
  108.     </li>
  109.         <li>
  110.           <a href="#">Dossiers</a>
  111.           <ul>
  112.               <li><a href="http://virtuailes.iquebec.com/avro_arrow_introduction.php">L'Avro CF-105 Arrow</a></li>
  113.                 <li><a href="http://virtuailes.iquebec.com/f35.php">Le F/A-35 JSF</a></li>
  114.                 <li><a href="http://virtuailes.iquebec.com/sr71family.php">La famille Blackbird</a></li>
  115.                 <li><a href="http://virtuailes.iquebec.com/constr.php">Le DHC-2 Beaver</a></li>
  116.                 <li><a href="http://virtuailes.iquebec.com/constr.php">Le BA CSeries</a></li>
  117.                 <li><a href="http://virtuailes.iquebec.com/constr.php">Le Convair B-58 Hustler</a></li>
  118.           </ul>
  119.     </li>
  120.         <li>
  121.           <a href="#">Téléchargements</a>
  122.           <ul>
  123.               <li><a href="http://virtuailes.iquebec.com/telechargements_videos.php">Vidéos</a></li>
  124.                 <li><a href="http://virtuailes.iquebec.com/telechargements_diaporammas.php">Diaporamas</a></li>
  125.                 <li><a href="http://virtuailes.iquebec.com/telechargements_photos.php">Photos</a></li>
  126.                 <li><a href="http://virtuailes.iquebec.com/telechargements_documents.php">Documents</a></li>
  127.                 <li><a href="http://virtuailes.iquebec.com/telechargements_autres.php">Autres</a></li>
  128.           </ul>
  129.     </li>
  130.         <li>
  131.       </ul>
  132.   <script type="text/javascript">
  133. // <![CDATA[
  134. function loopElements(el,level){
  135.     for(var i=0;i<el.childNodes.length;i++){
  136.         //We only want LI nodes:
  137.         if(el.childNodes[i] && el.childNodes[i]["tagName"] && el.childNodes[i].tagName.toLowerCase() == "li" ){
  138.             //Ok we have the LI node - let's give it a className
  139.             el.childNodes[i].className = "myMenu"+level
  140.             //Let's look for the A and if it has child elements (another UL tag)
  141.             childs = el.childNodes[i].childNodes
  142.             for(var j=0;j<childs.length;j++){
  143.                 temp = childs[j]
  144.                 if(temp && temp["tagName"]){
  145.                     if(temp.tagName.toLowerCase() == "a" ){
  146.                         //We found the A tag - set class
  147.                         temp.className = "myMenu"+level
  148.                         //Adding click event
  149.                         temp.onclick=showHide;
  150.                     }else if(temp.tagName.toLowerCase() == "ul" ){
  151.                         //Hide sublevels
  152.                         temp.style.display = "none"
  153.                         //Set class
  154.                         temp.className= "myMenu"+level
  155.                         //Recursive - calling it self with the new found element
  156.                         //to go all the way through the three.
  157.                         loopElements(temp,level +1)
  158.                     }
  159.                 }
  160.             }
  161.         }
  162.     }
  163. }
  165. var menu = document.getElementById("myMenu" ) //Get menu div
  166. menu.className="myMenu"+0 //Set class to the top level
  167. loopElements(menu,0) //Call the function
  169. function showHide(){
  170.     //We have a A tag - need to go to the LI tag to check for UL tags:
  171.     el = this.parentNode
  172.     //Loop for UL tags:
  173.     for(var i=0;i<el.childNodes.length;i++){
  174.         temp = el.childNodes[i]
  175.         if(temp && temp["tagName"] && temp.tagName.toLowerCase() == "ul" ){
  176.             //Check status:
  177.             if(temp.style.display=="none" ){
  178.                 temp.style.display = ""
  179.             }else{
  180.                 temp.style.display = "none"
  181.             }
  182.         }
  183.     }
  184.     return false
  185. }
  186. // ]]>
  187. </script>



Merci de votre aide!

VirtuAiles

Liens sponsorisés


Inscrivez-vous ou connectez-vous pour masquer ceci.

VirtuAiles
Profil : IDNaute
Plus d'informations
n°53500
27-02-2006 à 00:13:29

Note: J'ai totalement changé mon message après quelques modifications.

VirtuAiles
Profil : IDNaute
Plus d'informations
n°53501
27-02-2006 à 00:21:47

De plus, les liens sont faits mais il ne se passe rien lorsqu'on clique dessus.

Merci!

VirtuAiles
Profil : IDNaute
Plus d'informations
n°53613
27-02-2006 à 23:46:34

:confused:

JarAsh
Profil : IDNaute
Plus d'informations
n°53636
28-02-2006 à 09:20:50

pour le mettre à gauche :

Code :
  1. #myMenu{
  2.     position:absolute;
  3.     top:0;
  4.     left:0;
  5.     width:20%;
  6. }

Aller à :
Ajouter une réponse
 
  FORUM Infos-du-Net » Programmation » Menu déroulant

Plan du forum
Forum MesDiscussions.Net, Version 2007.1.2
© 2000-2007 No1Dev
Page générée en 0.303 secondes
Liens