Partage
  • Partager sur Facebook
  • Partager sur Twitter

[Javascript et CSS] mon menu déroulant ne fonctionne pas

Tallulah
    15 janvier 2009 à 14:12:38


    Hello,


    Je m'appelle Audrey, j'ai 24 ans et je voudrais faire une menu déroulant en javascript.
    Seulement je me suis complètement perdu dans mes scripts jss et css, car mon menu est placé de façon circulaire et donc ça complique le code.
    Mon objectif est qu'au passage de chaque logo, un menu apparaisse, dans un rectangle un peu décalé en bas et à droite par rapport au logo, et qu'il contienne des liens.
    Il faut que quand on stoppe le survol du logo, le menu disparaisse.

    J'avais mis des listes, mais finalement j'ai opté pour un div; pour l'instant j'ai tenté le code que sur mon premier logo.

    J'aimerais avoir un coup de main, pour que ça marche, et optimiser le code.

    Je vous montre mon code.
    Merci d'avance

    <html>
<head>
	<title>Site_menu</title>
	<link rel="stylesheet" media="screen" type="text/css" title="DesignCSS" href="DesignCSS2.css"/>

<script type="text/javascript" language="javascript">


var v_dernier = '1';

function f_activer(v_div) {
	document.getElementById("nav").style.display = "none" ;
	document.getElementById("lien").style.backgroundColor = "white";
	

	
	v_dernier = v_div ;
	
}
function f_desactiver(v_div) {
	document.getElementById("nav").style.display = "none" ;
	document.getElementById("lien").style.backgroundColor = "red";
}

</script>	
		

	
</head>
<body>



<div id="global">

	<h1><a href="vert.html"><img src="Photos/wow.jpg" alt="image" class="img" align="right"/></a>
	</h1><br />


	<div id="contenu">



	<div id="boite1" class="nav">
		<a id="lien" href="#" onmouseover="f_activer('1')" onmouseout="f_desactiver('1');"></a> <!-- SUD PTT-->
		<div id="menu1">
			<div class="lienblock"><a href="vert.html">Lien 1a</a></div>
			<div class="lienblock"><a href="vert.html">Lien 1b</a></div>
			
		</div>
	</div>
	

  <li><a id="lien2" href="#"></a></li> <!-- SUD EDUC-->
  <li><a id="lien3" href="#"></a></li><!-- SUD RAIL-->
  <li><a id="lien4" href="#"></a></li><!-- SNUI-->
  <li><a id="lien5" href="#"></a></li><!-- SUD CHIMIE-->
  <li><a id="lien6" href="#"></a></li><!-- SUD CAN-->
  <li><a id="lien7" href="#"></a></li>  <!-- SUD TRAVAIL-->
  <li><a id="lien8" href="#"></a></li><!-- SUD FPA-->

</div>
	<div class="menu_fixe">
		<p><a href="" title="">Lien1</a> | <a href="" title="">Lien2</a> | <a href="" title="">Lien3</a></p>
	</div>

	<div class="pied_de_page">
   <p><a href="Conditions_dutilisation" title="lire les termes">Conditions d'utilisation</a> ¤ <a href="plandusite.html" title="plan du site">Plan du site</a> ¤ 
   Copyright "SUD AFPA" 2008 ¤ Audrey Carpentier </p>
	</div> 
	
	
</div>
</div>
</body>
</html>


    et le CSS: 
    #global { 
	width:1200px;   /* largeur */
	height:800px;   /* hauteur*/
	background-image: url("Photos/fond2.jpg");/* Image de fond*/ 
	/*background-repeat:no-repeat;      /* Pour que l'image ne soit pas en mosaïque*/
	margin-left: -600px;   /* mettre à la moitié de la largeur*/
	left: 50%;  /* au milieu*/
	position: absolute ; /*déclarée en position "absolute" afin de pouvoir positionner nos elements de menu au pixel près */
}

 #contenu {
position:relative;
list-style:none; 

padding: 0px;
margin: 0px;
	
/* On définie la largeur et la hauteur de la balise en fonction des dimensions de l'image de fond	*/
width:450px;
height:489px;
margin-left: -225px;   /* mettre à la moitié de la largeur*/
margin-top: 80px ;
left: 50%;
	
background: url("Photos/fond32.png") no-repeat;/* On definit le background de la balise */
}


#contenu a {

  position:absolute; 
  display:block;
	
  text-decoration:none;/* On supprime le soulignement par défaut des liens */
	
 /* On definie les valeurs typographiques du texte de la balise */
  font: bold 9px Calibri,Arial,Helvetica,sans-serif;
  color:#000000;
}




/** LE CAS PAR CAS **/

#boite1 {          /*SUD PTT*/
top: 100px; 
left: 150px; 
padding: 10px 0px 0px 10px;   /*padding-top padding-right padding-bottom padding-left*/
background: url(Photos/wow.jpg) no-repeat;   /* On redéfinie le background de la balise */
background-position: 0px 0px 0px 100px;
display:block;
 
}

#boite1:hover {
  top:190px;   /* Lors du survol de la balise, la portion de background visible sera plus importante, on modifie donc la proriété top et left de la balise */
  left:120px;
  background: url(wow2.jpg) no-repeat; /* On redéfinie le background de la balise */
  width:135px;  /* Dans le cas spécifique de cet element de menu, la largeur est inférieur à celle normalement prévue */
  padding: 14px 0px 0px 15px;  /* La taille du texte et de l'image de fond etant différant, il faut modifier le décalage du texte*/
}

#menu1 {			/*SUD PTT*/
	display:none;
  /*background: url(Photos/wow2.jpg) no-repeat; /* On redéfinie le background de la balise 
  *width:135px;  /* Dans le cas spécifique de cet element de menu, la largeur est inférieur à celle normalement prévue 
  *padding: 14px 0px 0px 15px;  /* La taille du texte et de l'image de fond etant différant, il faut modifier le décalage du texte */

}



/* Il ne reste plus qu'à répéter ces opérations pour chaque element de menu individuel */

#lien2 {    /*SUD EDUC  */
  top:-50px;
  left:150px;
  background: url(Photos/wow.jpg) no-repeat;
  padding: 7px 0px 0px 34px;
}

#lien2:hover {    /*SUD EDUC  */
  top:-50px;
  left:150px;
  padding: 10px 0px 0px 48px;
  background: url(Photos/wow2.jpg) no-repeat;
}

#lien3 {   /*SUD RAIL */
  top:70px;
  left:500px;
  /*padding: 7px 0px 0px 34px;*/
  background: url(Photos/sud_rail.jpg) no-repeat;
  	width:140px;
	height:75px;
}

#lien3:hover {   /*SUD RAIL */
  top:70px;
  left:500px;
  /*padding: 10px 0px 0px 48px;*/
  background: url(Photos/sud_rail.jpg) no-repeat;

}

#lien4 {     /*SNUI */
  top:300px;
  left:600px;
  /*padding: 7px 0px 0px 34px;*/
  background: url(Photos/snui.jpg) no-repeat;
    width:140px;
	height:97px;
}

#lien4:hover {  /*SNUI */
  top:300px;
  left:600px;
  /*padding: 10px 0px 0px 48px;*/
  background: url(Photos/snui.jpg) no-repeat;
}

#lien5 {   /*SUD CHIMIE*/
  top:500px;
  left:480px;
  padding: 10px 0px 0px 10px;
  background: url(Photos/wow.jpg) no-repeat;
}

#lien5:hover {    /*SUD CHIMIE*/
  top:500px;
  left:480px;
  padding: 14px 0px 0px 45px;
  background: url(Photos/wow2.jpg) no-repeat;
}

#lien6 {     /*SUD CAN */
  top:600px;
  left:150px;
  padding: 7px 0px 0px 34px;
  background: url(Photos/wow.jpg) no-repeat;
}

#lien6:hover {   /*SUD CAN */
  top:600px;
  left:150px;
  padding: 10px 0px 0px 48px;
  background: url(Photos/wow2.jpg) no-repeat;
}

#lien7 {     /*SUD TRAVAIL*/
  top:450px;
  left:-30px;
  /*padding: 7px 0px 0px 34px;*/
  background: url(Photos/sud_tas.jpg) no-repeat;
  	width:127px;
	height:88px;
}

#lien7:hover {   /*SUD TRAVAIL*/
  top:450px;
  left:-30px;
  /*padding: 10px 0px 0px 48px;*/
  background: url(Photos/sud_tas.jpg) no-repeat;
}

#lien8 {     /*SUD FPA*/
  top:300px;
  left:-185px;
  padding: 7px 0px 0px 34px;
  background: url(Photos/wow.jpg) no-repeat;
}

#lien8:hover {   /*SUD FPA*/
  top:300px;
  left:-185px;
  padding: 10px 0px 0px 48px;
  background: url(Photos/wow2.jpg) no-repeat;
}


.pied_de_page
{
	margin-top: 200px;
	padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
	text-align: center;
	color: #A48040;
	font-size: 70%;
	border: 1px solid black;
}

.menu_fixe
{
	margin-top: 0px;
	padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
	text-align: center;
	color: #A48040;
	font-size: 70%;
}



    :)
    • Partager sur Facebook
    • Partager sur Twitter
    Anonyme
      15 janvier 2009 à 17:58:02

      yop je vois rien. Pas d'image ni rien, tu l'as pas en ligne quelque part? Ça serait plus simple
      • Partager sur Facebook
      • Partager sur Twitter
      Tallulah
        15 janvier 2009 à 21:24:42

        salut,

        effectivement sans images..j'ai mis les fichiers en ligne sur http://tallulahakin.hostarea.org/
        Je précise que j'ai pas conçu de charte graphique encore, j'ai pris les photos que j'avais sous la main le temps de coder, donc normal si c'est super moche ^^
        • Partager sur Facebook
        • Partager sur Twitter
        xavierm02
        • Javascript
          15 janvier 2009 à 23:50:38

          en ne regardant que ça, j'ai pas compris ton code js...
          function f_activer(v_div) {
	document.getElementById("nav").style.display = "none" ;
	document.getElementById("lien").style.backgroundColor = "white";
	

	
	v_dernier = v_div ;
	
}
function f_desactiver(v_div) {
	document.getElementById("nav").style.display = "none" ;
	document.getElementById("lien").style.backgroundColor = "red";
}

          à quoi sert v_div dans function f_desactiver(v_div) vu qu'il n'est pas utilisé?
          pourquoi tu mets toujours document.getElementById("nav").style.display = "none" ;? il en faudrait pas un avec un display='block' ou display='inline'?

          PS: je répond sans avoir vraiment regardé le code... donc ne t'énerves pas si ça ne t'aide en aucun point je reviendrais répondre correctement demain si le grand no_ ne m'a pas précédé...
          grand nod_ dont je ne comprends d'ailleurs pas toujours la logique... voire lien
          • Partager sur Facebook
          • Partager sur Twitter
          loderunner
            16 janvier 2009 à 0:03:00

            Une amatrice de wow ?? :-°
            Sinon, bon, je vais pas tout coder lol
            mais voilà l'idée:
            Il faut, pour chacun des icônes, récupérer la position X et Y et donner ces coords au menu lors du survol (onmouseover) avec un visibility="visible"
            dès que tu quitte l'icône (onmouseout) tu met le visibility à "hidden"
            Pas plus compliqué que çà...
            Et comme tes menu ne sont pas "organisés" les mettre en "position: absolute"
            Ca fait toujours plaisir de répondre à une jolie fille :p

            • Partager sur Facebook
            • Partager sur Twitter
            Anonyme
              16 janvier 2009 à 0:31:29

              bande de fayots… :p

              dans l'absolu y'a moyen en css uniquement, voir le tuto pour les hover personalisés dans les tutos html/css. Ça risque d'etre plus simple que js en passant.

              ( edit ) genre ça: http://www.cssplay.co.uk/menus/circular.html
              • Partager sur Facebook
              • Partager sur Twitter
              Tallulah
                16 janvier 2009 à 14:15:47

                Salut,

                Merci de vos réponses,
                à force de bidouiller, j'ai laissé 2 none et j'ai oublié de remettre "inline, ou block" dans la fonction js,
                Bref je vais bosser ça ce week-end, et je vous tiens au courant ^^

                ;)
                • Partager sur Facebook
                • Partager sur Twitter
                Tallulah
                  20 janvier 2009 à 16:22:37

                  Re,

                  Alors comme c'est le bordel dans mon script j'ai décidé de travailler séparément le js et le css.
                  Pour l'instant je bosse sur la fonction javascript, j'ai supprimé la mise en forme et dès que ça sera ok je m'occuperai du CSS.
                  J'ai changé quelques trucs dans le js, je pense que c'est mieux qu'avant mais ça ne marche toujours pas :s
                  Je vous montre.

                  <lien url=" http://tallulahakin.hostarea.org/"></lien>

                  <html>
<head>
    <title>Javascript</title>

<script type="text/javascript" language="javascript">


var v_dernier = '1';

function f_activer(v_div) {   
    document.getElementById("menu" + v_dernier).style.visibility = "visible";
    document.getElementById("menu" + v_dernier).style.display = "block";
    v_dernier = v_div ;
   
}
function f_desactiver(v_div) {
    document.getElementById("menu" + v_dernier).style.visibility = "hidden";
    v_dernier = v_div ;
}

var v_dernier = '1';



</script>   
       
<style>
    #menu {
        position:absolute;
        /*display:none;*/
visibility: hidden;       
    }
   
    .menus {
        float:left;
        background-color:red;       

/*display:none;*/
visibility: hidden;
    }


</style>
   
</head>
<body>


<div id="global">

<h1><a href="vert.html"><img src="Photos/wow.jpg" alt="image" class="img" align="right"/></a></h1><br />


<div id="contenu">


    <div id="rubrique">
        <div id="lien1" class="navs" onmouseover="f_activer('1')" onmouseout="f_desactiver();">LIEN 1</div> <!-- SUD PTT-->
        <div id="lien2" class="navs" onmouseover="f_activer('2')" onmouseout="f_desactiver();">LIEN 2</div>    <!-- SUD EDUC-->
        <div id="lien3" class="navs" onmouseover="f_activer('3')" onmouseout="f_desactiver();">LIEN 3</div>    <!-- SUD RAIL-->
        <div id="lien4" class="navs" onmouseover="f_activer('4')" onmouseout="f_desactiver();">LIEN 4</div>    <!-- SNUI-->
        <div id="lien5" class="navs" onmouseover="f_activer('5')" onmouseout="f_desactiver();">LIEN 5</div>    <!-- SUD CHIMIE-->
        <div id="lien6" class="navs" onmouseover="f_activer('6')" onmouseout="f_desactiver();">LIEN 6</div>    <!-- SUD CAN-->
        <div id="lien7" class="navs" onmouseover="f_activer('7')" onmouseout="f_desactiver();">LIEN 7</div>    <!-- SUD TRAVAIL-->
        <div id="lien8" class="navs" onmouseover="f_activer('8')" onmouseout="f_desactiver();">LIEN 8</div>    <!-- SUD FPA-->
    </div>
                    <div id="menu">
                                <div id="menu1" class="menus">
                                    <div class="lienblock"><a href="vert.html" class="lien">Lien 1a</a></div>
                                    <div class="lienblock"><a href="vert.html" class="lien">Lien 1b</a></div>
                                </div>   
                                <div id="menu2" class="menus">
                                    <div class="lienblock"><a href="vert.html" class="lien">Lien 2a</a></div>
                                    <div class="lienblock"><a href="vert.html" class="lien">Lien 2b</a></div>
                                </div>   
                                <div id="menu3" class="menus">
                                    <div class="lienblock"><a href="vert.html" class="lien">Lien 3a</a></div>
                                    <div class="lienblock"><a href="vert.html" class="lien">Lien 3b</a></div>
                                </div>
                                <div id="menu4" class="menus">
                                    <div class="lienblock"><a href="vert.html" class="lien">Lien 4a</a></div>
                                    <div class="lienblock"><a href="vert.html" class="lien">Lien 4b</a></div>
                                </div>
                                <div id="menu5" class="menus">
                                    <div class="lienblock"><a href="vert.html" class="lien">Lien 5a</a></div>
                                    <div class="lienblock"><a href="vert.html" class="lien">Lien 5b</a></div>
                                </div>
                                <div id="menu6" class="menus">
                                    <div class="lienblock"><a href="vert.html" class="lien">Lien 6a</a></div>
                                    <div class="lienblock"><a href="vert.html" class="lien">Lien 6b</a></div>
                                </div>
                                <div id="menu7" class="menus">
                                    <div class="lienblock"><a href="vert.html" class="lien">Lien 7a</a></div>
                                    <div class="lienblock"><a href="vert.html" class="lien">Lien 7b</a></div>
                                </div>
                                <div id="menu8" class="menus">
                                    <div class="lienblock"><a href="vert.html" class="lien">Lien 8a</a></div>
                                    <div class="lienblock"><a href="vert.html" class="lien">Lien 8b</a></div>
                                </div>
                    </div>
