[JS] Faire un menu défilant avec des divs... (Etape 2...)

Faire un menu défilant avec des divs... (Etape 2...) [JS] - HTML/CSS - Programmation

Marsh Posté le 27-04-2003 à 03:12:57    

voilà, ce ci va reprendre le précédent post éffacé, amis par étape, histoire que je comprenne bien...
 
étape 1 :
 
Créer 2 div en position relative/absolue, dont l'un est le contenant de l'autre.
le premier div contient le titre du menu, le second contient les sous menus ; comme suit :  
 

Code :
  1. <div id="div1">
  2. Menu 1
  3. <div id="div2">
  4. SMenu 1-1<br />
  5. SMenu 1-2<br />
  6. SMenu 1-3<br />
  7. </div>
  8. </div>


 
alors premières questions : comment je fait en sorte que les div soit en position relative ou absolue et comment je fait pour que les sous menu ne sois pas visible tout en forçant la taille de 'div1' ne prenne pas en compte, dans la hauteur de celui-ci, la taille que prend le texte des sous-menus de 'div2' ??
 
Merci @ tous et @+


Message édité par xkamui le 04-05-2003 à 22:50:36
Reply

Marsh Posté le 27-04-2003 à 03:12:57   

Reply

Marsh Posté le 02-05-2003 à 03:41:58    

help plizzz

Reply

Marsh Posté le 02-05-2003 à 18:40:43    

up de soutien ça m'interresse aussi et ya pas de tuto sur les sites que j'ai visités... :bounce:

Reply

Marsh Posté le 02-05-2003 à 20:36:04    

Ce que tu veux faire, c'est un menu avec des sous menus qui peuvent s'ouvrir et se fermer ?

Reply

Marsh Posté le 02-05-2003 à 20:44:56    

voilà à peut près ce que je veux faire :  
 
en mode normal :
http://xkamui.com.free.fr/divers/hfr/normal.png
 
on mouse over :
http://xkamui.com.free.fr/divers/hfr/over.png
 
mais je voudrais déjà savoir comment je fait en sorte que les div soit en position relative ou absolue et comment je fait pour que les sous menu ne sois pas visible tout en forçant la taille de 'div1' ne prenne pas en compte, dans la hauteur de celui-ci, la taille que prend le texte des sous-menus de 'div2' ??  

Reply

Marsh Posté le 02-05-2003 à 20:51:06    

Pour afficher/cacher, il suffit de modifier la propriété de stype 'display' et de la passer de 'block' à 'none'.
 
Pour le positionnement, c'est la propriété 'position' :
http://www.allhtml.com/css/css401.php?ret=index.php

Reply

Marsh Posté le 02-05-2003 à 21:08:51    

ok, j'essaye ça !!

Reply

Marsh Posté le 04-05-2003 à 22:50:02    

étape 2 :
 
ok, alors, une petite mise à jour su topic !!
 

  • j'ai réussis donc à mettre un div 'div1' et à placer, dedans, un autre div 'div2' en position absolute, ce qui me permet d'avoir mon menu 'div2' hors de mon 'div1' et mon 'div1' qui prend la place d'une ligne sans compter les lignes suivantes.


  • J'ai réussis à créer un autre div 'div3' et à placer dedans un div 'div4' qui lui est en position relative, et il s'affiche bien en dessous.


voici les codes :

Code :
  1. <style>
  2. .div-menu  {width: 170px; text-align: center; padding: 10px; border: 1px solid #999;}
  3. .div-mamn  {width: 150px; text-align: left; padding-left: 5px; border: 1px solid #000; font: 12px Verdana; color: #369;}
  4. .div-ssmn1 {width: 140px; text-align: left; padding-left: 10px; font: 12px Verdana; color: #963; position: absolute; top: -100px; left: 30px;}
  5. .div-ssmn2 {width: 140px; text-align: left; padding-left: 10px; font: 12px Verdana; color: #963; position: relative; top: 0px; left: 0px;}
  6. </style>
  7. <div id="div1" class="div-mamn">
  8.   Menu 1
  9.  
  10.   <div id="div2" class="div-ssmn1">
  11.    SMenu 1-1<br />
  12.    SMenu 1-2<br />
  13.    SMenu 1-3<br />
  14.   </div>
  15.  
  16. </div>
  17. <div id="div3" class="div-mamn">
  18.   Menu 2
  19.  
  20.   <div id="div4" class="div-ssmn2">
  21.    SMenu 2-1<br />
  22.    SMenu 2-2<br />
  23.    SMenu 2-3<br />
  24.   </div>
  25.  
  26. </div>


 
J'aimerais dinc passer à l'étape 2 qui est de faire défiler le 'div2' vers le bas pour agrandir le 'div1' et ainsi montrer mon menu, sur un onmouseover, ou sur un onclick.


Message édité par xkamui le 04-05-2003 à 22:50:51
Reply

Marsh Posté le 04-05-2003 à 23:06:51    

Ben dans ton div1 tu rajoutes un truc du style :
 

onmouseover="document.getElementById('div2').style.display='block';"


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 04-05-2003 à 23:13:35    

oui, ça j'avais à peu près compris, le système de display et block.
 
la subtilité de ce que je veux faire résidans le le fait de faire 'glisser' le sous menu vers le bas en 'étirant' le 'div1'... (cf l'image)


Message édité par xkamui le 04-05-2003 à 23:15:51
Reply

Marsh Posté le 04-05-2003 à 23:13:35   

Reply

Marsh Posté le 04-05-2003 à 23:21:05    

Ca c'est plus compliqué et je te conseille de regarder comment font les scripts similaires.
 
En gros il faut faire une boucle qui à chaque passage va augmenter la taille de ton div2 jusqu'à sa taille maxi.
 
Essaye déjà ça. On verra ensuite pour la finition.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 05-05-2003 à 00:27:17    

c'est un script 'qui va augmenter la taille de ton div2 jusqu'a sa taille maxi' ou  'qui va faire descendre mon div2 jusqu'a sa position finale ??'

Reply

Marsh Posté le 05-05-2003 à 08:51:37    

Heu je n'ai pas été clair ? Le plus simple est d'augmenter progressivement la taille de div2. Ca suffira à décaler les autres DIV qui sont en dessous (enfin il ne faut pas utiliser le positionnement absolu)


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 05-05-2003 à 12:28:53    

ok, admettons que j'agrandisse la taille de mon 'div2', si je comprend bien ce que tu veux faire c'est
agrandir le 'div2' et quand il à atteins sa taille maxi, en afficher le contenu ??

Reply

Marsh Posté le 05-05-2003 à 12:49:41    

Par exemple. Ou alors afficher tout de suite le texte mais avec une bonne propriété d'overflow pour éviter qu'il ne sorte du cadre.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 05-05-2003 à 16:08:21    

continue le topic ! moi meme j'essaye de creer un menu flottant  :love:


---------------
tu passes a perpignan? viens voir un concert !!! http://www.elmediator.org
Reply

Marsh Posté le 05-05-2003 à 18:53:10    

vi vi, je continu, mais j'essaye aussi de travailler... dur dur dur...

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed