Скачать презентацию 22 menus avec les Feuilles de Styles en Скачать презентацию 22 menus avec les Feuilles de Styles en

7b4b6f2f65df18535fb8cb13bfb9ff10.ppt

  • Количество слайдов: 78

22 menus avec les Feuilles de Styles en Cascade CSS : Cascading Style Sheets 22 menus avec les Feuilles de Styles en Cascade CSS : Cascading Style Sheets Téléchargement : http: //icp. ge. ch/sem/cms-spip/spip. php? article 626 Cours « CSS » - Mardi 3 février 2009, 8 h 00 -18 h 00 et Mardi 17 février 2009, 13 h 30 -1800 François Daniel Giezendanner, SEM (Service Ecoles-Medias) - DIP - Genève, 5 rue des Gazomètres, 1205 CH-Genève Tél: +41 22 / 388 -33 -14, francois-daniel. giezendanner@edu. ge. ch - http: //icp. ge. ch/sem/cms-spip/ Tél: +41 22 / 388 -33 -14, francois-daniel. giezendanner@ edu. ge. ch - http: //icp. ge. ch/ sem/ cms- spip/

22 menus en CSS 01 - mvs - Menu vertical simple avec puces, sans 22 menus en CSS 01 - mvs - Menu vertical simple avec puces, sans puces, en boutons 02 - mh - Menu horizontal simple, en boutons, avec commentaires 03 - mv-s - Menu vertical - simple liste 04 - mv-s - Menu vertical - simple liste 05. 1 - mb-r - Menu bouton Rollover 05. 2 - mb-rpc - Menu bouton rollover portes coulissantes 06 - mv-rpc - Menu vertical rollover portes coulissantes 07 - mh-rpc - Menu horizontal rollover portes coulissantes 08 - mv-rpc - Menu vertical rollover portes coulissantes 09 - mvad-g-1 r 2 c - Menu vertical arborescent dynamique gauche 1 règle 2 classes par niveau 10 - mvad-g-2 r 1 c - Menu vertical arborescent dynamique gauche 2 règles 1 classe par niveau 11 - mvad-d-1 r 1 c - Menu vertical arborescent dynamique droit 1 règle 1 classe par niveau 12 - mvad-g-2 r 0 c - Menu vertical arborescent dynamique gauche 2 règles par niveau flèche-gif 13 - mvad-g-mr 0 c - Menu vertical arborescent dynamique gauche mêmes règles tous niveaux 14 - mvad-d-mr 0 c - Menu vertical arborescent dynamique droite mêmes règles tous niveaux 15. 1 - mvad-g-mr 1 c - Menu vertical arborescent dynamique gauche mêmes règles tous niveaux 15. 2 - mvad-d-mr 1 c - Menu vertical arborescent dynamique droite mêmes règles tous niveaux 16 - mhad-2 niv - Menu horizontal arborescent dynamique 2 niveaux 17 - mhvad-g-2 r 2 c - Menu horizontal vertical arborescent dynamique gauche 2 règles 2 classes par niveau 18 - mhvad-mr 0 c- Menu horizontal vertical arborescent dynamique gauche mêmes règles tous niveaux 19 - mhvad-nrnc- Menu horizontal vertical arborescent dynamique professionnel n 1 règles n 2 classes par n 20 - mhvad-mr 0 c- Menu horizontal vertical arborescent dynamique 0 classe mêmes règles tous niveaux 21 - mvad-mr 0 c- Menu vertical arborescent dynamique 0 classe mêmes règles tous niveaux 22 -mvac-mr 0 c-javascript-memes-regles-tous-niveaux_SPIP

  • 1. 1. mvs - Menu vertical simple avec puces ul#menu { margin: 0; font-family: Arial; list-style-type: circle; } #menu a { text-decoration: none; font-weight: normal; line-height: 25 px; color: #993300; font-family: arial; } #menu a: hover { margin: 0 px; padding: 0 px; font-weight: bold; color: #009900; font-family: Arial; }

  • 1. 2. mvs - Menu vertical simple sans puce ul#menu { margin: 0 px; padding: 0 px; font-family: Arial; list-style-type: none; } #menu a { text-decoration: none; font-weight: normal; line-height: 25 px; color: #993300; font-family: arial; } #menu a: hover { margin: 0 px; padding: 0 px; font-weight: bold; color: #009900; font-family: Arial; }

  • 1. 3. mvs-b - Menu vertical simple en boutons ul#menu { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 1 em; list-style-type: none; } #menu a { border: 1 px solid #cccccc; margin: 3 px 0 px; display: block; text-decoration: none; font-weight: normal; line-height: 25 px; color: #993300; font-family: arial; width: 80 px; background-color: #cccccc; text-align: center; } #menu a: hover { margin: 3 px 0 px; padding: 0 px; font-weight: bold; color: #009900; font-family: Arial; background-color: #99 ff 99; }

  • 1. 4. mvs-br - Menu vertical simple en boutons relief #menu a { border-style: solid; border-color: #ccc #666 #ccc; border-width: 1 px 2 px 1 px; margin: 5 px 0 px; ul#menu { #menu a: hover { display: block; margin: 0; border-style: solid; text-decoration: none; padding: 0; border-color: #666 #ccc #666; font-family: Arial, Helvetica, sans-serif; font-weight: normal; border-width: 2 px 1 px 2 px; line-height: 25 px; font-size: 1 em; margin: 5 px 0 px; color: #930; list-style-type: none; padding: 0 px; font-family: arial; } font-weight: bold; width: 80 px; color: #090; text-align: center; font-family: Arial; background-color: #fcc; background-color: #9 f 9; } }

    • 2. 1. mh - Menu horizontal simple ul#menu { margin: 0 px; padding: 0 2. 1. mh - Menu horizontal simple ul#menu { margin: 0 px; padding: 0 px; list-style-type: none; font-family: Arial; } #menu a { text-decoration: none; font-weight: bold; line-height: 25 px; color: #930; font-family: arial; }

    #menu a: hover { margin: 0 px; padding: 0 px; color: #090; font-family: Arial; } #menu li { display: inline; margin: 0 5 px; }

    2. 2. mh-b - Menu horizontal boutons ul#menu { margin: 0; padding: 0; font-family: 2. 2. mh-b - Menu horizontal boutons ul#menu { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 1 em; list-style-type: none; } #menu a { border-style: solid; border-color: #ccc #666 #ccc; border-width: 1 px 2 px 1 px; margin: 0 px; padding: 0 px; display: block; text-decoration: none; font-weight: normal; line-height: 25 px; color: #930; font-family: arial; width: 80 px; text-align: center; background-color: #ffcccc; }

    #menu a: hover { border-style: solid; border-color: #666 #ccc #666; border-width: 2 px 1 px 2 px; margin: 0 px; padding: 0 px; font-weight: bold; color: #090; font-family: Arial; background-color: #9 f 9; } #menu li { float: left; }

    2. 3. mh-b - Menu horizontal boutons espacés ul#menu { margin: 0; padding: 0; 2. 3. mh-b - Menu horizontal boutons espacés ul#menu { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 1 em; list-style-type: none; } #menu a { border-style: solid; border-color: #ccc #666 #ccc; border-width: 1 px 2 px 1 px; margin: 0 px 5 px 0 px; padding: 0 px; display: block; text-decoration: none; font-weight: normal; line-height: 25 px; color: #993300; font-family: arial; width: 80 px; text-align: center; background-color: #ffcccc; }

    #menu a: hover { border-style: solid; border-color: #666 #ccc #666; border-width: 2 px 1 px 2 px; margin: 0 px; padding: 0 px; font-weight: bold; color: #009900; font-family: Arial; background-color: #99 ff 99; } #menu li { float: left; }

  • Lien" src="https://present5.com/presentation/7b4b6f2f65df18535fb8cb13bfb9ff10/image-10.jpg" alt="2. 4. mh-bc - Menu horizontal boutons commentaires

  • Lien" src="https://present5.com/presentation/7b4b6f2f65df18535fb8cb13bfb9ff10/image-11.jpg" alt="2. 4. mh-bc - Menu horizontal boutons commentaires

  • 3. 1. mv-s - Menu vertical - simple liste body {font: 1 em verdana, arial, sans-serif; } div#listcontainer {border: 1 px solid #000; width: 150 px; font-size: . 75 em; margin: 20 px; } div#listcontainer ul {border: 0; margin: 12 px 20 px 12 px 1. 25 em; padding: 0; list-style-type: none; } div#listcontainer li {border-bottom: 2 px solid #069; margin: 0; padding: . 3 em 0; text-indent: . 5 em} div#listcontainer li: first-child {border-top: 2 px solid #069; } div#listcontainer a {text-decoration: none; color: #069; } div#listcontainer a: hover {color: #F 33; } /* a hack for IE Win only */ * html div#listcontainer ul {border-top: 2 px solid #069; } Sources : http: //www. bbd. com/stylin/ This is the companion web site for the book "Stylin' with CSS - a designer's guide" published by New Riders Books, May 2005.

  • 3. 2. mv-s - Menu vertical - simple liste body {font: 1 em verdana, arial, sans-serif; } div#listcontainer {border: 1 px solid #000; width: 150 px; font-size: . 75 em; margin: 20 px; } div#listcontainer ul {border: 0; margin: 12 px 20 px 12 px 1. 25 em; padding: 0; list-style-type: none; } div#listcontainer li {border-top: 1 px solid #069; border-left: 4 px solid #069; margin: 0 0 4 px 0; padding: . 3 em 0; text-indent: . 5 em; } div#listcontainer a {text-decoration: underline; color: #069; } div#listcontainer a: hover {text-decoration: none; color: #F 33; }

  • 3. 3. mv-s - Menu vertical - simple liste body {font: 1 em verdana, arial, sans-serif; } div#listcontainer {border: 1 px solid #000; width: 150 px; font-size: . 75 em; margin: 20 px; } div#listcontainer ul {border: 0; margin: 12 px 20 px 12 px 1. 25 em; padding: 0; list-style-type: none; } div#listcontainer li {border-left: 4 px solid #069; margin: 0 0 4 px 0; padding: . 3 em 0; text-indent: . 5 em; background-color: #CCF; } div#listcontainer a {text-decoration: underline; color: #069; } div#listcontainer a: hover {text-decoration: none; color: #F 33; }

    • Other Mutters Other Mutters 4. 1. mv-s - Menu vertical - simple liste

    html {margin: 0; padding: 0; } body {font: 80% Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0; background: rgb(95%, 80%); color: black; } div#sidebar {float: left; width: 23%; margin: 2 em 0 0 2%; text-align: center; } #sidebar ul {list-style: none; margin: 0; padding: 0 0 10 px; border: 1 px solid rgb(73%, 58%); } #sidebar h 4, #sidebar ul {margin: 0 6 px 0 0; } #sidebar li {padding: 0. 5 em 0; border-bottom: 1 px solid rgb(84%, 69%); } #sidebar a {text-decoration: none; padding: 0 0. 25 em; border: 1 px solid rgb(84%, 69%); } #sidebar a: link {color: rgb(20%, 40%, 0%); } #sidebar a: visited {color: rgb(58%, 68%, 40%); } #sidebar a: hover {color: rgb(10%, 20%, 0%); background: #FFF; } Sources : http: //more. ericmeyeroncss. com/dloads/ Référence : More Eric Meyer on CSS.

    Other Mutters" src="https://present5.com/presentation/7b4b6f2f65df18535fb8cb13bfb9ff10/image-16.jpg" alt="4. 2. mv-s - Menu vertical - simple liste

    Graphics" src="https://present5.com/presentation/7b4b6f2f65df18535fb8cb13bfb9ff10/image-17.jpg" alt="5. 1. mb-r - Menu bouton Rollover
    Graphics" /> 5. 1. mb-r - Menu bouton Rollover
    Graphics
    body {font-family: verdana, arial, sans-serif; font-size: 1 em; } div. button {width: 120 px; height: 24 px; top: 0 px; left: 0 px; border: 1 px #000 solid; } a. roll {width: 120 px; height: 24 px; display: block; padding-top: 2 px; font: bold 10 pt; text-align: center; } div. button a. roll: link {color: black; text-decoration: none; } div. button a. roll: visited {color: black; text-decoration: none; } div. button a. roll: hover {color: #069; text-decoration: underline; } div. button a. roll: active {color: #CCC; } Sources : http: //www. bbd. com/stylin/ Companion web site for the book "Stylin' with CSS - a designer's guide" published by New Riders Books, May 2005.

    5. 2. mb-rpc - Menu bouton rollover portes coulissantes Image composée de 4 bandes 5. 2. mb-rpc - Menu bouton rollover portes coulissantes Image composée de 4 bandes horizontales placée dans le bouton unique selon 4 positions verticales en fonction des actions de la souris

    Graphics
    div. button {width: 120 px; height: 24 px; top: 0 px; left: 0 px; border: 1 px #000 solid; } a. roll {width: 120 px; height: 20 px; padding-top: 4 px; display: block; font: bold 10 pt verdana, sans-serif; text-align: center; background: url("images_pres/four_state_roll_bg. gif") 0 px no-repeat #000; } div. button a. roll: link {background-position: 0 px; color: black; text-decoration: none; } div. button a. roll: visited {background-position: 0 px -25 px; color: green; } div. button a. roll: hover {background-position: 0 px -50 px; color: #069; } div. button a. roll: active {background-position: 0 px -75 px; color: white; } L’image unique composée de 4 bandes horizontales est chargée une fois à l’appel de la page et est ensuite instantanément disponible pour chaque déplacement dû à l’action de survol ou de clic de la souris (: link, : active, : over, : visited)

    6. mv-rpc - Menu vertical rollover portes coulissantes Image composée de 2 bandes horizontales 6. mv-rpc - Menu vertical rollover portes coulissantes Image composée de 2 bandes horizontales placée dans les 6 boutons du menu vertical selon 2 positions verticales en fonction des actions de la souris

    #menu 5 {width: 200 px; margin: 10 px; } #menu 5 li a {height: 32 px; voice-family: ""}""; voice-family: inherit; height: 24 px; text-decoration: none; } #menu 5 li a: link, #menu 5 li a: visited {color: #FFF; display: block; background: url(menu 5. gif); padding: 8 px 0 0 10 px; } #menu 5 li a: hover {color: #FFF; background: url(menu 5. gif) 0 -32 px; padding: 8 px 0 0 10 px; } L’image unique composée de 2 bandes horizontales est chargée une fois à l’appel de la page et est ensuite instantanément disponible pour chaque déplacement dû à l’action de survol ou de clic de la souris (: link, : active, : over, : visited) Sources : http: //www. exploding-boy. com/ Free CSS Vertical Menu Designs at exploding-boy. com.

    7. mh-rpc - Menu horizontal rollover portes coulissantes (1/3) Image composée de 2 bandes 7. mh-rpc - Menu horizontal rollover portes coulissantes (1/3) Image composée de 2 bandes horizontales placée dans les 7 boutons du menu horizontal selon 2 positions verticales en fonction des actions de la souris tableft 2. gif tabright 2. gif

    L’image unique composée de 2 bandes horizontales est chargée une fois à l’appel de la page et est ensuite instantanément disponible pour chaque déplacement dû à l’action de survol ou de clic de la souris (: link, : active, : over, : visited) Sources : http: //exploding-boy. com/images/cssmenus/menus. html Free CSS Vertical Menu Designs at exploding-boy. com.

    tableft 2. gif 7. mh-rpc - Menu horizontal rollover portes coulissantes (2/3) tabright 2. tableft 2. gif 7. mh-rpc - Menu horizontal rollover portes coulissantes (2/3) tabright 2. gif #tabs 2 {float: left; width: 100%; font-size: 93%; line-height: normal; border-bottom: 1 px solid #84776 B; } #tabs 2 ul {margin: 0; padding: 10 px 0 50 px; list-style: none; } #tabs 2 li {display: inline; margin: 0; padding: 0; } #tabs 2 a {float: left; background: url("tableft 2. gif") no-repeat left top; margin: 0; padding: 0 0 0 4 px; text-decoration: none; } #tabs 2 a span {float: left; display: block; background: url("tabright 2. gif") no-repeat right top; padding: 5 px 15 px 4 px 6 px; color: #84776 B; } #tabs 2 a: hover span {color: #74675 B; } #tabs 2 a: hover {background-position: 0% -42 px; } #tabs 2 a: hover span {background-position: 100% -42 px; }

      • 7. mh-rpc - Menu horizontal rollover portes coulissantes (3/3) #tabs 2 {float: left; width: 100%; font-size: 93%; line-height: normal; border-bottom: 1 px solid #84776 B; } #tabs 2 ul {margin: 0; padding: 10 px 0 50 px; list-style: none; } #tabs 2 li {display: inline; margin: 0; padding: 0; } #tabs 2 a {float: left; background: url("tableft 2. gif") no-repeat left top; margin: 0; padding: 0 0 0 4 px; text-decoration: none; } #tabs 2 a span {float: left; display: block; background: url("tabright 2. gif") no-repeat right top; padding: 5 px 15 px 4 px 6 px; color: #84776 B; } #tabs 2 a: hover span {color: #74675 B; } #tabs 2 a: hover {background-position: 0% -42 px; } #tabs 2 a: hover span {background-position: 100% -42 px; } L’image unique composée de 2 bandes horizontales est chargée une fois à l’appel de la page et est ensuite instantanément disponible pour chaque déplacement dû à l’action de survol ou de clic de la souris (: link, : active, : over, : visited)

    8. mv-rpc - Menu vertical rollover portes coulissantes L’image unique composée de 2 images 8. mv-rpc - Menu vertical rollover portes coulissantes L’image unique composée de 2 images est chargée une fois à l’appel de la page et est ensuite instantanément disponible pour chaque déplacement dû à l’action de survol ou de clic de la souris (: link, : active, : over et : visited) sur les 7 boutons horizontaux du menu. Image composée de 2 images identiques, l’une foncée l’autre éclaircie, placées l’une au dessus de l’autre, . . . … placée dans le menu constitué de 7 boutons horizontaux, déplacée en vertical en fonction des actions de la souris pour afficher une bande de l’image duplicata dans le bouton sélectionné. Sources : http: //www. alsacreations. com/livre/? /Exemples/extreize - Alsacréation : CSS 2 Pratique du design web.

    Accueil

  • Accueil
  • 8. mv-rpc - Menu vertical rollover portes coulissantes ul, li {margin: 0; paddi ng: 0 px; list-style-type: none; } ul {background: transparent url(mv-rpc-2. jpg) no-repeat scroll left top; position: absolute; top: 50 px; left: 20%; width: 300 px; height: 280 px; text-align: center; } li {display: inline; } li a {display: block; height: 40 px; width: 300 px; font-family: Georgia; font-size: 18 px; text-decoration: none; line-height: 40 px; font-weight: normal; color: #ffd 6 d 6; } li a: hover {background: transparent url(mv-rpc-2. jpg) no-repeat scroll left top; color: white; } a#lien 1: hover {background-position: 0% -280 px; font-weight: bolder; font-size: 24 px; } a#lien 2: hover {background-position: 0% -320 px; font-weight: bolder; font-size: 24 px; } a#lien 3: hover {background-position: 0% -360 px; font-weight: bolder; font-size: 24 px; } a#lien 4: hover {background-position: 0% -400 px; font-weight: bolder; font-size: 24 px; } a#lien 5: hover {background-position: 0% -440 px; font-weight: bolder; font-size: 24 px; } a#lien 6: hover {background-position: 0% -480 px; font-weight: bolder; font-size: 24 px; } a#lien 7: hover {background-position: 0% -520 px; font-weight: bolder; font-size: 24 px; }

    • 9. mvad-g-1 r 2 c - Menu vertical arborescent dynamique gauche 1 règle 2 9. mvad-g-1 r 2 c - Menu vertical arborescent dynamique gauche 1 règle 2 classes par niveau (1/3) 2 classes différentes par niveau 1 classe identique par niveau : class="submenu" 1 classe différente par niveau : class="level 1" pour le menu de niveau 1 class="level 2" pour le menu de niveau 2 class="level 3" pour le menu de niveau 3 Même code HTML que pour class="level 4" pour le menu de niveau 4 class="level 5" pour le menu de niveau 5 17. mhvad-g-2 r 2 c . . . Sources : http: //more. ericmeyeroncss. com/dloads/ Référence : More Eric Meyer on CSS.

      1 classe identique" src="https://present5.com/presentation/7b4b6f2f65df18535fb8cb13bfb9ff10/image-26.jpg" alt="9. mvad-g-1 r 2 c (2/3)

      9. mvad-g-1 r 2 c - Menu vertical arborescent dynamique gauche 1 règle 2 9. mvad-g-1 r 2 c - Menu vertical arborescent dynamique gauche 1 règle 2 classes par niveau (3/3) div#nav {float: left; width: 7 em; margin: -1 px 0 0 -1 px; background: #FDD; } div#nav ul {margin: 0; padding: 0; width: 7 em; background: white; border: 1 px solid #AAA; } div#nav li {position: relative; list-style: none; margin: 0; border-bottom: 1 px solid #CCC; } div#nav li: hover {background: #EBB; } div#nav li. submenu {background: url(submenu. gif) 95% 50% no-repeat; } div#nav li. submenu: hover {background-color: #EDD; } div#nav li a {display: block; padding: 0. 25 em 0. 5 em; text-decoration: none; width: 6. 5 em; } div#nav>ul a {width: auto; } 1 règle par niveau div#nav ul ul {position: absolute; top: 0; left: 7 em; display: none; } div#nav ul. level 1 li. submenu: hover ul. level 2, div#nav ul. level 2 li. submenu: hover ul. level 3, div#nav ul. level 2 li. submenu ul. level 3 li. submenu: hover ul. level 4 {display: block; }

      10. mvad-g-2 r 1 c - Menu vertical arborescent dynamique gauche 2 règles 1 10. mvad-g-2 r 1 c - Menu vertical arborescent dynamique gauche 2 règles 1 classe par niveau (1/6) 2 règles différentes par niveau 1 classe identique par niveau : class="sub" Sources : http: //www. cssplay. co. uk/menus/ - Référence : CSSplay - Experiment with Cascading Style Sheets

      10. mvad-g-2 r 1 c - Menu vertical arborescent dynamique gauche 2 règles 1 10. mvad-g-2 r 1 c - Menu vertical arborescent dynamique gauche 2 règles 1 classe par niveau (2/6) 1 classe identique par niveau : class="sub"

      10. mvad-g-2 r 1 c - Menu vertical arborescent dynamique gauche 2 règles 1 10. mvad-g-2 r 1 c - Menu vertical arborescent dynamique gauche 2 règles 1 classe par niveau (3/6). menu {z-index: 1000; font-size: 90%; margin: 25 px 0 50 px 15 px; /* this page only */}. menu ul {padding: 0; margin: 0; list-style-type: none; width: 150 px; } /* position relative so that you can position the sub levels */. menu li {position: relative; background: #d 4 d 8 bd; height: 26 px; }. menu table {position: absolute; border-collapse: collapse; top: 0; left: 0; z-index: 100; fontsize: 1 em; }. menu a, . menu a: visited {display: block; text-decoration: none; height: 25 px; line-height: 25 px; width: 149 px; color: #000; text-indent: 5 px; border: 1 px solid #fff; border-width: 0 1 px 0; } * html. menu a: hover {color: #fff; background: #949 e 7 c; }. menu : hover > a {color: #fff; background: #949 e 7 c; } /* hide the sub levels and give them a positon absolute so that they take up no room */. menu ul ul {visibility: hidden; position: absolute; top: 0; left: 150 px; } /* make the second level visible when hover on first level list OR link */ 2 règles par niveau. menu ul li: hover ul, . menu ul a: hover ul {visibility: visible; } /* keep the third level hidden when you hover on first level list OR link */. menu ul : hover ul ul {visibility: hidden; } /* keep the fourth level hidden when you hover on second level list OR link */. menu ul : hover ul ul {visibility: hidden; } /* make third level visible when you hover second level list OR link */. menu ul : hover ul {visibility: visible; } /* make the fourth level visible when you hover third level list OR link */. menu ul : hover ul {visibility: visible; }

      10. mvad-g-2 r 1 c - Menu vertical arborescent dynamique gauche 2 règles 1 10. mvad-g-2 r 1 c - Menu vertical arborescent dynamique gauche 2 règles 1 classe par niveau (4/6) 2 règles différentes par niveau 1 classe identique par niveau : class="sub"

      10. mvad-g-2 r 1 c - Menu vertical arborescent dynamique gauche 2 règles 1 10. mvad-g-2 r 1 c - Menu vertical arborescent dynamique gauche 2 règles 1 classe par niveau (5/6) 1 classe identique par niveau : class="sub"

      10. mvad-g-2 r 1 c - Menu vertical arborescent dynamique gauche 2 règles 1 10. mvad-g-2 r 1 c - Menu vertical arborescent dynamique gauche 2 règles 1 classe par niveau (6/6). menu {z-index: 1000; font-size: 90%; margin: 25 px 0 50 px 15 px; /* this page only */}. menu ul {padding: 0; margin: 0; list-style-type: none; width: 150 px; } /* position relative so that you can position the sub levels */. menu li {position: relative; background: #d 4 d 8 bd; height: 26 px; }. menu table {position: absolute; border-collapse: collapse; top: 0; left: 0; z-index: 100; font-size: 1 em; }. menu a, . menu a: visited {display: block; text-decoration: none; height: 25 px; line-height: 25 px; width: 149 px; color: #000; textindent: 5 px; border: 1 px solid #fff; border-width: 0 1 px 0; } * html. menu a: hover {color: #fff; background: #949 e 7 c; }. menu : hover > a {color: #fff; background: #949 e 7 c; } /* hide the sub levels and give them a positon absolute so that they take up no room */. menu ul ul {visibility: hidden; position: absolute; top: 0; left: 150 px; } 2 règles par niveau /* make the second level visible when hover on first level list OR link */. menu ul li: hover ul, . menu ul a: hover ul {visibility: visible; } /* keep the third level hidden when you hover on first level list OR link */. menu ul : hover ul ul {visibility: hidden; } /* keep the fourth level hidden when you hover on second level list OR link */. menu ul : hover ul ul {visibility: hidden; } /* keep the fifth level hidden when you hover on second level list OR link */. menu ul : hover ul ul {visibility: hidden; } /* make third level visible when you hover second level list OR link */. menu ul : hover ul {visibility: visible; } /* make the fourth level visible when you hover third level list OR link */. menu ul : hover ul {visibility: visible; } /* make the fifth level visible when you hover third level list OR link */. menu ul : hover ul {visibility: visible; }

      11. mvad-d-1 r 1 c - Menu vertical arborescent dynamique droit 1 règle 1 11. mvad-d-1 r 1 c - Menu vertical arborescent dynamique droit 1 règle 1 classe par niveau (1/3) 1 règle différente par niveau 1 classe identique par niveau : class="sub" Sources : http: //www. cssplay. co. uk/menus/ - Référence : CSSplay - Experiment with Cascading Style Sheets

      11. mvad-d-1 r 1 c - Menu vertical arborescent dynamique droit 1 règle 1 11. mvad-d-1 r 1 c - Menu vertical arborescent dynamique droit 1 règle 1 classe par niveau (2/3)

      11. mvad-d-1 r 1 c - Menu vertical arborescent dynamique droit 1 règle 1 11. mvad-d-1 r 1 c - Menu vertical arborescent dynamique droit 1 règle 1 classe par niveau (3/3). menu {z-index: 1000; font-size: 90%; float: right; margin: 25 px 0 50 px 15 px; /* this page only */}. menu ul {padding: 0; margin: 0; list-style-type: none; width: 150 px; } /* position relative so that you can position the sub levels */. menu li {position: relative; background: #d 4 d 8 bd; height: 26 px; }. menu table {position: absolute; border-collapse: collapse; top: 0; left: 0; z-index: 100; fontsize: 1 em; }. menu a, . menu a: visited {display: block; text-decoration: none; height: 25 px; line-height: 25 px; width: 149 px; color: #000; text-indent: 5 px; border: 1 px solid #fff; border-width: 0 1 px 0; } * html. menu a: hover {color: #fff; background: #949 e 7 c; }. menu : hover > a {color: #fff; background: #949 e 7 c; } /* hide the sub levels and give them a positon absolute so that they take up no room */. menu ul ul {visibility: hidden; position: absolute; top: 0; left: -150 px; } /* make the second level visible when hover on first level list OR link */ 1 règle par niveau. menu ul li: hover ul, . menu ul a: hover ul {visibility: visible; } /* keep the third level hidden when you hover on first level list OR link */. menu ul : hover ul ul {visibility: hidden; } /* keep the fourth level hidden when you hover on second level list OR link */. menu ul : hover ul ul {visibility: hidden; } /* make third level visible when you hover second level list OR link */. menu ul : hover ul {visibility: visible; } /* make the fourth level visible when you hover third level list OR link */. menu ul : hover ul {visibility: visible; }

      12. mvad-g-2 r 0 c - Menu vertical arborescent dynamique gauche 2 règles par 12. mvad-g-2 r 0 c - Menu vertical arborescent dynamique gauche 2 règles par niveau flèche-gif (1/3) 2 règles différentes par niveau 0 classe par niveau Sources : http: //www. cssplay. co. uk/menus/ - Référence : CSSplay - Experiment with Cascading Style Sheets

      12. mvad-g-2 r 0 c - Menu vertical arborescent dynamique gauche 2 règles par 12. mvad-g-2 r 0 c - Menu vertical arborescent dynamique gauche 2 règles par niveau flèche-gif (2/3)

      . menu {height: 150 px; font-size: 90%; margin: 25 px 0 50 px 15 . menu {height: 150 px; font-size: 90%; margin: 25 px 0 50 px 15 px; /* this page only */}. menu ul {position: relative; z-index: 500; padding: 0; margin: 0; list-style-type: none; width: 150 px; }. menu li {background: #d 4 d 8 bd url(shade. gif); height: 26 px; /* for IE 7 */ float: left; }. menu li. sub {background: #d 4 d 8 bd url(sub. gif) no-repeat right center; } /* get rid of the table */. menu table {position: absolute; border-collapse: collapse; top: 0; left: 0; z-index: 100; font-size: 1 em; }. menu a, . menu a: visited {display: block; text-decoration: none; height: 25 px; line-height: 25 px; width: 149 px; color: #000; text-indent: 5 px; border: 1 px solid #fff; border-width: 0 1 px 1 px; } * html. menu a: hover {color: #efa; background: #aa 7; position: relative; }. menu li: hover {position: relative; }. menu a: active, . menu a: focus {color: #efa; background: #aa 7; }. menu li: hover > a {color: #efa; background: #aa 7; } /* hide the sub levels and give them a positon absolute so that they take up no room */. menu li ul {visibility: hidden; position: absolute; top: -30 px; /* set up the overlap (minus the overrun) */ left: 100 px; /* set up the overrun area */ padding: 30 px; } /* for browsers that understand this is all you need for the flyouts */. menu li: hover > ul {visibility: visible; } /* for IE 5. 5 and IE 6 you need to style each level hover */ /* keep the third level+ hidden when you hover on first level link */. menu ul a: hover ul ul {visibility: hidden; } /* keep the fourth level+ hidden when you hover on second level link */. menu ul a: hover ul ul {visibility: hidden; } /* keep the fifth level hidden when you hover on third level link */. menu ul a: hover ul ul {visibility: hidden; } /* make the second level visible when hover on first level link */. menu ul a: hover ul {visibility: visible; } /* make third level visible when you hover second level link */. menu ul a: hover ul {visibility: visible; } /* make the fourth level visible when you hover third level link */. menu ul a: hover ul {visibility: visible; } 2 règles par niveau /* make the fifth level visible when you hover fourth level link */ 0 classe par niveau. menu ul a: hover ul {visibility: visible; } (3/3)

      13. mvad-g-mr 0 c - Menu vertical arborescent dynamique gauche mêmes règles tous niveaux 13. mvad-g-mr 0 c - Menu vertical arborescent dynamique gauche mêmes règles tous niveaux (1/3) Mêmes règles tous niveaux 0 classe par niveau Sources http: //www. cssplay. co. uk/menus/cascade. html - Référence : CSSplay - Experiment with Cascading Style Sheets

    • Top Level 1
    • Top Level 2
    • Top Level 3" src="https://present5.com/presentation/7b4b6f2f65df18535fb8cb13bfb9ff10/image-41.jpg" alt="

      • 13. mvad-g-mr 0 c - Menu vertical arborescent dynamique gauche mêmes règles tous niveaux 13. mvad-g-mr 0 c - Menu vertical arborescent dynamique gauche mêmes règles tous niveaux (3/3) #pmenu {padding: 0; margin: 25 px 0 50 px 15 px; list-style-type: none; width: 101 px; } #pmenu ul {padding: 0; margin: 0; list-style-type: none; width: 101 px; } #pmenu li {position: relative; } #pmenu a, #pmenu a: visited {display: block; width: 100 px; font-size: 10 px; color: #000; height: 23 px; line-height: 22 px; text-decoration: none; text-indent: 5 px; background: #b 2 ab 9 b; ; border: 1 px solid #fff; border-width: 0 1 px 0; } #pmenu li: hover > a {background: #dfd 7 ca; color: #c 00; } #pmenu li ul {display: none; } #pmenu li: hover > ul {display: block; position: absolute; top: 0; left: 101 px; } . . . Mêmes règles tous niveaux

      14. mvad-d-mr 0 c - Menu vertical arborescent dynamique droite mêmes règles tous niveaux 14. mvad-d-mr 0 c - Menu vertical arborescent dynamique droite mêmes règles tous niveaux (1/3) Mêmes règles tous niveaux 0 classe par niveau Sources http: //www. howtocreate. co. uk/tutorials/test. Menu. html

      14. mvad-d-mr 0 c - Menu vertical arborescent dynamique droite mêmes règles tous niveaux 14. mvad-d-mr 0 c - Menu vertical arborescent dynamique droite mêmes règles tous niveaux (2/3)

    • Monkey
    • < Ears
    • Dog
    • < Elephant

      • 14. mvad-d-mr 0 c - Menu vertical arborescent dynamique droite mêmes règles tous niveaux 14. mvad-d-mr 0 c - Menu vertical arborescent dynamique droite mêmes règles tous niveaux (3/3) ul. make. Menu * {line-height: normal ! important; } ul. make. Menu, ul. make. Menu ul {margin: 0 px; padding: 0 px; width: 160 px; cursor: default; } Mêmes règles tous niveaux ul. make. Menu {float: right; margin-left: 1 em; } ul. make. Menu li {border: 1 px solid #ff 9900; margin: 0 px 2 px; list-style-type: none; position: relative; color: #ff 9900; padding-top: 3 px; padding-bottom: 3 px; background-color: #ffffdd; -moz-border-radius-topleft: 5 px; -moz-border-radius-topright: 5 px; Bords arrondis -moz-border-radius-bottomright: 5 px; -moz-border-radius-bottomleft: 5 px; } ul. make. Menu li > ul {display: none; position: absolute; top: -1 px; left: -160 px; } ul. make. Menu li: hover {color: black; background-color: #99 ff 99; } ul. make. Menu li: hover > ul {display: block; } ul. make. Menu li a {display: block; width: 100%; text-decoration: none; color: #ff 9900; } ul. make. Menu li a: hover {color: black; } ul. make. Menu ul {display: none; position: absolute; top: 2 px; left: -160 px; }

      15. 1. mvad-g-mr 1 c - Menu vertical arborescent dynamique gauche mêmes règles tous 15. 1. mvad-g-mr 1 c - Menu vertical arborescent dynamique gauche mêmes règles tous niveaux (1/5) 1 classe identique par niveau : class="smenu" Sources http: //sarka-spip. net/production/spip. php? rubrique 156 Référence : squelette SARKA pour SPIP 1. 9. 2

      15. 1. mvad-g-mr 1 c - Menu vertical arborescent dynamique gauche mêmes règles tous 15. 1. mvad-g-mr 1 c - Menu vertical arborescent dynamique gauche mêmes règles tous niveaux (2/5)

      15. 1. mvad-g-mr 1 c - Menu vertical arborescent dynamique gauche mêmes règles tous 15. 1. mvad-g-mr 1 c - Menu vertical arborescent dynamique gauche mêmes règles tous niveaux (3/5)

    • 3. 1. 3. Lien-3 -1 -3
    • 3. 1. 4. Lien-3 -1 -4
    • 3. 1. 5. Lien-3 -1 -5
    • 3. 1. 6. Lien-3 -1 -6
    • 3. 1. 7. Lien-3 -1 -7
    • 3. 1. 8. Lien-3 -1 -8
    • 3. 1. 9. Lien-3 -1 -9
    1 classe identique par niveau : class="smenu"
  • 3. 2. Lien-3 -2
  • 3. 3. Lien-3 -3
  • 3. 4. Lien-3 -4

    • 15. 1. mvad-g-mr 1 c - Menu vertical arborescent dynamique gauche mêmes règles tous 15. 1. mvad-g-mr 1 c - Menu vertical arborescent dynamique gauche mêmes règles tous niveaux (4/5)

  • 3. 4. 5. Lien-3 -4 -5
  • 3. 4. 6. Lien-3 -4 -6
    • 1 classe identique par niveau : class="smenu"
  • 3. 5. Lien-3 -5
  • 5. Lien-5

    • 15. 1. mvad-g-mr 1 c - Menu vertical arborescent dynamique gauche mêmes règles tous 15. 1. mvad-g-mr 1 c - Menu vertical arborescent dynamique gauche mêmes règles tous niveaux (5/5) #nav 1 {padding: 0 px; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 12 px; } ul. menulist li ul {display: none; } ul. menulist li: hover > ul {display: block; } ul. menulist, ul. menulist ul {border-style: solid none; border-color: #ffffff -moz-use-text-color; border-width: 1 px 0 px; margin: 0 px; padding: 0 px; background: #a 0 a 0 a 0 none repeat scroll 0% 50%; list-style-type: none; list-style-image: none; list-style-position: outside; width: 180 px; } ul. menulist ul {position: absolute; top: -1 px; left: 180 px; } ul. menulist li {border-bottom: 1 px solid #ffffff; margin: 0 px; padding: 0 px; position: relative; } ul. menulist a {padding: 5 px; display: block; color: #ffffff; text-decoration: none; } ul. menulist a: visited {background: #a 0 a 0 a 0 none repeat scroll 0%; color: #ff 0000; } ul. menulist li. smenu > a: visited {background-image: url(images/arrow. gif) ! important; background-position: 171 px 50%; background-repeat: no-repeat; } ul. menulist a: hover { background: #00 ff 00 none repeat scroll 0% 50%; color: #000000; } ul. menulist li. smenu {background-image: url(images/arrow. gif) ! important; background-position: 171 px 50%; background-repeat: no-repeat; } ul. menulist li. smenu: hover, ul. menulist li. smenu > a: hover { background-image: url(images/arrowb. gif) ! important; background-position: 168 px 50%; background-repeat: no-repeat; background-color: #666666; }

    15. 2. mvad-d-mr 1 c - Menu vertical arborescent dynamique droite mêmes règles tous 15. 2. mvad-d-mr 1 c - Menu vertical arborescent dynamique droite mêmes règles tous niveaux (1/2) 1 classe identique par niveau : class="smenu" Sources http: //sarka-spip. net/production/spip. php? rubrique 156 Référence : squelette SARKA pour SPIP 1. 9. 2

    15. 2. mvad-d-mr 1 c - Menu vertical arborescent dynamique droite mêmes règles tous 15. 2. mvad-d-mr 1 c - Menu vertical arborescent dynamique droite mêmes règles tous niveaux (2/2) #nav 1 {padding: 0 px; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 12 px; } ul. menulist {float: right; } ul. menulist li ul {display: none; } ul. menulist li: hover > ul {display: block; } ul. menulist, ul. menulist ul {border-style: solid none; border-color: #ffffff -moz-use-text-color; border-width: 1 px 0 px; margin: 0 px; padding: 0 px; background: #a 0 a 0 a 0 none repeat scroll 0% 50%; list-style-type: none; list-style-image: none; list-style-position: outside; width: 180 px; } ul. menulist ul {position: absolute; top: -1 px; left: -182 px; } ul. menulist li {border-bottom: 1 px solid #ffffff; margin: 0 px; padding: 0 px; position: relative; } ul. menulist a {padding: 5 px; display: block; color: #ffffff; text-decoration: none; } ul. menulist a: visited {background: #a 0 a 0 a 0 none repeat scroll 0%; color: #ff 0000; } ul. menulist li. smenu > a: visited {background-image: url(images/arrow. gif) ! important; background-position: 171 px 50%; background-repeat: no-repeat; } ul. menulist a: hover { background: #00 ff 00 none repeat scroll 0% 50%; color: #000000; } ul. menulist li. smenu {background-image: url(images/arrow. gif) ! important; background-position: 171 px 50%; background-repeat: no-repeat; } ul. menulist li. smenu: hover, ul. menulist li. smenu > a: hover { background-image: url(images/arrowb. gif) ! important; background-position: 168 px 50%; background-repeat: no-repeat; background-color: #666666; }

    16. mhad-2 niv - Menu horizontal arborescent dynamique 2 niveaux (1/3) Sources http: //www. 16. mhad-2 niv - Menu horizontal arborescent dynamique 2 niveaux (1/3) Sources http: //www. cssplay. co. uk/menus/drop_line. html - Référence : Copyright (c) 2005 -2007 Stu Nicholls. All rights reserved

    16. mhad-2 niv - (3/3). menu {position: relative; width: 750 px; height: 2 em; 16. mhad-2 niv - (3/3). menu {position: relative; width: 750 px; height: 2 em; background: #b 7 c 6 ac; border-top: 10 px solid #b 7 c 6 ac; padding-bottom: 1 px; background: #b 7 c 6 ac url(drop/line. gif) bottom left repeat-x; margin-bottom: 5 em; } * html. menu {padding-bottom: 0; }. menu ul {list-style-type: none; padding: 0; margin: 0 0 0 20 px; width: 730 px; height: 100%; }. menu li {float: left; }. menu table {position: absolute; border-collapse: collapse; left: 0; top: 0; }. menu a, . menu : visited {color: #fff; text-decoration: none; }. menu a em. lft, . menu : visited em. lft {display: block; float: left; width: 5 px; height: 2 em; background: transparent url(drop/lefta. gif); border-bottom: 1 px solid #777; }. menu a b, . menu : visited b {display: block; font-weight: normal; float: left; padding: 0 10 px; height: 2 em; line-height: 1. 9 em; background: transparent url(drop/mida. gif); cursor: pointer; border-bottom: 1 px solid #777; }. menu a em. rgt, . menu : visited em. rgt {display: block; float: left; width: 5 px; height: 2 em; background: transparent url(drop/righta. gif); border-bottom: 1 px solid #777; } . menu ul ul {visibility: hidden; position: absolute; height: 2 em; top: 2 em; left: -20 px; width: 749 px; border-bottom: 1 px solid #777; border-right: 1 px solid #777; background: #ccc; }. menu : hover {white-space: normal; }. menu a: hover b {color: #000; background: transparent url(drop/midb. gif); border-bottom-color: #ccc; }. menu a: hover em. lft {background: transparent url(drop/leftb. gif); border-bottom-color: #ccc; }. menu a: hover em. rgt {background: transparent url(drop/rightb. gif); border-bottom-color: #ccc; }. menu li: hover > a b {color: #000; background: transparent url(drop/midb. gif); border-bottom-color: #ccc; }. menu li: hover > a em. lft {background: transparent url(drop/leftb. gif); border-bottom-color: #ccc; }. menu li: hover > a em. rgt {background: transparent url(drop/rightb. gif); border-bottom-color: #ccc; }. menu ul li: hover ul, . menu ul a: hover ul {display: block; visibility: visible; top: 2 em; margin-top: 1 px; }. menu ul : hover ul li {display: block; border-left: 1 px solid #777; background: #ccc; height: 2 em; }. menu ul : hover ul li a {display: block; font-size: 0. 8 em; height: 2 em; line-height: 2. 5 em; width: auto; float: left; color: #444; padding: 0 10 px; }. menu ul : hover ul li a: hover {color: #c 00; }

    17. mhvad-g-2 r 2 c - Menu horizontal vertical arborescent dynamique gauche 2 règles 17. mhvad-g-2 r 2 c - Menu horizontal vertical arborescent dynamique gauche 2 règles 2 classes par niveau (1/3) 1 classe identique par niveau : class="submenu" 1 classe différente par niveau : class="level 1" pour le menu de niveau 1 class="level 2" pour le menu de niveau 2 class="level 3" pour le menu de niveau 3 Même code HTML que pour class="level 4" pour le menu de niveau 4 9. mvad-g-1 r 2 c class="level 5" pour le menu de niveau 5 . . . Sources : http: //more. ericmeyeroncss. com/dloads/ - Référence : More Eric Meyer on CSS.

    17. mhvad-g-2 r 2 c - Menu horizontal vertical arborescent dynamique gauche 2 règles 17. mhvad-g-2 r 2 c - Menu horizontal vertical arborescent dynamique gauche 2 règles 2 classes par niveau (3/3) body {background: #EEE; color: #000; behavior: url(csshover. htc); } /* Win. IE behavior call */ h 1 {color: #AAA; border-bottom: 1 px solid; margin-bottom: 0; } #main {color: #CCC; margin-left: 7 em; padding: 2 em 0 1 px 5%; border-left: 1 px solid; } div#nav {float: left; margin: -1 px 0 0 7 em; background: #FFF; border: 1 px solid #AAA; } div#nav ul {margin: 0; padding: 0; background: white; border: 1 px solid #CCC; border-width: 0 1 px; } div#nav li {position: relative; list-style: none; margin: 0; float: left; width: 7 em; line-height: 1 em; } div#nav li: hover {background: #EBB; } div#nav li. submenu {background: url(dropmenu. gif) 95% 50% no-repeat; } div#nav li. submenu: hover {background-color: #EDD; } div#nav li a {display: block; padding: 0. 25 em 0. 5 em; text-decoration: none; width: 6. 5 em; } div#nav>ul a {width: auto; } div#nav ul ul {position: absolute; width: 7 em; display: none; } div#nav ul ul li {border-bottom: 1 px solid #CCC; } div#nav li. submenu {background: url(submenu. gif) 95% 50% no-repeat; } div#nav li. submenu: hover {background-color: #EDD; } div#nav ul. level 1 li. submenu: hover ul. level 2, div#nav ul. level 2 li. submenu: hover ul. level 3, div#nav ul. level 2 li. submenu ul. level 3 li. submenu: hover ul. level 4 {display: block; } div#nav ul. level 2 {top: 1. 5 em; left: -1 px; } div#nav ul. level 3 {top: -1 px; left: 7 em; border-top: 1 px solid #CCC; } div#nav ul. level 4 {top: -1 px; left: 7 em; border-top: 1 px solid #CCC; }

    18. mhvad-mr 0 c- Menu horizontal vertical arborescent dynamique gauche mêmes règles tous niveaux 18. mhvad-mr 0 c- Menu horizontal vertical arborescent dynamique gauche mêmes règles tous niveaux (1/3) Mêmes règles tous niveaux 0 classe par niveau Sources : http: //www. cssplay. co. uk/menus/pro_drop 2 - Référence : CSSplay - Experiment with Cascading Style Sheets

  • Top Level 1
  • Top Level 2
  • Top Level 3" src="https://present5.com/presentation/7b4b6f2f65df18535fb8cb13bfb9ff10/image-60.jpg" alt="

    • 18. mhvad-mr 0 c- Menu horizontal vertical arborescent dynamique gauche mêmes règles tous niveaux 18. mhvad-mr 0 c- Menu horizontal vertical arborescent dynamique gauche mêmes règles tous niveaux (3/3) #pmenu, #pmenu ul {padding: 0; margin: 0; list-style-type: none; } Mêmes règles tous niveaux #pmenu {margin: 25 px 0 200 px 15 px; } 0 classe par niveau #pmenu li {float: left; position: relative; } #pmenu a, #pmenu a: visited {display: block; width: 100 px; font-size: 10 px; color: #000; height: 23 px; line-height: 22 px; text-decoration: none; text-indent: 5 px; background: #b 2 ab 9 b; border: 1 px solid #fff; border-width: 0 1 px 0; } #pmenu li: hover > a {background: #dfd 7 ca; color: #c 00; } #pmenu li ul {display: none; } #pmenu li: hover > ul {display: block; position: absolute; top: 0; left: 101 px; } #pmenu > li: hover > ul {left: 0; top: 24 px; }

    19. mhvad-nrnc- Menu horizontal vertical arborescent dynamique professionnel n 1 règles n 2 class 19. mhvad-nrnc- Menu horizontal vertical arborescent dynamique professionnel n 1 règles n 2 class par niveaux (1/6) 5 id différents, un par rubrique principale 6 fois class top, une par rubrique principale 6 fois class top_link, une par rubrique principale 4 fois class down, une par sous-menu de 2 e niveau 8 fois class fly, une fois par sous-menu n 1 règles par niveau Sources : http: //www. cssplay. co. uk/menus/pro_drop 2 - Référence : CSSplay - Experiment with Cascading Style Sheets

  • Home
  • Home

    • Services

    19. mhvad-nrnc- Menu horizontal vertical arborescent dynamique professionnel n 1 règles n 2 class 19. mhvad-nrnc- Menu horizontal vertical arborescent dynamique professionnel n 1 règles n 2 class par niveaux (4/6)

  • French
  • German
  • Spanish
    • 5 id différents, un par rubrique principale
  • Australian
    • 6 fois class top, une par rubrique principale
  • Asian
    • 6 fois class top_link, une par rubrique principale 4 fois class down, une par sous-menu de 2 e niveau
  • Buying
    • 8 fois class fly, une fois par sous-menu
  • Photographers
  • Stockist
  • General
  • Shop
  • Privacy Policy

    • 19. mhvad-nrnc- Menu horizontal vertical arborescent dynamique professionnel n 1 règles n 2 class 19. mhvad-nrnc- Menu horizontal vertical arborescent dynamique professionnel n 1 règles n 2 class par niveaux (5/6) /*Credits: CSSplay */ /*URL: http: //www. cssplay. co. uk/menus/pro_drop 2 */. preload 2 {background: url(prodrop 2/button 4. gif); }. menu 2 {padding: 0 0 0 32 px; margin: 0; list-style: none; height: 40 px; background: #fff url(prodrop 2/button 1 a. gif) repeat-x; position: relative; font-family: arial, verdana, sans-serif; }. menu 2 li. top {display: block; float: left; position: relative; }. menu 2 li a. top_link {display: block; float: left; height: 40 px; line-height: 33 px; color: #bbb; text-decoration: none; font-size: 11 px; font-weight: bold; padding: 0 0 0 12 px; cursor: pointer; }. menu 2 li a. top_link span {float: left; display: block; padding: 0 24 px 0 12 px; height: 40 px; }. menu 2 li a. top_link span. down {float: left; display: block; padding: 0 24 px 0 12 px; height: 40 px; background: url(prodrop 2/down. gif) no-repeat right top; }. menu 2 li a. top_link: hover {color: #fff; background: url(prodrop 2/button 4. gif) no-repeat; }. menu 2 li a. top_link: hover span {background: url(prodrop 2/button 4. gif) no-repeat right top; }. menu 2 li a. top_link: hover span. down {background: url(prodrop 2/button 4 a. gif) no-repeat right top; }. menu 2 li: hover > a. top_link {color: #fff; background: url(prodrop 2/button 4. gif) no-repeat; }. menu 2 li: hover > a. top_link span {background: url(prodrop 2/button 4. gif) no-repeat right top; }. menu 2 li: hover > a. top_link span. down {background: url(prodrop 2/button 4 a. gif) no-repeat right top; }. menu 2 table {border-collapse: collapse; width: 0; height: 0; position: absolute; top: 0; left: 0; } /* Default link styling */ /* Style the list OR link hover. Depends on which browser is used */. menu 2 a: hover {visibility: visible; }. menu 2 li: hover {position: relative; z-index: 200; }

    19. mhvad-nrnc- Menu horizontal vertical arborescent dynamique professionnel n 1 règles n 2 class 19. mhvad-nrnc- Menu horizontal vertical arborescent dynamique professionnel n 1 règles n 2 class par niveaux (6/6) /*Credits: CSSplay */ /*URL: http: //www. cssplay. co. uk/menus/pro_drop 2 */ /* keep the 'next' level invisible by placing it off screen. */. menu 2 ul, . menu 2 : hover ul : hover ul : hover ul ul {position: absolute; left: -9999 px; top: -9999 px; width: 0; height: 0; margin: 0; padding: 0; list-style: none; }. menu 2 : hover ul. sub {left: 2 px; top: 40 px; background: #fff; padding: 3 px 0; border: 1 px solid #4 ab; white-space: nowrap; width: 93 px; height: auto; }. menu 2 : hover ul. sub li {display: block; height: 20 px; position: relative; float: left; width: 90 px; }. menu 2 : hover ul. sub li a {display: block; font-size: 11 px; height: 20 px; width: 87 px; line-height: 20 px; text-indent: 5 px; color: #000; text-decoration: none; border: 3 px solid #fff; border-width: 0 0 0 3 px; }. menu 2 : hover ul. sub li a. fly {background: #fff url(prodrop 2/arrow. gif) 80 px 7 px no-repeat; }. menu 2 : hover ul. sub li a: hover {background: #4 ab; color: #fff; }. menu 2 : hover ul. sub li a. fly: hover {background: #4 ab url(prodrop 2/arrow_over. gif) 80 px 7 px no-repeat; color: #fff; }. menu 2 : hover ul li: hover > a. fly {background: #4 ab url(prodrop 2/arrow_over. gif) 80 px 7 px no-repeat; color: #fff; } . menu 2 : hover ul : hover ul, . menu 2 : hover ul : hover ul {left: 90 px; top: -4 px; background: #fff; padding: 3 px 0; border: 1 px solid #4 ab; white-space: nowrap; width: 93 px; z-index: 200; height: auto; }

    20. mhvad-mr 0 c- Menu horizontal vertical arborescent dynamique 0 classe mêmes règles tous 20. mhvad-mr 0 c- Menu horizontal vertical arborescent dynamique 0 classe mêmes règles tous niveaux (1/4) Mêmes règles tous niveaux 0 classe par niveau Utilise javascript Sources http: //dosimple. ch/articles/Menus-dynamiques/menu. Horizontal. html - Référence : do. Simple : http: //dosimple. ch/articles/Menus-dynamiques/

    Mêmes règles tous niveaux " src="https://present5.com/presentation/7b4b6f2f65df18535fb8cb13bfb9ff10/image-69.jpg" alt="20. mhvad-mr 0 c Utilise javascript (2/4)

    20. mhvad-mr 0 c- Menu horizontal vertical arborescent dynamique 0 classe mêmes règles tous 20. mhvad-mr 0 c- Menu horizontal vertical arborescent dynamique 0 classe mêmes règles tous niveaux (3/4) Mêmes règles tous niveaux 0 classe par niveau Utilise javascript

    20. mhvad-mr 0 c- Menu horizontal vertical arborescent dynamique 0 classe mêmes règles tous 20. mhvad-mr 0 c- Menu horizontal vertical arborescent dynamique 0 classe mêmes règles tous niveaux (4/4) Fichier importé : menu. css /* CSS du menu horizontal, bieler batiste */ Mêmes règles tous niveaux Utilise javascript . menu {position: absolute; display: block; margin: 0; padding: 0; width: 500 px; }. menu ul {position: absolute; display: block; width: 124 px; /*margin: 0; */ padding: 0; }. menu li ul {visibility: hidden; }. menu li li ul {position: absolute; margin-left: 124 px; margin-top: -23 px; }. menu li {list-style: none; width: 124 px; height: auto; display: inline; display/**/: block; float: none; float/**/: left; margin: 0; padding: 0; }. menu li li {display: block; float: none; } * html. menu li li { display: inline; } /* correct a little IE bug */. menu a {text-align: center; background-color: #9 cf; border: 1 px #666 solid; color: #000; display: block; width: 120 px; text-decoration: none; padding: 2 px 0; margin: 1 px; }. menu a: hover {background-color: #eee; border: 1 px #aaa solid; }. menu a: focus {background-color: #aaf; } /* for a mozilla better display with key nav */ a. link. Over {background-color: #eee; }

    21. mvad-mr 0 c- Menu vertical arborescent dynamique 0 classe mêmes règles tous niveaux 21. mvad-mr 0 c- Menu vertical arborescent dynamique 0 classe mêmes règles tous niveaux (1/4) Mêmes règles tous niveaux 0 classe par niveau Utilise javascript Sources http: //dosimple. ch/articles/Menus-dynamiques/menu. Vertical. html - Référence : do. Simple : http: //dosimple. ch/articles/Menus-dynamiques/

    Mêmes règles tous niveaux " src="https://present5.com/presentation/7b4b6f2f65df18535fb8cb13bfb9ff10/image-73.jpg" alt="21. mhvad-mr 0 c Utilise javascript (2/4)

    21. mhvad-mr 0 c- Menu horizontal vertical arborescent dynamique 0 classe mêmes règles tous 21. mhvad-mr 0 c- Menu horizontal vertical arborescent dynamique 0 classe mêmes règles tous niveaux (3/4) Mêmes règles tous niveaux 0 classe par niveau Utilise javascript

    21. mhvad-mr 0 c Utilise javascript (4/4) Fichier importé : menu. css Mêmes règles 21. mhvad-mr 0 c Utilise javascript (4/4) Fichier importé : menu. css Mêmes règles tous niveaux Utilise javascript /* CSS du menu vertical, bieler batiste */ body {margin-left: 15 em; }. menu {position: absolute; /* solve a Opera 7/IE display bug */ width: 152 px; width/**/: 150 px; border-top: 1 px #000 solid; border-left: 1 px #000 solid; border-right: 1 px #000 solid; margin: 0; padding: 0; }. menu span {display: none; }. menu ul {border-top: 1 px #000 solid; border-left: 1 px #000 solid; border-right: 1 px #000 solid; margin: 0; padding: 0; position: absolute; /* important */ width: 152 px; width/**/: 150 px; }. menu li ul {visibility: hidden; }. menu li ul {margin-left: 150 px; /* be careful */ margin-top: -24 px; }. menu a {text-align: center; background-color: #ff 9; color: #000; text-weight: bold; display: block; width: 150 px; border-bottom: 1 px #000 solid; text-decoration: none; margin: 0; padding: 3 px 0; /* em units can creat little graphic bug in mozilla */}. menu a: hover {background-color: #aaf; }. menu a: focus {background-color: #aaf; } /* for a mozilla better display with key nav */. menu span { /* hide some accessibility stuff */ display: none; }. menu li {width: 150 px; display: block; float: left; list-style: none; margin: 0; padding: 0; } * html. menu li {display: inline; /* solve a IE PC list bug */ float: none; /* solve a IE 5 clav nav bug */} /* IE PC selector */ a. link. Over {background-color: #eee; }

    22. mvac-mr 0 c- Menu vertical arborescent contextuel 0 classe mêmes règles tous niveaux 22. mvac-mr 0 c- Menu vertical arborescent contextuel 0 classe mêmes règles tous niveaux (1/4) Mêmes règles tous niveaux, 0 classe par niveau utilise javascript

    22. mvac-mr 0 c (2/4)