Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1448 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°373024
xkamui
Their Destiny Was Foreordained
Posté le 27-04-2003 à 03:12:57  profilanswer
 

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
mood
Publicité
Posté le 27-04-2003 à 03:12:57  profilanswer
 

n°380095
xkamui
Their Destiny Was Foreordained
Posté le 02-05-2003 à 03:41:58  profilanswer
 

help plizzz

n°380720
noizing
milk it
Posté le 02-05-2003 à 18:40:43  profilanswer
 

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

n°380828
mrbebert
Posté le 02-05-2003 à 20:36:04  profilanswer
 

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

n°380836
xkamui
Their Destiny Was Foreordained
Posté le 02-05-2003 à 20:44:56  profilanswer
 

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' ??  

n°380844
mrbebert
Posté le 02-05-2003 à 20:51:06  profilanswer
 

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

n°380869
xkamui
Their Destiny Was Foreordained
Posté le 02-05-2003 à 21:08:51  profilanswer
 

ok, j'essaye ça !!

n°382063
xkamui
Their Destiny Was Foreordained
Posté le 04-05-2003 à 22:50:02  profilanswer
 

é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
n°382070
gm_superst​ar
Appelez-moi Super
Posté le 04-05-2003 à 23:06:51  profilanswer
 

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
n°382074
xkamui
Their Destiny Was Foreordained
Posté le 04-05-2003 à 23:13:35  profilanswer
 

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
mood
Publicité
Posté le 04-05-2003 à 23:13:35  profilanswer
 

n°382077
gm_superst​ar
Appelez-moi Super
Posté le 04-05-2003 à 23:21:05  profilanswer
 

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
n°382172
xkamui
Their Destiny Was Foreordained
Posté le 05-05-2003 à 00:27:17  profilanswer
 

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 ??'

n°382270
gm_superst​ar
Appelez-moi Super
Posté le 05-05-2003 à 08:51:37  profilanswer
 

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
n°382553
xkamui
Their Destiny Was Foreordained
Posté le 05-05-2003 à 12:28:53  profilanswer
 

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 ??

n°382558
gm_superst​ar
Appelez-moi Super
Posté le 05-05-2003 à 12:49:41  profilanswer
 

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
n°382959
noizing
milk it
Posté le 05-05-2003 à 16:08:21  profilanswer
 

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
n°383241
xkamui
Their Destiny Was Foreordained
Posté le 05-05-2003 à 18:53:10  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
bouton droit desactiver le menuProbleme avec le Doctype et génération d'un menu JavaScript
[HTML] Menu en màj automatique pour page sans cadre[RESOLU][JTree][JPopupMenu] Créer un menu contextuel (clic droit)
Faire un genre de menu deroulant[HTML/JS] une pop-up menu flottant
[HTML, JS] Ouvrir une page sans menu et autre[CSS] Resize automatique de la fin de mon menu
menu js compatible ou calques[PHP] Menu et sous-menu need help [UPDATE]
Plus de sujets relatifs à : [JS] Faire un menu défilant avec des divs... (Etape 2...)


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR