Menu déroulant

Dernière réponse : 28 Février 2006 08:20 dans Programmation

virtuailes

26 Février 2006 22: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.

<style type="text/css">

body{

	font-family: sans-serif;

	padding-left:5%;

	padding-right:5%;

}

#logo{

	font-size:2em;

	border-bottom:1px dotted silver;

	color:silver;

}

#myMenu{

	float:right;

	width:20%;

}

#content{

	float:left;

	width:70%;

	font-size:0.8em

}

h3{

	margin-top:0;

}

p{

 
}

#copyright{

	clear:both;

	border-top:1px solid silver;

	margin-top:20px;

	text-align:right;

	padding-right:5px;

	font-size:0.5em;

}

/* menu styles */

li.myMenu0{

	margin:0;

	padding:0;

	list-style : none;

}

a.myMenu0{

	display:block;

	position:relative;

	background-color:white;

	padding:3px;

	text-decoration:none;

	color:Navy;

	border:1px solid blue;

	margin-top:10px;

}

</style>

</head>

<body>

<div align="left">

  <ul id="myMenu">

      <li><a href="#">

        Menu

    </a>        <ul>

        <!-- NOTE: No space between A tag and UL or IE will make space between the elements -->

		        <li><a href="<a href="http://virtuailes.iquebec.com" target="_blank">http://virtuailes.iquebec.com</a>">Accueil</a></li>

		        <li><a href="<a href="http://virtuailes.iquebec.com/avianews.php" target="_blank">http://virtuailes.iquebec.com/avianews.php</a>">News Aéronautiques</a></li>

		        <li><a href="<a href="http://virtuailes.iquebec.com/index2.php" target="_blank">http://virtuailes.iquebec.com/index2.php</a>">News du site</a></li>

		        <li><a href="<a href="http://galerie.virtuailes.iquebec.com/" target="_blank">http://galerie.virtuailes.iquebec.com/</a>">Galerie</a></li>

		        <li><a href="<a href="http://virtuailes.iquebec.com/connexion.php" target="_blank">http://virtuailes.iquebec.com/connexion.php</a>">Connexion</a></li>

        </ul>

    </li>

	    <li>

 
		<a href="#">Contenu</a>

		      <ul>

		        <li><a href="<a href="http://virtuailes.iquebec.com/script/engine.php" target="_blank">http://virtuailes.iquebec.com/script/engine.php</a>">Recherche Interne</a></li>

		        <li><a href="<a href="http://virtuailes.iquebec.com/google.php" target="_blank">http://virtuailes.iquebec.com/google.php</a>">Recherche Google</a></li>

		        <li><a href="<a href="http://virtuailes.iquebec.com/dossiers.php" target="_blank">http://virtuailes.iquebec.com/dossiers.php</a>">Dossiers</a></li>

		        <li><a href="<a href="http://virtuailes.iquebec.com/creations.php" target="_blank">http://virtuailes.iquebec.com/creations.php</a>">Créations</a></li>

		        <li><a href="<a href="http://virtuailes.iquebec.com/fichiers.php" target="_blank">http://virtuailes.iquebec.com/fichiers.php</a>">Téléchargements</a></li>

		        <li><a href="<a href="http://galerie.virtuailes.iquebec.com/" target="_blank">http://galerie.virtuailes.iquebec.com/</a>">Galerie</a></li>

		        <li><a href="<a href="http://virtuailes.iquebec.com/privacypolicy.php" target="_blank">http://virtuailes.iquebec.com/privacypolicy.php</a>">Copyright</a></li>

          </ul>

    </li>

	    <li>

	      <a href="#">Communauté</a>

	      <ul>

	          <li><a href="<a href="http://client0.sigmachat.com/sc.pl?id%3d133784" target="_blank">http://client0.sigmachat.com/sc.pl?id%3d133784</a>">Chat</a></li>

		        <li><a href="<a href="http://139968.aceboard.fr/index.php" target="_blank">http://139968.aceboard.fr/index.php</a>">Forum</a></li>

		        <li><a href="<a href="http://virtuailes.iquebec.com/liens.php" target="_blank">http://virtuailes.iquebec.com/liens.php</a>">Liens</a></li>

		        <li><a href="<a href="http://virtuailes.iquebec.com/contact.php" target="_blank">http://virtuailes.iquebec.com/contact.php</a>">Nous Contacter</a></li>

		        <li><a href="<a href="http://vote.weborama.fr/fcgi-bin/vote.fcgi?206750" target="_blank">http://vote.weborama.fr/fcgi-bin/vote.fcgi?206750</a>">Voter au Weborama</a></li>

          </ul>

    </li>

	    <li>

	      <a href="#">Forum</a>

	      <ul>

	          <li><a href="<a href="http://139968.aceboard.fr/139968-867-0-Annonces.htm" target="_blank">http://139968.aceboard.fr/139968-867-0-Annonces.htm</a>">Annonces</a></li>

		        <li><a href="<a href="http://139968.aceboard.fr/139968-1443-0-Bistrot.htm" target="_blank">http://139968.aceboard.fr/139968-1443-0-Bistrot.htm</a>">Le Bistrot</a></li>

		        <li><a href="<a href="http://139968.aceboard.fr/139968-863-0-Sondages.htm" target="_blank">http://139968.aceboard.fr/139968-863-0-Sondages.htm</a>">Sondages</a></li>

		        <li><a href="<a href="http://139968.aceboard.fr/139968-1686-0-Actualite.htm" target="_blank">http://139968.aceboard.fr/139968-1686-0-Actualite.htm</a>">Actualité</a></li>

		        <li><a href="<a href="http://139968.aceboard.fr/139968-1662-0-Dossiers.htm" target="_blank">http://139968.aceboard.fr/139968-1662-0-Dossiers.htm</a>">Dossiers</a></li>

		        <li><a href="<a href="http://139968.aceboard.fr/139968-1436-0-rapport-avec-aviation.htm" target="_blank">http://139968.aceboard.fr/139968-1436-0-rapport-avec-av...</a>">En rapport avec l'aviation</a></li>

		        <li><a href="<a href="http://139968.aceboard.fr/139968-866-0-Site-VirtuAiles.htm" target="_blank">http://139968.aceboard.fr/139968-866-0-Site-VirtuAiles....</a>">Le Site VirtuAiles</a></li>

		        <li><a href="<a href="http://139968.aceboard.fr/139968-1434-0-Questions-Techniques.htm" target="_blank">http://139968.aceboard.fr/139968-1434-0-Questions-Techn...</a>">Questions Techniques</a></li>

		        <li><a href="<a href="http://139968.aceboard.fr/139968-864-0-Media-Photos-Video.htm" target="_blank">http://139968.aceboard.fr/139968-864-0-Media-Photos-Vid...</a>">Média/Photos/Vidéo</a></li>

		        <li><a href="<a href="http://139968.aceboard.fr/139968-1444-0-connais-veux-vous-dire.htm" target="_blank">http://139968.aceboard.fr/139968-1444-0-connais-veux-vo...</a>">Je connais... et je veux vous dire</a></li>

		        <li><a href="<a href="http://139968.aceboard.fr/139968-1435-0-Questions-Generales.htm" target="_blank">http://139968.aceboard.fr/139968-1435-0-Questions-Gener...</a>">Questions Générales</a></li>

		        <li><a href="<a href="http://139968.aceboard.fr/139968-1283-0-Liens-proposer.htm" target="_blank">http://139968.aceboard.fr/139968-1283-0-Liens-proposer....</a>">Liens à proposer</a></li>

		        <li><a href="<a href="http://139968.aceboard.fr/139968-1457-0-Debats.htm" target="_blank">http://139968.aceboard.fr/139968-1457-0-Debats.htm</a>">Débats</a></li>

		        <li><a href="<a href="http://139968.aceboard.fr/139968-1871-0-Reserve-Inscrits.htm" target="_blank">http://139968.aceboard.fr/139968-1871-0-Reserve-Inscrit...</a>">Réservé aux Inscrits</a></li>

          </ul>

    </li>

	    <li>

	      <a href="#">Dossiers</a>

	      <ul>

	          <li><a href="<a href="http://virtuailes.iquebec.com/avro_arrow_introduction.php" target="_blank">http://virtuailes.iquebec.com/avro_arrow_introduction.p...</a>">L'Avro CF-105 Arrow</a></li>

		        <li><a href="<a href="http://virtuailes.iquebec.com/f35.php" target="_blank">http://virtuailes.iquebec.com/f35.php</a>">Le F/A-35 JSF</a></li>

		        <li><a href="<a href="http://virtuailes.iquebec.com/sr71family.php" target="_blank">http://virtuailes.iquebec.com/sr71family.php</a>">La famille Blackbird</a></li>

		        <li><a href="<a href="http://virtuailes.iquebec.com/constr.php" target="_blank">http://virtuailes.iquebec.com/constr.php</a>">Le DHC-2 Beaver</a></li>

		        <li><a href="<a href="http://virtuailes.iquebec.com/constr.php" target="_blank">http://virtuailes.iquebec.com/constr.php</a>">Le BA CSeries</a></li>

		        <li><a href="<a href="http://virtuailes.iquebec.com/constr.php" target="_blank">http://virtuailes.iquebec.com/constr.php</a>">Le Convair B-58 Hustler</a></li>

          </ul>

    </li>

	    <li>

	      <a href="#">Téléchargements</a>

	      <ul>

	          <li><a href="<a href="http://virtuailes.iquebec.com/telechargements_videos.php" target="_blank">http://virtuailes.iquebec.com/telechargements_videos.ph...</a>">Vidéos</a></li>

		        <li><a href="<a href="http://virtuailes.iquebec.com/telechargements_diaporammas.php" target="_blank">http://virtuailes.iquebec.com/telechargements_diaporamm...</a>">Diaporamas</a></li>

		        <li><a href="<a href="http://virtuailes.iquebec.com/telechargements_photos.php" target="_blank">http://virtuailes.iquebec.com/telechargements_photos.ph...</a>">Photos</a></li>

		        <li><a href="<a href="http://virtuailes.iquebec.com/telechargements_documents.php" target="_blank">http://virtuailes.iquebec.com/telechargements_documents...</a>">Documents</a></li>

		        <li><a href="<a href="http://virtuailes.iquebec.com/telechargements_autres.php" target="_blank">http://virtuailes.iquebec.com/telechargements_autres.ph...</a>">Autres</a></li>

          </ul>

    </li>

	    <li>

      </ul>

  <script type="text/javascript">