</div>

<br />   
<div class="menu_fixe">
        <p><a href="" title="">Lien1</a> | <a href="" title="">Lien2</a> | <a href="" title="">Lien3</a></p>
</div>

<div class="pied_de_page">
        <p><a href="Conditions_dutilisation" title="lire les termes">Conditions d'utilisation</a> ¤ <a href="plandusite.html" title="plan du site">Plan du site</a> ¤
   Copyright "SUD AFPA" 2008 ¤ Audrey Carpentier </p>
</div>
</div>

</body>
</html>
                  • Partager sur Facebook
                  • Partager sur Twitter
                  xavierm02
                  • Javascript
                    20 janvier 2009 à 17:46:34

                    c'est pas encore ça...
                    bref:
                    <html>
<head>
    <title>Javascript</title>

<script type="text/javascript" language="javascript">


var v_dernier = '1';

function f_activer(v_div) {   
    document.getElementById("menu" + v_div).style.visibility = "visible";
    document.getElementById("menu" + v_div).style.display = "block";
    f_desactiver(v_dernier);
	v_dernier = v_div ;
}
function f_desactiver(v_div) {
    document.getElementById("menu" + v_div).style.visibility = "hidden";
    v_dernier = v_div ;
}

var v_dernier = '1';



</script>   
       
<style>
    #menu {
        position:absolute;
        /*display:none;*/
visibility: hidden;       
    }
   
    .menus {
        float:left;
        background-color:red;       

/*display:none;*/
visibility: hidden;
    }


</style>
   
</head>
<body>


<div id="global">

<h1><a href="vert.html"><img src="Photos/wow.jpg" alt="image" class="img" align="right"/></a></h1><br />


<div id="contenu">


    <div id="rubrique">
        <div id="lien1" class="navs" onmouseover="f_activer('1')" onmouseout="f_desactiver();">LIEN 1</div> <!-- SUD PTT-->
        <div id="lien2" class="navs" onmouseover="f_activer('2')" onmouseout="f_desactiver();">LIEN 2</div>    <!-- SUD EDUC-->
        <div id="lien3" class="navs" onmouseover="f_activer('3')" onmouseout="f_desactiver();">LIEN 3</div>    <!-- SUD RAIL-->
        <div id="lien4" class="navs" onmouseover="f_activer('4')" onmouseout="f_desactiver();">LIEN 4</div>    <!-- SNUI-->
        <div id="lien5" class="navs" onmouseover="f_activer('5')" onmouseout="f_desactiver();">LIEN 5</div>    <!-- SUD CHIMIE-->
        <div id="lien6" class="navs" onmouseover="f_activer('6')" onmouseout="f_desactiver();">LIEN 6</div>    <!-- SUD CAN-->
        <div id="lien7" class="navs" onmouseover="f_activer('7')" onmouseout="f_desactiver();">LIEN 7</div>    <!-- SUD TRAVAIL-->
        <div id="lien8" class="navs" onmouseover="f_activer('8')" onmouseout="f_desactiver();">LIEN 8</div>    <!-- SUD FPA-->
    </div>
                    <div id="menu">
                                <div id="menu1" class="menus">
                                    <div class="lienblock"><a href="vert.html" class="lien">Lien 1a</a></div>
                                    <div class="lienblock"><a href="vert.html" class="lien">Lien 1b</a></div>
                                </div>   
                                <div id="menu2" class="menus">
                                    <div class="lienblock"><a href="vert.html" class="lien">Lien 2a</a></div>
                                    <div class="lienblock"><a href="vert.html" class="lien">Lien 2b</a></div>
                                </div>   
                                <div id="menu3" class="menus">
                                    <div class="lienblock"><a href="vert.html" class="lien">Lien 3a</a></div>
                                    <div class="lienblock"><a href="vert.html" class="lien">Lien 3b</a></div>
                                </div>
                                <div id="menu4" class="menus">
                                    <div class="lienblock"><a href="vert.html" class="lien">Lien 4a</a></div>
                                    <div class="lienblock"><a href="vert.html" class="lien">Lien 4b</a></div>
                                </div>
                                <div id="menu5" class="menus">
                                    <div class="lienblock"><a href="vert.html" class="lien">Lien 5a</a></div>
                                    <div class="lienblock"><a href="vert.html" class="lien">Lien 5b</a></div>
                                </div>
                                <div id="menu6" class="menus">
                                    <div class="lienblock"><a href="vert.html" class="lien">Lien 6a</a></div>
                                    <div class="lienblock"><a href="vert.html" class="lien">Lien 6b</a></div>
                                </div>
                                <div id="menu7" class="menus">
                                    <div class="lienblock"><a href="vert.html" class="lien">Lien 7a</a></div>
                                    <div class="lienblock"><a href="vert.html" class="lien">Lien 7b</a></div>
                                </div>
                                <div id="menu8" class="menus">
                                    <div class="lienblock"><a href="vert.html" class="lien">Lien 8a</a></div>
                                    <div class="lienblock"><a href="vert.html" class="lien">Lien 8b</a></div>
                                </div>
                    </div>
</div>

<br />   
<div class="menu_fixe">
        <p><a href="" title="">Lien1</a> | <a href="" title="">Lien2</a> | <a href="" title="">Lien3</a></p>
</div>

<div class="pied_de_page">
        <p><a href="Conditions_dutilisation" title="lire les termes">Conditions d'utilisation</a> ¤ <a href="plandusite.html" title="plan du site">Plan du site</a> ¤
   Copyright "SUD AFPA" 2008 ¤ Audrey Carpentier </p>
</div>
</div>

</body>
</html>


                    pourquoi tu mets un display:block?
                    à part ça, tu pourrais faire un peux plus "automatique" en donnant l'id de ce qui contient les menus et celui de ce qui contient les liens à une fonction qui rajoute un truk direct à chaque lien pour qu'il active une div...(que tu mets en window.onload)... ça éviterais plein d'id inutiles...
                    • Partager sur Facebook
                    • Partager sur Twitter
                    Tallulah
                      23 janvier 2009 à 23:16:01

                      J'ai bien bossé et j'ai résolu le problème javascript, j'ai fais ça finalement: 
                      function f_activer(v_id) {   
		document.getElementById(v_id).style.visibility = "visible";
	}
	function f_desactiver(v_id) {
		document.getElementById(v_id).style.visibility = "hidden";
	}


                      et dans le html: 
                      <div id="lien1" class="navs" onmouseover="f_activer('menu1')" onmouseout="f_desactiver('menu1');"></div>
        <div id="lien2" class="navs" onmouseover="f_activer('menu2')" onmouseout="f_desactiver('menu2');"></div>
                      etc.

                      J'ai refais le CSS à part, il me reste qu'à bosser la charte graphique et les problèmes de compatibilité avec ie (que c'est chiant!).
                      J'ai remis le link après a: (a:link) car j'ai remarqué que sans ça mes liens ne se colorait pas de la couleur que j'avais défini (ils restaient en bleu)
                      :)
                      Merci à vous,
                      • Partager sur Facebook
                      • Partager sur Twitter

                      [Javascript et CSS] mon menu déroulant ne fonctionne pas

                      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                      × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                      • Editeur ●
                      • Markdown