Se connecter avec
S'enregistrer | Connectez-vous

Codes sources de pages webs

Dernière réponse : dans Programmation

Salut encore les amis, je suis là pour vous demander de l'aide mais cette fois ci en programmation web!
Tout d'abord je vous conseil de faire un tour sur www.developpez.com et pointez sur leurs différents rubriques (ex: LANGAGE) et vous verrez le menu qui s'affichera en bas lorsque la sourie y est toujours dessu. Maintenant la question est de savoir comment mettre en place une telle chose, quel langage faut-il utiliser (avec les codes s'il vous plaît !) ?

Autres pages sur : codes sources pages webs

Lassé par la pub ? Créez un compte
Expert Programmation

Je t'ai dit que ça se trouvait dans la source du site...
Allez, je t'ai extrait les parties intéressantes.

Le CSS:
  1. #gabarit_tabmenu #tabs
  2. {
  3.   background-image: url('./images/general/tabmenu-left-background.png');
  4.   background-repeat: no-repeat;
  5.   padding-left: 0.75em;
  6.   height: 33px;
  7. }
  8.  
  9. #gabarit_tabmenu #tabs .first
  10. {
  11.   background-image: none;
  12.   padding: 0;
  13. }
  14.  
  15. #gabarit_tabmenu #tabs li
  16. {
  17.   float: left;
  18.   position: relative;
  19.   display: block;
  20.   font-size: 13px;
  21.   line-height: 35px;
  22.   color: #D8D7D7;
  23.   z-index: 100;
  24.   height: 33px;
  25.   margin-right: 4px;
  26.   padding-left: 4px;
  27.   background-image: url('./images/general/tabmenu-separator.png');
  28.   background-repeat: no-repeat;
  29. }
  30.  
  31. /* IE7 Hack */
  32. *+html #gabarit_tabmenu #tabs li
  33. {
  34.   line-height: 36px;
  35. }
  36.  
  37. #gabarit_tabmenu #tabs li a
  38. {
  39.   font-size: 1em;
  40.   color: #FFF;
  41.   padding: 0 2px;
  42.   display: block;
  43.   height: 100%;
  44. }
  45.  
  46. * html #gabarit_tabmenu #tabs li a
  47. {
  48.   display: inline-block;
  49. }
  50.  
  51. #gabarit_tabmenu #tabs li:hover > a
  52. {
  53.   background-image: url('./images/general/tabmenu-background-over.png');
  54.   background-repeat: repeat-x;
  55. }
  56.  
  57. #gabarit_tabmenu #tabs li a:hover
  58. {
  59.   text-decoration: none;
  60.   background-image: url('./images/general/tabmenu-background-over.png');
  61.   background-repeat: repeat-x;
  62. }
  63.  
  64. #gabarit_tabmenu #tabs li a.selected
  65. {
  66.   background-image: url('./images/general/tabmenu-background-over.png');
  67.   background-repeat: repeat-x;
  68. }
  69.  
  70. #gabarit_tabmenu #tabs li:hover a
  71. {
  72.   color: #FFF;
  73. }
  74.  
  75. #gabarit_tabmenu #tabs li a .tooltip
  76. {
  77.   display: none;
  78. }
  79.  
  80. #gabarit_tabmenu #tabs li a:hover .tooltip
  81. {
  82.   display: block;
  83.   position: absolute;
  84.   z-index: 555;
  85.   color: #25457D;
  86.   padding-left: 5px;
  87.   border: 1px solid #bbb;
  88.   background: #ffc;
  89.   font-weight: normal;
  90.   font-size: 10px;
  91.   width: 256px;
  92.   height: 18px;
  93.   line-height: 18px;
  94.   top: -19px;
  95. }
  96.  
  97. #gabarit_tabmenu #tabs li.last a:hover .tooltip
  98. {
  99.   left: -110px;
  100.   width: 185px;
  101. }
  102.  
  103. #gabarit_tabmenu #tabs li.prelast a:hover .tooltip
  104. {
  105.   width: 150px;
  106. }
  107.  
  108. *+html #gabarit_tabmenu #tabs li a:hover .tooltip
  109. {
  110.   left: 4px;
  111. }
  112.  
  113. #gabarit_tabmenu #tabs li ul.submenu
  114. {
  115.   display: none;
  116. }
  117.  
  118. #gabarit_tabmenu #tabs li:hover a + ul.submenu, #gabarit_tabmenu #tabs li:hover ul.submenu
  119. {
  120.   display: block;
  121.   position: absolute;
  122.   top: 33px;
  123.   width: 185px;
  124.   border: 1px solid #CCCCCC;
  125.   border-bottom: 2px solid #3964AF;
  126.   background-color: #F9F9F9;
  127. }
  128.  
  129. #gabarit_tabmenu #tabs li:hover ul.submenu
  130. {
  131.   display: block;
  132.   position: absolute;
  133.   top: 33px;
  134.   width: 185px;
  135.   border: 1px solid #CCCCCC;
  136.   border-bottom: 2px solid #3964AF;
  137.   background-color: #F9F9F9;
  138. }
  139.  
  140. /* IE7 Hack */
  141. *+html #gabarit_tabmenu #tabs li:hover a + ul.submenu
  142. {
  143.   top: 33px;
  144.   left: 4px;
  145. }
  146.  
  147. /* IE7 Hack */
  148. *+html #gabarit_tabmenu #tabs .first .submenu
  149. {
  150.   left: 0;
  151. }
  152.  
  153. #gabarit_tabmenu #tabs .last .submenu
  154. {
  155.   left: -105px;
  156. }
  157.  
  158. /* IE7 Hack */
  159. *+html #gabarit_tabmenu #tabs .last:hover a + ul.submenu
  160. {
  161.   left: -105px;
  162. }
  163.  
  164. #gabarit_tabmenu #tabs li .submenu li
  165. {
  166.   display: block;
  167.   clear: both;
  168.   border-bottom: 1px solid #CCCCCC;
  169.   background-image: none;
  170.   padding: 0;
  171.   margin: 0;
  172.   width: 100%;
  173.   height: 20px;
  174.   font-size: 0.8em;
  175.   line-height: 2.1em;
  176. }
  177.  
  178. #gabarit_tabmenu #tabs li .submenu li:hover
  179. {
  180.   background-image: url('./images/general/menu-item-background.png');
  181.   background-repeat: repeat-x;
  182. }
  183.  
  184. #gabarit_tabmenu #tabs li .submenu .last
  185. {
  186.   border-bottom: none;
  187. }
  188.  
  189. #gabarit_tabmenu #tabs li .submenu li a
  190. {
  191.   color: #3964AF;
  192.   white-space: nowrap;
  193.   width: 175px;
  194.   height: 100%;
  195.   display: block;
  196.   padding: 0 0.5em;
  197.   margin: 0;
  198.   background-image: none;
  199.   text-align: left;
  200. }
  201.  
  202. #gabarit_tabmenu #tabs li .submenu li:hover a
  203. {
  204.   color: #FFF;
  205.   background-image: none;
  206. }
  207.  
  208. #gabarit_tabmenu #tabs li .submenu li a:hover
  209. {
  210.   color: #FFF;
  211.   text-decoration: none;
  212. }
  213.  
  214. /* IE6 Hack */
  215. * html #gabarit_tabmenu #tabs .item a
  216. {
  217.   margin-bottom: -8px;
  218. }
  219.  
  220. #gabarit_tabmenu #tabs li .submenu li ul.submenu2
  221. {
  222.   display: none;
  223. }
  224.  
  225. #gabarit_tabmenu #tabs li ul.submenu li:hover ul.submenu2
  226. {
  227.   display: block;
  228.   position: absolute;
  229.   top: 0;
  230.   left: 185px;
  231.   width: 185px;
  232.   border: 1px solid #CCCCCC;
  233.   border-bottom: 2px solid #3964AF;
  234.   background-color: #F9F9F9;
  235. }
  236.  
  237. #gabarit_tabmenu #tabs li .submenu li .submenu2 li a
  238. {
  239.   color: #3964AF;
  240.   font-size: 10px;
  241. }
  242.  
  243. #gabarit_tabmenu #tabs li .submenu li .submenu2 li a:hover
  244. {
  245.   color: #FFF;
  246. }


Et le code HTML associé
  1. <div id="gabarit_tabmenu">
  2.   <ul id="tabs">
  3.     <li class="item first">
  4.       <a class="selected" href="<a href="http://www.developpez.com" target="_blank">http://www.developpez.com</a>">
  5.         Accueil
  6.         <span class="tooltip">
  7.           Actualités IT Pro
  8.         </span>
  9.       </a>
  10.     </li>
  11.  
  12.     <li class="item">
  13.       <a href="<a href="http://conception.developpez.com" target="_blank">http://conception.developpez.com</a>">
  14.         Conception
  15.         <span class="tooltip">
  16.           Cycle de vie du logiciel
  17.         </span>
  18.       </a>
  19.       <ul class="submenu">
  20.         <li>
  21.           <a href="<a href="http://conception.developpez.com" target="_blank">http://conception.developpez.com</a>">Conception</a>
  22.         </li>
  23.         <li>
  24.           <a href="<a href="http://uml.developpez.com" target="_blank">http://uml.developpez.com</a>">UML</a>
  25.         </li>
  26.         <li class="last">
  27.           <a href="<a href="http://merise.developpez.com" target="_blank">http://merise.developpez.com</a>">Merise</a>
  28.         </li>
  29.       </ul>
  30.     </li>
  31.   </ul>
  32. </div>

Merci infiniment mon cher akhî Omar, vraiment je suis ravis de vous rencontrer sur ce forum de Tom's guide. J'essayerai le code dans quelque jour et je vous ferai part de la suite !ET merci encore de me donner du temps !!!
Lassé par la pub ? Créez un compte

Créer un nouveau sujet

Tom's guide dans le monde