Tags: Menu

Sort by: Date / Title /

  1. Menu déroulant qui se déroule/cache quand la souris est dessus avec JQuery
    1 month ago by angenoir
    Menu déroulant utilisant la librairie Javascript Jquery
    1. <script src="http://iscripting.net/jquery/jquery_1.2.1.js"></script>
    2. <script>
    3. $(document).ready(function(){
    4.  
    5. $("#drop_down").hide();
    6. $("#drop_down").animate({
    7.  
    8. opacity:0.5
    9.  
    10. });
    11.  
    12.  
    13. $("a:contains('blah')").mouseover(function() {
    14.  
    15. $("#drop_down").show("slow");
    16.  
    17. });
    18.  
    19. $("#drop_down").mouseout(function(){
    20.  
    21. $(this).hide('slow');
    22.  
    23. });
    24.  
    25.  
    26.  
    27. });
    28. </script>
    29. <style>
    30. #drop_down {
    31. background:olive;
    32. width:100px;
    33. height:200px;
    34. z-index:1;
    35. }
    36.  
    37. #hori_menu {
    38. height:60px;
    39. border: 2px solid #EEEEEE;
    40. width:400px;
    41. }
    42. </style>
    43.  
    44. <div id="hori_menu">
    45. <a href="#">Google</a>
    46. <br />
    47. <div id="drop_down">
    48. Bleh<br />
    49. Blub<br />
    50. Burp<br />
    51.  
    52. Items
    53. </div>
    54. </div>
    View source | 1
  2. Menu horizontal a images réactives en CSS
    8 months ago by daoro
    1. /* Pour le code xhtml voir plus tout en bas */
    2. /******** MENU ********/
    3. #nav {
    4. height: 25px !important;  /* Hauteur de la barre de menu*/
    5. background: url(images/bg_barre.png) repeat-x; /* Fond d'écran de la barre' */
    6. padding: 0 0 0 12px; /* Marge interne pour décaler les boutons et afficher la barre. Taille = (largeur totale - largeur des boutons)/2 */
    7. border-right: 1px #e7e2cb solid; /* Liaison header <--> contenu */
    8. border-left: 1px #e7e2cb solid;
    9. }
    10.  
    11. #menu {
    12. margin: 0;
    13. width: 776px; /* Taille des boutons */
    14. height: 25px; /* Hauteur de mes boutons */
    15. list-style: none; /* Ne pas afficher les puces */
    16. display: inline; /* Mode en ligne */
    17. overflow: hidden; /* Si le texte sort du cadre, ne pas l'afficher*/
    18. text-indent: -1000px; /* On fait disparaitre le texte en décalant de 1000px la première ligne. Il sort du cadre, et disparait */
    19. }
    20.  
    21. #menu li {
    22. margin: 0;
    23. padding: 0;
    24. list-style: none; /* cf. ci-dessus, nécessaire pour un affichage correct */
    25. display: inline;
    26. }
    27.  
    28. #menu a {
    29. float: left;
    30. padding: 0;
    31. overflow: hidden;
    32. width: 194px !important;
    33. }
    34.  
    35. #menu a:hover {
    36. background-position: 0 -25px; /* Décalage pour faire réagir l'image au survol de la souris */
    37. }
    38.  
    39.  
    40. /******* ITEMS DU MENU ******/
    41. #home a {
    42. height: 25px; /* Hauteur du bouton */
    43. width: 194px; /* Largeur du bouton */
    44. background: url(images/home.png) top left no-repeat; /* Image du bouton */
    45. }       
    46.  
    47. #about a {
    48. height: 25px;
    49. width: 194px;
    50. background: url(images/about.png) top left no-repeat;
    51. }       
    52.  
    53. #time a {
    54. height: 25px;
    55. width: 194px;
    56. background: url(images/time.png) top left no-repeat;
    57. }
    58.  
    59. #date a {
    60. height: 25px;
    61. width: 194px;
    62. background: url(images/date.png) top left no-repeat;
    63. }
    64. </style>
    65.  
    66. /* Le menu lui-même (sémantiquement correct)
    67. <div id="nav">
    68. <ul id="menu">
    69. <li id="home"><a href="#">Home</a></li>
    70. <li id="about"><a href="#">About</a></li>
    71. <li id="time"><a href="#">Time</a></li>
    72. <li id="date"><a href="#">Date</a></li>
    73. </ul>
    74. </div>
    75. */
    View source | 0

First / Previous / Next / Last / Page 1 of 1 (2 posteets)