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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  creer un menu horizontal déroulant, comme sur ce site, css ou js?

 
 


 Mot :   Pseudo :  
 
 Page :   1  2
Page Suivante
Page Précédente
Bas de page 
Auteur Sujet :

creer un menu horizontal déroulant, comme sur ce site, css ou js?

n°1875267
No-fonte
Posté le 20-04-2009 à 13:56:31  profilanswer
 

bonjour a tous, je veux faire des menus déroulants comme sur le site http://www.easy-muscu.com/
mais comment ??? pour faire le machin rouge avec les bords arrondis...
avec du JS (et dans ce cas la j'utiliserais ca : <!--[if lte IE 6]><![endif]--> ) ou du css ?????
 
je cherche depuis des jours mais je en trouve pas...
 
merci d'avance

mood
Publicité
Posté le 20-04-2009 à 13:56:31  profilanswer
 

n°1875299
abais
Posté le 20-04-2009 à 14:16:37  profilanswer
 

Tu cherche mal ^^
La reponse est JS + CSS... Tu as plusieurs solutions...
Les plus "belles" se font grâce à JQuery (avis personnel)...
C'est celui que j'ai utilisé pour un site : SPAM (si tu veux voir ce que ça donne)
Dans tous les cas, je te suggère http://www.alsacreations.com ...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1875325
No-fonte
Posté le 20-04-2009 à 14:39:30  profilanswer
 

et pour faire exactement celui qu'il ya  sur le site que j'ai donné ?

Message cité 1 fois
n°1875356
abais
Posté le 20-04-2009 à 15:07:04  profilanswer
 

No-fonte a écrit :

et pour faire exactement celui qu'il ya  sur le site que j'ai donné ?


http://www.pompage.net/pompe/deroulants/
Voila, c'est exactement ça, un contenu masqué, sauf lors du survol de son parent...
Pour les bord arrondi, à toi de faire le CSS adéquat
Pour le lien que je t'ai montré, c'est exactement le meme principe, sauf que je rajoute Jquery pour ajouter un effet de transition (ici, une translation et un fondu)...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1875378
No-fonte
Posté le 20-04-2009 à 15:31:39  profilanswer
 

au niveau du css, on peut faire le machin avec les bords arrondis... ?????
moi je pensais a le faire avec toshop non ?

n°1875385
abais
Posté le 20-04-2009 à 15:38:22  profilanswer
 

Oula... Tu compare Photoshop au CSS...
Le CSS servira à mettre en forme ce que tu exporteras de photoshop... pas à le remplacer...
Fais tu bien la distinction entre HTML, CSS, Images, Textes, JS ... ?


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1875390
No-fonte
Posté le 20-04-2009 à 15:51:25  profilanswer
 

oui oui  
mais je croyasi que le cadre rouge était a creer avec photoshop

n°1875437
abais
Posté le 20-04-2009 à 17:05:58  profilanswer
 

Oui, c'est le cas, enfin, Photoshop est un peu chère pour faire un arrondi... On s'est compris..


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1875487
No-fonte
Posté le 20-04-2009 à 18:13:27  profilanswer
 

oui mais je l'ai... on s'est compris :D

n°1875520
No-fonte
Posté le 20-04-2009 à 19:14:08  profilanswer
 

meme avec ton lien je n'arrive pas :@

mood
Publicité
Posté le 20-04-2009 à 19:14:08  profilanswer
 

n°1875528
abais
Posté le 20-04-2009 à 19:36:25  profilanswer
 

C'est un forum qui à pour vocation d'être cool, mais on ne peut rien faire de plus... On ne peut pas faire plus simple que ce tuto...
-Tu connais assez bien le HTML, ses balises ?
-Tu connais assez bien le JS ? tu connais son rôle ? sa manière d'interagir sur le HTML ?
-Tu connais assez bien le CSS ?
Il faut peut-être que tu commences par apprendre les bases avant de pousser les choses...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1875531
No-fonte
Posté le 20-04-2009 à 19:39:12  profilanswer
 

html ok et css ok, j'avoue que le JS non

n°1875555
abais
Posté le 20-04-2009 à 20:16:03  profilanswer
 

Met en forme ta page avec tes bouton, et on t'aideras.
Pour ne pas faire de grosse betises, je te donnes quelques consignes :
- Tous les boutons du menu doivent être dans une div dont la taille est définie.
- Le menu doit de cette forme (à base de ul/li) :

Code :
  1. <ul id="menu">

  2.   <li><a href="#">Menu 1</a>

  3.      <ul>

  4.           <li><a href="#">Sous-menu 1-1</a></li>

  5.           <li><a href="#">Sous-menu 1-2</a></li>

  6.           <li><a href="#">Sous-menu 1-3</a></li>

  7.      </ul>

  8.   </li>

  9.   <li><a href="#">Menu 2</a>

  10.      <ul>

  11.           <li><a href="#">Sous-menu 2-1</a></li>

  12.           <li><a href="#">Sous-menu 2-2</li>

  13.           <li><a href="#">Sous-menu 2-3</li>

  14.      </ul>

  15.   </li>

  16. .....

  17. </ul>


- Designe le tout en CSS, masque les sous-menu (li>ul) et on verra comment ajouter l'interactivité en JS


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1875847
No-fonte
Posté le 21-04-2009 à 14:35:23  profilanswer
 

voila ou j'en suis :
http://playmusculation.olympe-netw [...] 0Max/site/
 
je voudrais que le sous menu soit aligné, et que tous les sous menus apparaissent dans un carré comme ca (plus ou moins long selon le nombre de sous menus)
http://yfrog.com/06sanstitre1gsgj
voici le html :

Code :
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  6. <head>
  7.      
  8.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  9.  <title>Play-musculation</title>
  10.         <link href="style.css" rel="stylesheet" type="text/css" media="screen">
  11. </head>
  12. <body>
  14.     <div id="header"><!-- DIV du Header --></div>
  15. <d
  16. </div>
  19. <div id="conteneur"><!-- DIV du Conteneur -->
  20.  <div id="menu">
  21.             <ul>
  22.                 <li><a href="#">Débutants</a></li>
  23.                 <li><a href="#">Materiel</a>
  24.             <ul>
  25.                 <li><a href="#">Banc</a></li>
  26.                 <li><a href="#">Barres</a></li>
  27.                 <li><a href="#">Fonte</a></li>
  28.             </ul>
  29.                 </li>
  30.                 <li><a href="#">Blessures</a></li>
  31.             </ul>
  32.         </div>
  34.     </div>
  35. </div>
  38. </body>
  39. </html>


 
et voici le css:

Code :
  1. body {
  2.      background:url(theme/interface/bg.png) repeat-x;
  3.  margin:0;
  4.  padding:0;
  5.  font-family:Verdana, Geneva, sans-serif;
  6.  font-size:9px;
  7.  }
  9. #header {
  10.     height:233px;
  11. background:url(theme/interface/header.png) no-repeat top center;
  13. }
  15. #conteneur{
  16.     width:990px;
  17. margin:0 auto;
  19. }
  22. #menu ul li{
  23.     list-style:none;
  24. float:left;
  25. padding:0;
  26. }
  28. #menu ul li a{
  29.     height:49px;
  30. width:130px;
  31. font-family:Segoe Script, Verdana, Arial;
  32. text-align:center;
  33. font-size:16px;
  34. font-weight:bold;
  35. text-decoration:none;
  36. text-align:center;
  37. display:block;
  38. background:url(theme/interface/menu.png)no-repeat top left;
  39. line-height:49px;
  40. color:#FFFFFF
  42. }
  44. #menu ul li ul {
  45. display:none;
  46. }
  47. #menu ul li:hover ul {
  48. display:block;
  49. }
  50. #menu li:hover ul li {
  51. float:none;
  52. }
  54. }
  55. #menu ul li a:hover{
  56. font-size:18px;
  57. color:#ad2034;
  58. }
  59. #menu li ul {
  60. position:absolute;
  61. }


n°1875873
ZeBorG
Yes we can!
Posté le 21-04-2009 à 15:13:09  profilanswer
 

Voici un exemple assez sophistiqué:
http://www.stunicholls.myby.co.uk/

n°1875899
abais
Posté le 21-04-2009 à 15:58:33  profilanswer
 

no-font, seul "materiel" contiendra un sous menu ?
D'ailleur, décale le ul/li qu'il contient, pour ne pas croire qu'il sont au même niveaux que les autres (c'est juste pour l'œil, ça donnera le meme resultat)...
Sinon, l'arrondie en haut à gauche ne sera pas esthétique...
Il faut que tu fasse le découpage de ce bloc rouge d'ailleurs, pour le rentre extensible, à moins que tous tes sous-menu contienne le même nombre de bouton...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1875901
No-fonte
Posté le 21-04-2009 à 16:04:33  profilanswer
 

eu non, tous contiendrons des sous menus, la c'est pour tester.
comment le découper pour le rendre extensible.
et apres comment l'integrer au code ?

n°1875983
No-fonte
Posté le 21-04-2009 à 19:14:07  profilanswer
 

et au fait, si il ya des tutos, j'adore ce que zeborg a passé :P

n°1875986
abais
Posté le 21-04-2009 à 19:36:23  profilanswer
 