// <![CDATA[

function loopElements(el,level){

	for(var i=0;i<el.childNodes.length;i++){

		//We only want LI nodes:

		if(el.childNodes[i] && el.childNodes[i]["tagName"] && el.childNodes[i].tagName.toLowerCase() == "li"){

			//Ok we have the LI node - let's give it a className

			el.childNodes[i].className = "myMenu"+level

			//Let's look for the A and if it has child elements (another UL tag)

			childs = el.childNodes[i].childNodes

			for(var j=0;j<childs.length;j++){

				temp = childs[j]

				if(temp && temp["tagName"]){

					if(temp.tagName.toLowerCase() == "a"){

						//We found the A tag - set class

						temp.className = "myMenu"+level

						//Adding click event

						temp.onclick=showHide;

					}else if(temp.tagName.toLowerCase() == "ul"){

						//Hide sublevels

						temp.style.display = "none"

						//Set class

						temp.className= "myMenu"+level

						//Recursive - calling it self with the new found element

						//to go all the way through the three.

						loopElements(temp,level +1) 

					}

				}

			}	

		}

	}

}

 
var menu = document.getElementById("myMenu") //Get menu div

menu.className="myMenu"+0 //Set class to the top level

loopElements(menu,0) //Call the function

 
function showHide(){

	//We have a A tag - need to go to the LI tag to check for UL tags:

	el = this.parentNode

	//Loop for UL tags:

	for(var i=0;i<el.childNodes.length;i++){

		temp = el.childNodes[i]

		if(temp && temp["tagName"] && temp.tagName.toLowerCase() == "ul"){

			//Check status:

			if(temp.style.display=="none"){

				temp.style.display = ""

			}else{

				temp.style.display = "none"	

			}

		}

	}

	return false

}

// ]]>

</script>

Merci de votre aide!

VirtuAiles

Autres pages sur : menu deroulant

| Etre averti des réponses
| Alerter

Répondre à virtuailes

Lassé par la pub ? Créez un compte

virtuailes

26 Février 2006 23:13:29

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

| Alerter

Répondre à virtuailes

virtuailes

26 Février 2006 23:21:47

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

Merci!

| Alerter

Répondre à virtuailes

virtuailes

27 Février 2006 22:46:34

:confused:

| Alerter

Répondre à virtuailes

JarAsh

28 Février 2006 08:20:50

pour le mettre à gauche :

#myMenu{

    position:absolute;

	top:0;

	left:0;

    width:20%;

}

| Alerter

Répondre à JarAsh

Lassé par la pub ? Créez un compte

Créer un nouveau sujet

Contenus similaires :

Tags :

silver

Tom's guide dans le monde