AccueilCodesTutorielsForumsEmploiLivresConnexion

  • Javascript / Ajax / DHTML CodeS-SourceS
  • RSS CodeS-SourceS
  • CodyxBot, le Bot GTalk & MSN qu'il vous faut !
  • Générez des revenus avec vos codes, scripts et tutoriaux
  • Aide à la navigation du site
begin process at 2008 11 20 11:22:58
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

MENU MULTI-NIVEAUX HORIZONTAL/VERTICAL


Information sur la source

Catégorie :Menu & Co Classé sous : menu, multiniveaux, horizontal, vertical Niveau : Débutant Date de création : 12/03/2006 Date de mise à jour : 24/04/2006 07:49:26 Vu / téléchargé: 23 128 / 6 093
Auteur : bultez Site perso
Ecrire un message privé
Ce membre participe au partage de revenus publicitaires
Note :
7,4 / 10 - par 10 personnes
7,40 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Commentaire sur cette source (48)
Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale
un menu multi-niveaux.
le plus simple possible pour être facilement adaptable.
Horizontal / Vertical.

 

Conclusion

j'ai hésité à mettre ce menu ici, mais comme il est
multi-niveaux et qu'il n'y en a pas tant que cela...
( horizontal, et très peu de choses
  à faire en CSS pour le rendre vertical )
testé avec Internet Explorer, FireFox, Opera. Les autres : faut voir !
il me semble extrèmement simple :
essentiellement en HTML <UL> <LI> <A HREF>, un peu de CSS, et
très très peu de JavaScript.

 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Historique

24 avril 2006 07:49:26 :
des commentaires pour mettre ce menu vertical et/ou le laisser en haut de page si Scrolling.

Commentaires et avis

signaler à un administrateur
Commentaire de Myke le 20/03/2006 22:42:36

Je ne connais rien du css. Que faut-il changer pour le rendre vertical?

signaler à un administrateur
Commentaire de bultez le 21/03/2006 06:53:21


#Menu
{ width:128px; /* largeur 1ère ligne */
...
#Menu ul li
{ float:none;
display:block;
left:80px; /* ajustements horizontaux des sous-menus 1er niveau */
top:-20px;
...
#Menu ul li ul
{float:none;
position:absolute;
left:8px;/* ajustements horizontaux des sous-menus niveaux suivants */
/* ajustements verticaux des sous-menus niveaux suivants */
...

par exemple...
même sans connaître le CSS ( et ici c'est assez simple ),
avec les commentaires et quelques essais/ajustements...

signaler à un administrateur
Commentaire de bg62 le 28/03/2006 10:51:00

YES !!! après pas mal d'efforts et surtout avec vos conseils, le script fonctionne à merveille et SURTOUT IL EST RAPIDE !!!
vous pouvez le voir à l'adresse suivante:
http://www.unesourisetmoi.info
et si qq uns pouvaient tester cela avec d'autres navigateurs ou prendre aussi le temps de parcourir le site pour me signaler des erreurs ce serait le top !
encore chapeau et merci d'avance à tous ceux qui pourront aussi nous aider à le peauffiner encore plus
bg

signaler à un administrateur
Commentaire de bg62 le 10/04/2006 07:32:08

c'est vrai que ce menu fonctionne à merveille, surtout d'une grande facilité lorsquonveut ajouter des pages ... mais il bloque sur certaine pages qui contiennent un autre script en java ...
ex : http://www.unesourisetmoi.info et aller sur: liens+/contacts  le script de l'horloge semble bloquer le menu qui a parfois du mal à redémarrer ou fait changer qq couleurs pour les liens ... alors : SOS !
merci

signaler à un administrateur
Commentaire de bg62 le 10/04/2006 07:35:00

comment faire pour qu'il reste toujours visible en haut de l'écran lorsque l'on déroule une page assez longue ? là je coince !
à voir sur
http://www.unesourisetmoi.info
merci pour tout renseignement
b g

signaler à un administrateur
Commentaire de bultez le 10/04/2006 07:43:31

>>mais il bloque sur certaines pages qui contiennent
>>un autre script en javascript
j'ai essayé, et ça ne bloque pas pour moi.
cependant ce script horloge est très gourmand et peut ralentir.

signaler à un administrateur
Commentaire de bultez le 10/04/2006 07:47:19

>>comment faire pour qu'il reste toujours visible en haut
>>de l'écran lorsque l'on déroule une page assez longue
il faut "repositionner" le menu avec
        document.body.scrollLeft et .scrollTop ( pour IE )

signaler à un administrateur
Commentaire de mohi138 le 12/04/2006 14:23:04

bg62 pour ton ptit probleme je te conseil d'essayer en css
postion:fixed; pour que ton menu soit toujour visible
j'ai vu ton site bravo pour les fond d'eran et tous ca

signaler à un administrateur
Commentaire de bg62 le 13/04/2006 09:51:20

j'ai lancé un sos et voici qq réponses reçues
(je ne mets pas les félicitations, car le menu en reçoit pas mal)

Erreurs : (sous firefox)
J'ai un soucis avec ton menu de gauche: Il déborde de l'écran
http://img92.imageshack.us/my.php?image=menu7vm.png

Quand je vais sur la page "point", tout est décalé vers la droite:
http://img137.imageshack.us/my.php?image=point1sl.jpg
(même chose pour "visions" et "warping")

Rien ne fonctionne normalement sous Maxthon, pépins étranges sous Opera et déconnade du menu (?)

je n'ai pas ces navigateurs pour vérifier ni la compétence pour corriger §
@+

Ca ne va pas là non plus :
http://cjoint.com/data/emtItjO225.htm

signaler à un administrateur
Commentaire de bultez le 13/04/2006 11:04:09


pour maintenir ce menu toujours en haut de page si scrolling :
############################################################

° ajouter dans au css dans #Menu :
  position:absolute;
° ajouter dans la page html :
  <script type="text/javascript">
  function SuitScrollBar()
  {
    document.getElementById("Menu").style.top = document.body.scrollTop;
  }
    SuitScrollBar();
    window.onscroll=SuitScrollBar;
  </script>

il y a sûrement d'autres solutions... plus simples ?
elles sont les bien-venues.

signaler à un administrateur
Commentaire de bg62 le 13/04/2006 15:53:19

ajouter dans #menu ok
mais dans la page html ... dans toutes les pages qui se servent du menu ? ou dans BulMenu.htm ?
et ...
<script type="text/javascript">
  function SuitScrollBar()
  {
    document.getElementById("Menu").style.top = document.body.scrollTop;
  }
    SuitScrollBar();
    window.onscroll=SuitScrollBar;
  </script>
peut être inséré avec une commande en php ??

signaler à un administrateur
Commentaire de kimou84 le 12/07/2006 11:23:27

tres bonne source oui mais pas tres efficace
Merci en tout cas

signaler à un administrateur
Commentaire de bultez le 12/07/2006 12:54:17

salut Kimou84,
que faut-il comprendre par "pas très efficace" ?
j'aimerais compprendre pour peut-être (?) améliorer.

signaler à un administrateur
Commentaire de theroman le 15/08/2006 11:44:30

il plante avec les iframe ou le width de l iframe serait defini en poucent

signaler à un administrateur
Commentaire de bultez le 15/08/2006 11:56:14

ah... c'est facile d'aider quand on dit : ça plante !
on peut voir où ? comment ? car ma boule de cristal
est cassée depuis hier, alors j'ai du mal à deviner.

signaler à un administrateur
Commentaire de bg62 le 16/08/2006 10:45:11

bonjour
c'est vrai que c'est facile de critiquer (sans plus)
moi je viens d'y faire une petite modif pour revenir aux compatibilités en css (au niveau des fontes) et l'affichage et maintenant plus clair et surtout plus rapide ouf !
http://www.unesourisetmoi.info
encore une fois : merci bul !  simple et efficace
@mitiés
b g

signaler à un administrateur
Commentaire de bultez le 16/08/2006 10:55:36

salut BG,
je n'ai pas pris ça pour une critique,
mais comme une demande d'aide.
et impossible d'aider avec si peu d'informations !
@+

signaler à un administrateur
Commentaire de theroman le 16/08/2006 12:17:40

c est pas dutout une critique juste une constatation

je penssai avoir ete claire je vais esseyer de mieux m exprimmer

donc dans une page je place le menu et a ca droit un iframe avec c est dimention en pourcentage le tout mis dans un tableau mais lord du moindre survol sur le menu la page affichee par mon iframe se modifie en largeur (width)

sinon ce menu est po mal chouette, simple et lege.

et desoler pour ma premiere constatation a parament un peut flou .
qui etais loin d etre une critique

signaler à un administrateur
Commentaire de bultez le 16/08/2006 12:29:50

si ce menu ( ou n'importe quoi d'autre ) , est mis dans un
tableau qui lui même est dans un iframe ( ou le contraire )
que les tailles soient exprimées en % ou pas d'ailleurs, il
me semble normal, que les largeurs se modifient.    
on peut voir quand même ?

signaler à un administrateur
Commentaire de theroman le 16/08/2006 14:41:22

voila    

http://www.theroman.eu

signaler à un administrateur
Commentaire de bultez le 16/08/2006 15:25:16

au départ, je ne vois pas trop ni décalages, ni plantages...
mais lorsque les pages sont chargées dans l'iframe,
puisque tout est en % :
une page est chargée qui change la taille, donc toutes
les tailles. même sans le menu, ce serait la même chose.

signaler à un administrateur
Commentaire de theroman le 16/08/2006 18:15:28

pour mieux comprendre ouvre une page
puis actualise en ayant la souris hors  du menu javaS
la tout est normale
puis suffi de glisser la souris sur le mune puis boom decalage

et un grand merci de toute l attention portee a mes question

signaler à un administrateur
Commentaire de bultez le 17/08/2006 07:17:51


on ne va peut-être pas en causer plus ici ?

écris moi par mail : http://www.digipills.com/cerbermail/?7k0USwXbQj
ou direct marcel point bultez arobase tiscali point fr

ou pose la question sur le forum.

je n'ai pas compris tout à fait comment
tu veux présenter ta page, je met simplement
ci dessous une version expurgée et dis moi
ou dis nous comment tu veux présenter les
choses ( pas ici, inutile d'encombrer )

<html>
<head>
<meta http-equiv="Content-Language" content="fr-be">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>www.theroman.eu</title>
<LINK REL="stylesheet"
TYPE="text/css"
HREF="BulMenu.css"><!-- les tailles, les couleurs, le comportement... -->
</head>
<body>
<ul id="Menu"><!-- description du menu : UL, LI et A HREF -->
<li><a href="" target="ifr">Accueil</a>
</li>
<li><a href="photo/" target="ifr">Photo</a>  
</li>
<li><a href="#">TFE</a>
<ul>
<li><a href="tfe/" target="ifr">tfe interface client</a>  
</li>
<li><a href="tmp.htm" target="ifr">tfe interface configuration</a></li>
</ul>
</li>
</ul>
</td>
<iframe src="ini.php" name="ifr"
width=100% height=80%></iframe>
<script type="text/javascript"
src="BulMenu.js"></Script>
</body>
</html>

signaler à un administrateur
Commentaire de Titi035 le 26/10/2006 00:35:32

C'est pas mal comme menu. Sympa.
Habituellement, j'utilise les frames, mais c'est vrai que pour faire référencer un site, ce menu est nettement mieux.
Comment l'intégrer dans mes pages (j'en ai une 50aine)? dois-je mettre le code au début du body de chacune de mes pages ou il y a une meilleure methode?

bye.

signaler à un administrateur
Commentaire de bultez le 26/10/2006 10:41:50

salut Titi,
ce menu n'empêche pas les [I]Frame.
pour intégrer un menu dans de nombreuses pages
    ° un .js qui fait des document.write ( la moins bonne solution )
    ° un #include en SSI
    ° un include avec PHP ( ou le langage sur le serveur )
je parle et de la description des lignes du menu en HTML,
et du javascript ( quoique là un <script ...src=".." ... >
   suffit ).

signaler à un administrateur
Commentaire de ameyrus le 20/12/2006 11:34:23

Bonjour je tente d'utiliser ce menu sous ie mais il me pose quelques problèmes sous Internet Explorer alors que sous Firefox ça tourne impec'!
Voici les problèmes rencontrés :
  - la longueur du menu ne varie pas en fonction du nombre d'onglet (de la premiere ligne)
  - les sous menus du 2eme niveau ne s'affiche pas en lignes
et en général : impossible de centrer le menu selon le nombre d'onglet
Pourriez vous m'aider à corriger ces quelques problèmes?

Merci à tous et en particulier à M Bultez pour ce menu qui malgré les problèmes rencontrés est un très bon menu, simple, léger...

@++

signaler à un administrateur
Commentaire de bultez le 20/12/2006 12:42:45

salut Ameyrus,
à priori... quelques adaptations/fignolages
en CSS devraient faire l'affaire (?).

signaler à un administrateur
Commentaire de patrickhenrion le 05/03/2007 18:57:56

bonjour,
j'ai utilisé le menu multi niveaux horizontal, ma question est la suivante: comment placer le texte au milieu de la barre?je suppose que c'est dans le css, est-ce ce code-ci?
text-align: center;
merci.

signaler à un administrateur
Commentaire de patrickhenrion le 13/03/2007 18:08:47

le script fonctionne correctement sur explorer mais sur firefox le background-color ne change pas les couleurs au passage du curseur.
y a -t-il une solution?

voici le lien si tu veux aller voir le plan du site que j'ai fait avec ton script et ton aide.encore merci!
http://www.hardymarc.com/plandusite.htm

signaler à un administrateur
Commentaire de bultez le 14/03/2007 11:56:46


je pensais avoir répondu ? mais qui donc à volé ma réponse ?

>>text-algn:center permet effectivement de centrer
  soit un texte quelconque, soit tous ( si mis sur #Menu par ex )

>>firefox background-color ne change pas de couleur au passage de la souris
  euh? tout est en css, à priori "aucune raison" donc.
  valeurs "initiales" dans BulMenu.css :
#Menu a { ...
background-color:#F1F100; /* couleur normale du fond */
... }
#Menu a:hover
{ ...
background-color:#CCFFFF; /* couleur du fond si survol */
... }

signaler à un administrateur
Commentaire de advisory le 18/05/2007 13:52:40

bonjour tout le monde,

chez moi il fonctionne tres bien ( a savoir q'il tourne sur un server(c'est pour l'intranet))

la seul chose etrange et que je ne peux expliquer c que quand je click sur un lien qui est
du style

    <li><a href="searchengine.htm" target="_top">Search engine</a></li> (avec _self ou _parent aussi

ben le premier appel se fais bien dans la meme page mais quand je veux cliquer sur un autre lien il m'ouvre une autre page ou la je peux naviguer dans tous les menu sans qu'il n'en rappelle

donc ma question est ou dois je modifier pour qu'il n'appelle plus un _blank
(quand il n'est pas desire biensur car j'ai tester sur tout mes liens _self et le deuxieme click d'un lien m'appelle qd meme un _blank Oo

merci d'avance pour votre aide

signaler à un administrateur
Commentaire de bultez le 18/05/2007 14:10:31


tout vient du target et ... aussi de comment est paramétré le navigateur.
à priori, d'ailleurs, tu l'utilises avec des frames.

ce menu ne fait qu'utiliser des <a href> ( certes dans des ul,
li, avec un peut de CSS et 3 lignes de javascript ), mais son
comportement  est le même qu'un lien hypertext "normal", puisque
cela en est un.

fais d'abord une bête page htm, avec un bête lien. rien de plus.
quand tu obtiens ce que tu désires, appliques le sur le menu.
si tu n'y parviens pas, donnes nous cette "bête page"
et dis nous : que veux-tu faire exactement ?

Cordialement.

signaler à un administrateur
Commentaire de advisory le 18/05/2007 14:16:52

je travail sous ie6 et toute mes target qui doivent s'afficher dans cette meme pagesont en _self
je n'utilise aucune frame et pour la page a envoier je te l'envoie par mail?

au debut je regardais surtout a ce que tout soit a la bonne place et que ca aie un joli skin je n'ai pas fais attention au <a href vu que c'est le meme partout mais la ca me la coupe quand je vois qu'il m'ouvre une deuxieme page alors qe la target="_self" c incomprehensible

signaler à un administrateur
Commentaire de bultez le 18/05/2007 15:36:17

toutes (?) les explications au sujet du target :
http://fr.selfhtml.org/html/liens/definir.htm#fenetre_cible

car "_self" c'est pour ouvrir dans le même fenêtre, à priori.

tu peux m'envoyer la page, ou l'adresse pour la voir
si elle est sur le web. mais je n'ai plus IE6, je suis
passé à IE7, les comportements sont probablement un peu
différents ( avec les onglets ).

signaler à un administrateur
Commentaire de advisory le 23/05/2007 09:16:15

en fait j'ai reproduit le code sur toutes mes pages pour ne pas devoir faire une frame
et c'est comme ca que je le voyais _self pour qu'il l'ouvre dans la meme fenetre
et au fait sur quel adresse je l'envoi?

signaler à un administrateur
Commentaire de bultez le 23/05/2007 09:43:46


>>j'ai reproduit le code sur toutes mes pages
  en php ou même en ssl : un include
  ou ( beurk ) un .js qui fait des document.write ( rebeurk )

  m'écrire avec son courrieleur : http://mas.keo.in/?Bul [Mail Anti Spam]

signaler à un administrateur
Commentaire de advisory le 23/05/2007 13:30:50

rebonjour,

maintenant tout marche nikel sauf une chose

j'ai oublier que j'avais 4 mac dans le parc informatique et le script n'est pas au point pour safari
quelqu'un aurai une suggestion

merci

signaler à un administrateur
Commentaire de bultez le 23/05/2007 13:42:23

là, je vais avoir du mal à te répondre.
n'ayant pas de MAC, je ne peux pas tester avec Safari.
il faudrait poser la question sur le forum "adhéquat"
de CodesSources : http://www.javascriptfr.com ?
@+

signaler à un administrateur
Commentaire de bg62 le 11/06/2007 08:51:36

bonjour 'bul'
Je viens seulement de m'apercevoir d'un petit bug sur mon site ( http://www.unesourisetmoi.info)
sous IE pas de problèmes (je pense !)
mais sous FF les sous menus sont décalés vers la gauche au lieu de rester bien en-dessous du 'titre' d'origine et de plus certaines 'cases' (exemple : liens+ >> Webmasters  >>  pas de liens affichés sous FF )renvoyant vers d'autres liens (dernier onglet à droite) n'affichent pas la petite flèche, ni les autres liens ...
tu peux comparer, et me dire ce qui ne va pas ?si besoin je t'envoie les fichiers ou je te mets les codes ici ???

signaler à un administrateur
Commentaire de bultez le 11/06/2007 09:25:15

pas sûr que je puisse être utile bg.
1° un problème d'harmonisation : taille des
cellules, de la police, décalage...
2° une erreur dans le html à priori.
@+

signaler à un administrateur
Commentaire de bg62 le 11/06/2007 09:49:47

pas sûr que je puisse être utile bg.   >>>>>   oh que si ! car je séche !
1° un problème d'harmonisation : taille des
cellules, de la police, décalage...   >>>>>  que préconises-tu ?
2° une erreur dans le html à priori.   >>>>> quel genre d'erreur ?
... et pourquoi, correct sous IE et pas sous FF ?
@+
b g

signaler à un administrateur
Commentaire de bultez le 11/06/2007 10:38:13

un problème d'harmonisation : taille des cellules,
de la police, décalage...
IE et FF n'affiche pas les choses de la même manière.
il faut trouver un moyen terme.
essayes sans le javascript... ce sera pareil.
@+

signaler à un administrateur
Commentaire de bg62 le 11/06/2007 15:11:20

bon j'ai réussi à  corriger l'erreur dans le fichier htm, mais il reste toujours ce fameux décalage vers la gauche (certainement du à la css) sous FF qui est du plus mauvais effet et que je ne sais pas corriger ....
SOS !
à+
b g

signaler à un administrateur
Commentaire de bg62 le 26/06/2007 12:15:19

Salut bul !
j'ai retravaillé la css et le menu est maintenant nickel sous FF
http://www.unesourisetmoi.info
mais maintenant c'est sous IE que tout est décallé !!!!
là je craque ....
y-a-t-il moyen de faire reconnaître les css sous IE ET FF avec un 'hack' ou un moyen de donner sous telle ou telle utilisation de "????" ou autre ?
car là cela devient un jeu sans fin .... et moi je ne suis pas de ce niveau ....
tiens-moi au courant stpl
@mitiés
b g

signaler à un administrateur
Commentaire de bg62 le 26/06/2007 12:22:06

marcel ... si tu me laisse tomber sur ce coup là ... je fais la "gueule" !
... @micalement
b g

signaler à un administrateur
Commentaire de bultez le 26/06/2007 12:28:02







>>y-a-t-il moyen de faire reconnaître les css sous IE ET FF

euh ? une possibilité ? :

<LINK REL="stylesheet"
TYPE="text/css"
HREF="Sources/Style.css">
<!--[if IE]>
<LINK REL="stylesheet"
TYPE="text/css"
HREF="Sources/StyleIE.css">
<![endif]-->

par exemple...

>>car là cela devient un jeu sans fin.
  faire des choses simples, police standard...
  la css, certes n'est pas géré de la même manière,
  mais un simple texte sans fiorture aucune,
       n'a pas la même allure ! alors !?!

>>moi je ne suis pas de ce niveau.
  moi encore moins c'est sûr.

signaler à un administrateur
Commentaire de mayeum le 13/05/2008 15:46:59 10/10

Très bon code ! Merci beaucoup ^^

signaler à un administrateur
Commentaire de joerizk le 08/10/2008 14:18:10

m

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Menu vertical et horizontal avec ouverture/fermeture d'un clic [ par neo_tsubasa ] Bonjour, Je suis tr&#233;s debutant en javascript et je voudrais faire un menu horizontal fixe qui lorsque l'on clique sur une de ces categories ouvr menu déroulant vertical [ par rduvrac ] J'ai r&#233;cup&#233;r&#233; ce script mais il ne fonctionne pas. J'aimerai bien car il est simple &#224; mettre en place et &#224; actualiser sinon. créer un menu horizontal sur 2 lignes [ par zephou92 ] je cherche une aide pour créer un menu horizontal sur 2 lignes en javascript (pas de php si c'est possible). merci vincentzephou92 Menu deroulant vertical [ par leo7511 ] Bjr,J'espère être sur le bon thème.J'ai essayé le menu déroulant vertical en copiant le code sur le bloc note pour avoir le fichier "Menu.js" et ajout Menu vertical particulier [ par GanJasTeR ] Bonjour &#224; tous.Voila je suis en train de r&#233;aliser mon portfolio et je bute sur un petit menu que j'ai dessin&#233; mais que je n'aarive pas Menu deroulant horizontal [ par flow92220 ] J'ai donc un menu d&#233;roulant qui deroule les differents onglets quand la souris passe dessus.Mais, mon probleme c'est que le menu ne se "r&#233;-e Générer un menu vertical à partir d'une image [ par hugo37 ] Bonjour &#224; tous, j'ai un petit probl&#232;me, en fait les scripts permettant d'ins&#233;rer un menu d&#233;roulant ect... sont tr&#232;s bien sur menu dynamique horizontal, problème avec le onload [ par metis15 ] Bonsoir,Le menu dyn. horizontal..;http://www.javascriptfr.com/code.aspx?id=21045ne fontionne pas si je laisse le pr&#233;chargement d'image...&lt;body Chargement de script [ par Straw ] Bonjour  à tous, Je suis en train de concevoir ce site-ci Il possède un menu déroulant horizontal, c'est une suite de &lt;li&gt; et un script ja demande d'aide sur menu dynamique vertical [ par christmac ] Voila je doit inclure pour un site un petit menu dynamique avec des sous menu en dessous, jusque la j'ai trouver plein de modele qui me va. Mais ou ce


Nos sponsors

Sondage...

CalendriCode

Novembre 2008
LMMJVSD
     12
3456789
10111213141516
17181920212223
24252627282930

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :

Vidéos drôles Nouveau