Guest User

Joomla Image Menu CSS

a guest
Apr 15th, 2013
113
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*CSS SPRITE IMAGE MENU*/
  2.  
  3. /*BASIC LIST STYLING*/
  4.  
  5. ul#menuimageid {
  6.     height: 100px;
  7.     list-style-type: none;
  8.     margin: 0 0 25px;
  9.     padding: 0;
  10.     border: none;
  11.     background-color: transparent;
  12.     overflow: visible;
  13.     }
  14.  
  15. ul#menuimageid li {
  16.     text-indent: -9999px;
  17.     width:160px;
  18.     height:100px;
  19.     float:left;
  20.     display:block;
  21.     margin: 0;
  22.     padding: 0;
  23.     border: none;
  24.     }
  25.  
  26. /*END BASIC LIST STYLING*/
  27.  
  28. /*BASIC LINK STYLING*/
  29.  
  30. ul#menuimageid li a {
  31.     width:160px;
  32.     height:100px;
  33.     display:block;
  34.     margin: 0;
  35.     padding: 0;
  36.     border: none;
  37.     background:url('../../../images/Menu-sprite2.png') 0 0;
  38.     }
  39.  
  40. /*END BASIC LINK STYLING*/
  41.  
  42. /*IMAGE LINK VISITED/LINK STYLES -First number is horizontal, second number is vertical */
  43.  
  44. ul#menuimageid li a.menustyle1:link,
  45. ul#menuimageid li a.menustyle1:visited {
  46.     background-position: 0 0;
  47.     }
  48.  
  49. ul#menuimageid li a.menustyle2:link,
  50. ul#menuimageid li a.menustyle2:visited {
  51.     background-position: -180px 0;
  52.     }
  53.  
  54. ul#menuimageid li a.menustyle3:link,
  55. ul#menuimageid li a.menustyle3:visited {
  56.     background-position: -360px 0;
  57.     }
  58.  
  59. ul#menuimageid li a.menustyle4:link,
  60. ul#menuimageid li a.menustyle4:visited {
  61.     background-position: -540px 0;
  62.     }
  63.  
  64. ul#menuimageid li a.menustyle5:link,
  65. ul#menuimageid li a.menustyle5:visited {
  66.     background-position: -720px 0;
  67.     }
  68.  
  69. ul#menuimageid li a.menustyle6:link,
  70. ul#menuimageid li a.menustyle6:visited {
  71.     background-position: -900px 0;
  72.     }
  73.  
  74. /*END IMAGE LINK VISITED/LINK STYLES*/
  75.  
  76. /*IMAGE LINK HOVER STYLES -THis part makes the rollover happen. First number is horizontal, second number is vertical */
  77.  
  78. ul#menuimageid li a.menustyle1:hover {
  79.     background-position: 0 -100px;
  80.     }
  81.  
  82. ul#menuimageid li a.menustyle2:hover {
  83.     background-position: -180px -100px;
  84.     }
  85.  
  86. ul#menuimageid li a.menustyle3:hover {
  87.     background-position: -360px -100px;
  88.     }
  89.  
  90. ul#menuimageid li a.menustyle4:hover {
  91.     background-position: -540px -100px;
  92.     }
  93.  
  94. ul#menuimageid li a.menustyle5:hover {
  95.     background-position: -720px -100px;
  96.     }
  97.  
  98. ul#menuimageid li a.menustyle6:hover {
  99.     background-position: -900px -100px;
  100.     }
  101.  
  102. /*END IMAGE LINK HOVER STYLES*/
RAW Paste Data