Bah, je t'en ai donné un de tuto, ça n'a pas vraiment marcher :o


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1875994
No-fonte
Posté le 21-04-2009 à 19:58:30  profilanswer
 

pas pour ce style la, et non c an'a pas marché

Message cité 1 fois
n°1875995
abais
Posté le 21-04-2009 à 20:01:28  profilanswer
 

Apprend le HTML et le CSS qui te permettra de mettre en forme ce menu...
Normalement, le seul truc qui te bloquait, c'était l'interaction des menu...
T'as trouvé une parade avec le :hover, mais ça ne suffira pas à cause d'IE 6...
Utilise tout de même ce hover, on t'apprendra une fois que ça sera fonctionnel sur Firefox, à utiliser une autre methode universelle (qui ne changera que très peu ton code)...
Bon, j'ai peut etre abusé de te donner la contrainte de construire en UL / LI, mais je croyais que tu te demerdait bien en HTML/CSS, utilise des divs si t'es plus à l'aise, mais ça te donnera une mauvaise habitude...
Si tu fais en DIV, l'important, c'est de faire une div par bouton, qui elle meme contient la div du sous-menu (masqué, ou pas)...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1875996
abais
Posté le 21-04-2009 à 20:08:05  profilanswer
 

No-fonte a écrit :

pas pour ce style la, et non c an'a pas marché


Tu trouveras jamais un tuto pour faire exactement ce que tu trouveras sur chaque site...
mais tu trouve la methode...
Les base des menus partent souvent d'un même principe, seule les combinaisons son infinies...
Ici, le but de mon tuto est d'apprendre à changer le comportement d'une div lors d'un survol de la souris... Le site cité plus haut, c'est la même chose.
La mise en forme change.


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1876000
abais
Posté le 21-04-2009 à 20:15:30  profilanswer
 

Je viens de voir ton profil, si tu as vraiment l'age indiqué, c'est que tu n'as evidemment pas eu de formation au web... Tu apprend donc en amateur, je te suggère donc de passer par le siteduzero.com...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1876009
No-fonte
Posté le 21-04-2009 à 20:36:26  profilanswer
 

j'ai 14 ans  
et j'ai commencé par le site du zero, que ce soit pour le c++ le xhtml/css ou le php/mysql , j'ai commencé par la

n°1876019
No-fonte
Posté le 21-04-2009 à 21:00:30  profilanswer
 

J'ai réussi a foutre ca en horizontal, mais comment enlever le style, donc les onglet aux sous menus, pour ne creer que tu texte???????? (comme sur le lien de zeborg)
voici le site actuel :http://playmusculation.olympe-network.com/design/Nouveau%20dossier/
et voici le css actuel:

Code :
  1. body {
  2.      background:url(theme/interface/bg.png) repeat-x;
  3.  margin:0;
  4.  padding:0;
  5.  font-family:Verdana, Geneva, sans-serif;
  6.  font-size:9px;
  7.  }
  9. #header {
  10.     height:233px;
  11. background:url(theme/interface/header.png) no-repeat top center;
  13. }
  15. #conteneur{
  16.     width:990px;
  17. margin:0 auto;
  19. }
  22. #menu ul li{
  23.     list-style:none;
  24. float:left;
  25. padding:0;
  26. }
  28. #menu ul li a{
  29.     height:49px;
  30. width:130px;
  31. font-family:Segoe Script, Verdana, Arial;
  32. text-align:center;
  33. font-size:16px;
  34. font-weight:bold;
  35. text-decoration:none;
  36. text-align:center;
  37. display:block;
  38. background:url(theme/interface/menu.png)no-repeat top left;
  39. line-height:49px;
  40. color:#FFFFFF
  42. }
  44. #menu ul li ul {
  45. display:none;
  46. }
  47. #menu ul li:hover ul {
  48. display:block;
  49. }
  50. #menu li:hover ul li {
  51.     background:none;
  52. }
  54. #menu ul li a:hover{
  55. font-size:17px;
  56. color:#ad2034;
  57. }
  58. #menu li ul {
  59. position:absolute;
  60. }


et voici le html actuel :

Code :
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  6. <head>
  7.      
  8.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  9.  <title>Play-musculation</title>
  10.         <link href="style.css" rel="stylesheet" type="text/css" media="screen">
  11. </head>
  12. <body>
  14.     <div id="header"><!-- DIV du Header --></div>
  15. <d
  16. </div>
  19. <div id="conteneur"><!-- DIV du Conteneur -->
  20.  <div id="menu">
  21.             <ul>
  22.                 <li><a href="#">Débutants</a></li>
  23.                 <li><a href="#">Materiel</a>
  24.                     <ul>
  25.                         <li><a href="#">Banc</a></li>
  26.                         <li><a href="#">Barres</a></li>
  27.                         <li><a href="#">Fonte</a></li>
  28.                     </ul>
  29.                 </li>
  30.    <li><a href="#">Blessures</a></li>
  31.                 <li><a href="#">Programmes</a></li>
  32.    <li><a href="#">Exercices</a></li>
  33.    <li><a href="#">Nutrition</a></li>
  34.    <li><a href="#">Endurance</a></li>
  35.             </ul>
  36.         </div>
  38.     </div>
  42. </body>
  43. </html>


Message édité par No-fonte le 21-04-2009 à 21:02:02
n°1876063
abais
Posté le 21-04-2009 à 23:31:02  profilanswer
 

Dans ton CSS tu as "#menu ul li a"... c'est valable pour toutes les balises a dans les li dans #menu... Ainsi,  les <a> de ton sous menu hérite aussi de ce style... alors :
Soit tu remplace de dernier cité par "#menu>ul>li> a" ... Le > signifie "directement dans", à savoir que ce ne sera pas hérité aux enfants...
Soit tu redefini le style des sous-lien en leur donnant une classe que tu skin en CSS.
 
Par-contre, il faut savoir ce que tu veux au final... si tu veux qu'on t'aiguille !


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1876110
No-fonte
Posté le 22-04-2009 à 08:42:16  profilanswer
 

au final je veux exactement comme le lien de zeborg
c'est a dire, que ca s'écrit dans une barre en dessous, sous formes de liens, et que si la souris passe sur ces liens, ca ouvre un rectangle (comme le rouge) avec d'autres liens
 
comment redefinir le style ???


Message édité par No-fonte le 22-04-2009 à 08:42:42
n°1876126
abais
Posté le 22-04-2009 à 09:39:45  profilanswer
 

Vu que les liens du site en question ne sont pas fonctionnelles...
Pour faire la même chose fonctionnelles, il faut de l'AJAX, pour ne pas recharger la page après avoir cliqué sur un lien, et ça tu n'as le niveau...
Tu peux toujours faire la même chose, sauf que si rien n'est survolé, il n'y aura aucun sous menu affiché...
 
Mais même, de manière générale, exerce toi en commençant par le début, je ne vois pas l'intérêt de te guider sur un truc que tu ne comprendras pas... J'ai souvent le temps de débloquer les gens, mais pas assez pour leur apprendre tout. dsl.


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1876311
No-fonte
Posté le 22-04-2009 à 15:21:54  profilanswer
 

meme la meme chose ou ca apparait que lors d'un survol

n°1876463
abais
Posté le 22-04-2009 à 21:00:21  profilanswer
 

ok, je te ferais un .html commenté, mais promet moi de ne pas recopier betement ...
Essayer de comprendre mon code, monsieur qui mari un beau Quad-core avec une CM toute moche et ridée !
Au final, ça sera en PHP ou HTML ?


Message édité par abais le 22-04-2009 à 21:02:27

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1876509
No-fonte
Posté le 22-04-2009 à 22:10:22  profilanswer
 

html, j'ai marié avec la carte que j'avais avant, j'avais pas 1000 euros :P
je change progressivement
 

n°1877002
abais
Posté le 23-04-2009 à 17:25:58  profilanswer
 

Et voila, n'hesite pas à me demander pour les point que tu comprend pas, je t'expliquerai si j'ai le temps...
=> http://urfman.free.fr/fhw/menuOnglet.html

 

Bon, c'est assez moche, mais c'est pas l'important, tu fera pareil avec tes images à toi...
Le :hover du CSS faisait en sorte que l'element revenais par defaut quand on sortait la souris, je ne l'ai donc pas utilisé et tout fais en JS !


Message édité par abais le 23-04-2009 à 17:58:26

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1877005
abais
Posté le 23-04-2009 à 17:28:23  profilanswer
 

On peut aussi selectionné un menu par defaut...
Il suffit de provoquer la fonction à l'evenement "onload" du body, en inserant comme argument (le truc entre parenthèse) l'élement en question !


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1877019
abais
Posté le 23-04-2009 à 17:58:03  profilanswer
 

MAJ du fichier :)


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1877026
No-fonte
Posté le 23-04-2009 à 18:32:24  profilanswer
 

merci beaucoup, j'analyse ca :P

n°1877029
abais
Posté le 23-04-2009 à 18:50:40  profilanswer
 

et re MAJ ! (ptite erreur au commentaire et tout...)
Tu connaissais le pricipe des boucle ?
Des fonctions avec arguments ?


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1877030
No-fonte
Posté le 23-04-2009 à 18:53:50  profilanswer
 

boucles non, fonctions avec argument, heureusement qu'elles existent

n°1877031
abais
Posté le 23-04-2009 à 18:59:30  profilanswer
 

T'as tout compris donc ? je peux etre fièr de moi  ? :d


Message édité par abais le 23-04-2009 à 19:24:32

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1877033
No-fonte
Posté le 23-04-2009 à 19:08:15  profilanswer
 

^^

Citation :

fière


 
tu est une fille ?

n°1877034
abais
Posté le 23-04-2009 à 19:24:21  profilanswer
 

oups


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
mood
Publicité
Posté le   profilanswer
 

 Page :   1  2
Page Suivante
Page Précédente
Haut de page 

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

  creer un menu horizontal déroulant, comme sur ce site, css ou js?

 

Sujets relatifs
Aller chercher des informations sur un site webPrécharger mes images à l'affichage de mon site
Cherche hebergeur pas cher pour mon site internetPb navigation sur mon site - Popup intempestive "Save as"
[site internet] Quoi savoir pour créer un site pro ?creer un contenuer, il ne s'affiche pas
[resolu] images floues sur mon siteHéberger une vidéo de 3 min sur mon site
créer un plugin à partir d'un projet généré par emf 
Plus de sujets relatifs à : creer un menu horizontal déroulant, comme sur ce site, css ou js?

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.122 secondes

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