[Summary view] [Print] [Text view]

   1  /* $Id: nice_menus_default.css,v 1.6 2007/10/29 16:38:28 add1sun Exp $ */
   2  /*
   3    This is the default layout template for nice menus, and will provide
   4    a starting point for the look of your menus. To customize, it's
   5    recommended to create a custom CSS file using this file as a template,
   6    then configure the module to use your custom CSS file
   7    (this is done in the global settings tab of the theme administration.)
   8  
   9    To help understand the CSS, the HTML looks like this, where
  10      x is a number;
  11      TYPE is down/left/right;
  12      PATH is the menu path such as node/343;
  13      MID is the menu id such as 33):
  14    <ul id='nice-menu-x' class='nice-menu nice-menu-TYPE'>
  15      <li id='menu-MID' class='menu-path-PATH'><a href='#'>This is a menu item</a></li>
  16      <li class='menuparent menu-path-PATH'><a href='#'>A submenu</a>
  17        <ul...><li...>...</li>
  18        </ul>
  19      </li>
  20      ...
  21    </ul>
  22  
  23    If you have more than one nice-menu and want to target a particular one,
  24    use its id (e.g. ul#nice-menu-2).
  25  
  26    See README.txt and the handbook page (http://drupal.org/node/185543)
  27    for some CSS customization examples.
  28  */
  29  
  30  /******************************
  31   Global CSS for ALL menu types
  32  ******************************/
  33  
  34  ul.nice-menu,
  35  ul.nice-menu ul {
  36    list-style: none;
  37    padding: 0;
  38    margin: 0;
  39    border-top: 1px solid #ccc;
  40  }
  41  
  42  ul.nice-menu li {
  43    border: 1px solid #ccc;
  44    border-top: 0;
  45    float: left;
  46    background-color: #eee;
  47    /* Additional overrides to deal with Garland theme. */
  48    margin: 0;
  49    padding-left: 0;
  50    background-image: none;
  51  }
  52  
  53  /* Overrides for Garland header. */
  54  #header-region ul.nice-menu li {
  55    margin: 0;
  56    /* Padding rules are needed to deal with Garland's header line-height. */
  57    padding-top: 0.1em;
  58    padding-bottom: 0.1em;
  59    background: #eee;
  60  }
  61  
  62  ul.nice-menu a {
  63    padding: 0.3em 5px 0.3em 5px;
  64  }
  65  
  66  ul.nice-menu ul,
  67  /* Repeat for Garland header. */
  68  #header-region ul.nice-menu ul {
  69    top: 1.8em;
  70    left: -1px;
  71    border: 0;
  72    border-top: 1px solid #ccc;
  73    margin-right: 0;
  74  }
  75  
  76  /* Override for Garland header. */
  77  #header-region ul.nice-menu ul {
  78    top: 1.7em;
  79  }
  80  
  81  ul.nice-menu ul li {
  82    width: 12.5em;
  83  }
  84  
  85  /******************************
  86   VERTICAL (left/right) menus
  87  ******************************/
  88  
  89  /* This is the default width of all vertical menus. */
  90  ul.nice-menu-right, ul.nice-menu-left,
  91  ul.nice-menu-right li, ul.nice-menu-left li {
  92    width: 12.5em;
  93  }
  94  
  95  /* VERTICAL menus where submenus pop RIGHT (default). */
  96  ul.nice-menu-right ul {
  97    width: 12.5em;
  98    left: 12.5em;
  99    top: -1px;
 100  }
 101  
 102  ul.nice-menu-right ul ul {
 103    width: 12.5em;
 104    left: 12.5em;
 105    top: -1px;
 106  }
 107  
 108  ul.nice-menu-right li.menuparent,
 109  ul.nice-menu-right li li.menuparent {
 110    background: #eee url(arrow-right.png) right center no-repeat;
 111  }
 112  
 113  ul.nice-menu-right li.menuparent:hover,
 114  ul.nice-menu-right li.over,
 115  ul.nice-menu-right li li.menuparent:hover,
 116  ul.nice-menu-right li li.over {
 117    background: #ccc url(arrow-right.png) right center no-repeat;
 118  }
 119  
 120  /* VERTICAL menus where submenus pop LEFT. */
 121  ul.nice-menu-left li ul {
 122    width: 12.5em;
 123    left: -12.65em;
 124    top: -1px;
 125  }
 126  
 127  ul.nice-menu-left li ul li ul {
 128    width: 12.5em;
 129    left: -12.65em;
 130    top: -1px;
 131  }
 132  
 133  ul.nice-menu-left li.menuparent,
 134  ul.nice-menu-left li li.menuparent {
 135    background: #eee url(arrow-left.png) left center no-repeat;
 136  }
 137  
 138  ul.nice-menu-left li.menuparent:hover,
 139  ul.nice-menu-left li.over,
 140  ul.nice-menu-left li li.menuparent:hover,
 141  ul.nice-menu-left li li.over {
 142    background: #ccc url(arrow-left.png) left center no-repeat;
 143  }
 144  
 145  ul.nice-menu-left a, ul.nice-menu-left ul a {
 146    padding-left: 14px;
 147  }
 148  
 149  /******************************
 150   HORIZONTAL (down) menus
 151  ******************************/
 152  
 153  ul.nice-menu-down {
 154    float: left;
 155    border: 0;
 156  }
 157  
 158  ul.nice-menu-down li {
 159    border-top: 1px solid #ccc;
 160  }
 161  
 162  ul.nice-menu-down li li {
 163    border-top: 0;
 164  }
 165  
 166  ul.nice-menu-down ul {
 167    left: 0;
 168  }
 169  
 170  ul.nice-menu-down ul li {
 171    clear: both;
 172  }
 173  
 174  ul.nice-menu-down li ul li ul,
 175  /* Repeat for Garland header. */
 176  #header-region ul.nice-menu-down li ul li ul {
 177    left: 12.5em;
 178    top: -1px;
 179  }
 180  
 181  ul.nice-menu-down .menuparent a {
 182    padding-right: 15px;
 183  }
 184  
 185  ul.nice-menu-down li.menuparent,
 186  /* Repeat for Garland header. */
 187  #header-region ul.nice-menu-down li.menuparent {
 188    background: #eee url(arrow-down.png) right center no-repeat;
 189  }
 190  
 191  ul.nice-menu-down li.menuparent:hover,
 192  ul.nice-menu-down li.over,
 193  /* Repeat for Garland header. */
 194  #header-region ul.nice-menu-down li.menuparent:hover,
 195  #header-region ul.nice-menu-down li.over {
 196    background: #ccc url(arrow-down.png) right center no-repeat;
 197  }
 198  
 199  ul.nice-menu-down li li.menuparent,
 200  /* Repeat for Garland header. */
 201  #header-region ul.nice-menu-down li li.menuparent {
 202    background: #eee url(arrow-right.png) right center no-repeat;
 203  }
 204  
 205  ul.nice-menu-down li li.menuparent:hover,
 206  ul.nice-menu-down li li.over,
 207  /* Repeat for Garland header. */
 208  #header-region ul.nice-menu-down li li.menuparent:hover,
 209  #header-region ul.nice-menu-down li li.over {
 210    background: #ccc url(arrow-right.png) right center no-repeat;
 211  }