Posted By

dividespace on 10/21/06


Tagged

layouts Ruthsarian


Versions (?)

Who likes this?

4 people have marked this snippet as a favorite

samuraicoder
tavo
rouxmout
monapdx


rMenu.css


 / Published in: CSS
 

Ruthsarian Menus - A CSS-based dropdown menu system

  1. @charset "iso-8859-1";
  2.  
  3. /*******************************************************************************
  4. * rMenu.css : 2006.10.17 : [email protected]
  5. * [email protected]-------------
  6. * Ruthsarian Menus - A CSS-based dropdown menu system
  7. *
  8. * <insert long, boring ramble here>
  9. *
  10. * KNOWN BUGS
  11. * - Opera 7.23 and earlier have problems with absolutely positioned
  12. * elements positioned relative to a parent element. this causes a
  13. * problem with right-aligned horizontal menus. stay away from those
  14. * types of menus if you've got any reason to care about Opera 7.23 or
  15. * earlier versions.
  16. *
  17. * DEV NOTES
  18. * - setting position: relative; to ul.rMenu triggers a bug in Netscape 7
  19. * and earlier that makes content jump as menus pop
  20. * - need to remember that when assigning multiple classes to an element
  21. * to list them left-to-right from most-specific to least-specific.
  22. * Otherwise IE/Mac flips out
  23. * - IE/Mac needs whitespace before <UL> and </UL> tags in the markup
  24. * otherwise very odd things can happen
  25. * - hasLayout should not be triggered on LI elements under IE7
  26. * - IE/Mac has a selector bug where rMenu-v* and rMenu-h* rules
  27. * are applied to rMenu-v and rMenu-h elements. ie rMenu-vRight rules
  28. * get applied to rMenu-v elements. This is incorrect.
  29. * - if any parent element of the menu is a float it (or the parent of
  30. * the menu) needs to be relatively positioned. Otherwise the menu
  31. * is not rendered on the page.
  32. *
  33. * EXAMPLE HTML
  34. * <ul class="rMenu-hor rMenu"
  35. * ><li
  36. * ><a href="">Menu Item</a
  37. * > <ul class="rMenu-ver"
  38. * ><li
  39. * ><a href="">Menu Item</a
  40. * ></li
  41. * ><li
  42. * ><a href="">Menu Item</a
  43. * ></li
  44. * > </ul
  45. * ></li
  46. * ><li
  47. * ><a href="">Menu Item</a
  48. * ></li
  49. * > </ul>
  50. *
  51. * ------------------------------------------------------------------------------
  52. * This stylesheet is released into the public domain.
  53. *******************************************************************************/
  54.  
  55. /*******************************************************************************
  56.  * General Menu Mechanics
  57.  *
  58.  * Below is a set of rules which is applicable to any list used within
  59.  * this dropdown menu system. You could apply just these rules and get
  60.  * a basic dropdown menu system working just fine in FireFox, Opera,
  61.  * Safari, and most other modern browsers.
  62.  */
  63. ul.rMenu, ul.rMenu ul, ul.rMenu li, ul.rMenu a
  64. {
  65. display: block; /* make these objects blocks so they're easier
  66. to deal with */
  67. margin: 0;
  68. padding: 0; /* get rid of padding/margin values that these
  69. elements may have by default */
  70. }
  71. ul.rMenu, ul.rMenu li, ul.rMenu ul
  72. {
  73. list-style: none; /* proper browsers don't require this because
  74. block elements (see previous rule set) cannot
  75. take any list-style property. meaning
  76. existing list-style properties are removed
  77. when they are set to display: block. IE7
  78. seems to ignore this fact under certain
  79. situations so we explicitly set it here
  80. even though it's, technically, incorrect
  81. CSS (but it will validate). */
  82. }
  83. ul.rMenu ul
  84. {
  85. display: none; /* hide the sub-menus until needed */
  86. position: absolute; /* remove the sub-menus from the flow of the
  87. layout so when they pop they don't cause any
  88. disfiguration of the layout */
  89. }
  90. ul.rMenu li
  91. {
  92. position: relative; /* so sub-menus position relative to their
  93. parent LI element */
  94. }
  95. ul.rMenu li:hover
  96. {
  97. z-index: 999; /* make sure this and any sub-menus that pop
  98. appear above everything else on the page */
  99. }
  100. ul.rMenu li:hover > ul
  101. {
  102. display: block; /* show the sub-menu */
  103. }
  104.  
  105. /*******************************************************************************
  106.  * Extended Menu Mechanics
  107.  *
  108.  * These rules exist only for specific menu types, such as horizontal or
  109.  * vertical menus, right or left aligned menus.
  110.  */
  111. ul.rMenu-hor li
  112. {
  113. float: left;
  114. width: auto;
  115. }
  116. ul.rMenu-hRight li
  117. {
  118. float: right; /* horizontal, right menus need their LI
  119. elements floated to get them over there */
  120. }
  121. ul.rMenu-ver li
  122. {
  123. float: none; /* clear this so vertical sub-menus that are
  124. children of horizontal menus won't have
  125. their LI widths set to auto. */
  126. }
  127. ul.rMenu-ver, ul.rMenu-ver ul
  128. {
  129. width: 10em; /* sub-menus need a defined width, especially
  130. vertical sub-menus. salt to taste. */
  131. }
  132. ul.rMenu-wide
  133. {
  134. width: auto; /* apply this rule if you want the top-level
  135. menu to go as wide as possible. this is
  136. something you might want if your top-level
  137. is a vertical menu that spans the width
  138. of a column which has its width
  139. pre-defined. */
  140. }
  141. ul.rMenu-vRight
  142. {
  143. float: right; /* use this to float a vertical menu right. */
  144. }
  145. ul.rMenu-lFloat
  146. {
  147. float: left; /* use this to float a vertical menu left. */
  148. }
  149. ul.rMenu-noFloat
  150. {
  151. float: none; /* this is to cover those cases where a menu
  152. is floated by default and you have a reason
  153. to not float it. such as a menu on the
  154. right side of the screen that you want
  155. to have drops going left but not floated.
  156. to be honest, i don't think this rule is
  157. needed. the clearfix hack will resolve
  158. renering issues associated with a floated
  159. menu anyways. */
  160. }
  161.  
  162. /*******************************************************************************
  163.  * DROP POSITIONS
  164.  *
  165.  * This handles where sub-menus drops relative to the parent element. The same
  166.  * attributes should be set in all rule sets in this section so that cascading
  167.  * rules don't create problems.
  168.  */
  169. ul.rMenu-hor ul
  170. {
  171. top: auto; /* a value of 100% creates a problem in IE 5.0
  172. and Opera 7.23 */
  173. right: auto;
  174. left: auto; /* typically want a value of 0 here but set to
  175. auto for same reasons detailed above */
  176. margin-top: -1px; /* so the top border of the dropdown menu
  177. overlaps the bottom border of its parent
  178. horizontal menu. */
  179. }
  180. ul.rMenu-ver ul
  181. {
  182. left: 60%;
  183. right: auto;
  184. top: auto;
  185. margin-top: -0.5em; /* i prefer top: 80% but this creates a problem
  186. in iCab so negative top margin must be used.
  187. salt to taste. */
  188. }
  189. ul.rMenu-vRight ul, ul.rMenu-hRight ul.rMenu-ver ul
  190. {
  191. left: -60%;
  192. right: auto;
  193. top: auto;
  194. margin-top: -0.5em; /* i prefer top: 80% but this creates a problem
  195. in iCab so negative top margin must be used.
  196. salt to taste. */
  197. }
  198. ul.rMenu-hRight ul
  199. {
  200. left: auto;
  201. right: 0; /* this doesn't work in Opera 7.23 but 7.5 and
  202. beyond work fine. this means right-aligned
  203. horizontal menus break in Opera 7.23 and
  204. earlier. no workaround has been found. */
  205. top: auto;
  206. margin-top: -1px; /* so the top border of the dropdown menu
  207. overlaps the bottom border of its parent
  208. horizontal menu. */
  209. }
  210.  
  211. /*******************************************************************************
  212.  * PRESENTATION : General
  213.  *
  214.  * This is where the visual presentation of the menu is handled. If you try to
  215.  * alter the borders width or location of placement pay close attention to the
  216.  * notes provided with the existing CSS rules in this section. There are key
  217.  * reasons behind borders and negative margins being placed where they are.
  218.  */
  219. ul.rMenu li a
  220. {
  221. border: solid 1px #99f /* border around all anchor tags */
  222. }
  223. ul.rMenu-hor li
  224. {
  225. margin-bottom: 0; /* remove any negative bottom margin if the
  226. horizontal menu is child of a vertical
  227. menu */
  228. margin-left: -1px; /* negative borders on LIs to make borders on
  229. child A elements overlap. they go here and
  230. not on the A element for compatibility
  231. reasons (IE6 and earlier) */
  232. }
  233. ul.rMenu-h
  234. {
  235. padding-left: 1px ; /* compensate for the 1px left jog created by
  236. the above negative margin. */
  237. }
  238. ul.rMenu-ver li
  239. {
  240. margin-left: 0;
  241. margin-top: -1px; /* same thing above except for vertical
  242. menus */
  243. }
  244. ul.rMenu-ver
  245. {
  246. border-top: solid 1px #fff; /* ditto */
  247. }
  248. ul.rMenu li a
  249. {
  250. padding: 2px 5px 3px; /* 2px top, 3px bottom always seems to
  251. provide the most visually balanced
  252. padding */
  253. }
  254. ul.rMenu li a:link, ul.rMenu li a:hover, ul.rMenu li a:visited, ul.rMenu li a:active
  255. {
  256. text-decoration: none;
  257. }
  258. ul.rMenu li.sfhover a:active,
  259. ul.rMenu li:hover a:active
  260. {
  261. color: #fff;
  262. background-color: #c00;
  263. }
  264. ul.rMenu li
  265. {
  266. background-color: #ddf; /* default background color of menu items */
  267. }
  268. ul.rMenu li:hover,
  269. ul.rMenu li.sfhover
  270. {
  271. background-color: #eda; /* background color for parent menu items of
  272. the current sub-menu. includes the sfhover
  273. class which is used in the suckerfish hack
  274. detailed later in this stylesheet. */
  275. }
  276. ul.rMenu li a:hover
  277. {
  278. background-color: #ffc;
  279. }
  280.  
  281. /*******************************************************************************
  282.  * PRESENTATION : Expand
  283.  *
  284.  * the bits below implement a graphic to appear on those anchor elements which
  285.  * have the rMenu-expand class assigned. this is something you have to do
  286.  * manually on any LI element containing a UL element that is to be a dropdown
  287.  * menu. there is no mechanism to do this automatically.
  288.  *
  289.  * the seemingly redundant CSS is done for reasons similar to the suckerfish
  290.  * css. it's to deal with all sorts of nested menu issues. it'll work as far
  291.  * as three levels deep, after that all bets off.
  292.  */
  293. ul.rMenu li.rMenu-expand a,
  294. ul.rMenu li.rMenu-expand li.rMenu-expand a,
  295. ul.rMenu li.rMenu-expand li.rMenu-expand li.rMenu-expand a
  296. {
  297. padding-right: 25px;
  298. background-image: url("expand-right.gif");
  299. background-repeat: no-repeat;
  300. background-position: 100% 50%;
  301. }
  302. ul.rMenu-vRight li.rMenu-expand a,
  303. ul.rMenu-vRight li.rMenu-expand li.rMenu-expand a,
  304. ul.rMenu-vRight li.rMenu-expand li.rMenu-expand li.rMenu-expand a,
  305. ul.rMenu-hRight li.rMenu-expand a,
  306. ul.rMenu-hRight li.rMenu-expand li.rMenu-expand a,
  307. ul.rMenu-hRight li.rMenu-expand li.rMenu-expand li.rMenu-expand a
  308. {
  309. padding-right: 5px;
  310. padding-left: 20px;
  311. background-image: url("expand-left.gif");
  312. background-repeat: no-repeat;
  313. background-position: -5px 50%;
  314. }
  315. ul.rMenu-hor li.rMenu-expand a
  316. {
  317. padding-left: 5px; /* reset padding */
  318. padding-right: 15px;
  319. background-image: url("expand-down.gif");
  320. background-position: 100% 50%;
  321. }
  322. ul.rMenu li.rMenu-expand li a,
  323. ul.rMenu li.rMenu-expand li.rMenu-expand li a,
  324. ul.rMenu li.rMenu-expand li.rMenu-expand li.rMenu-expand li a
  325. {
  326. background-image: none;
  327. padding-right: 5px; /* reset padding */
  328. padding-left: 5px; /* reset padding */
  329. }
  330.  
  331. /*******************************************************************************
  332.  * HACKS : General
  333.  *
  334.  * These are rules specifically targeted to resolve bugs/quirks that some
  335.  * browser exhibit.
  336.  */
  337. * html ul.rMenu
  338. {
  339. display: inline-block; /* this is for IE/Mac. it forces IE/Mac to
  340. expand the element's dimensions to contain
  341. its floating child elements without a
  342. clearing element. */
  343. /* \*/ display: block; /* override above rule for every other
  344. browser using IE/Mac backslash hack */
  345. position: relative; /* IE 5.0/Mac needs this or it may clip the
  346. dropdown menus */
  347. /* \*/ position: static;/* reset position attribute for IE/Win as it
  348. causes z-index problems */
  349. }
  350. * html ul.rMenu ul
  351. {
  352. float: left; /* IE/Mac 5.0 needs this and IE/Win 6 and earlier
  353. don't show any problems with applying this
  354. rule. */
  355. }
  356. ul.rMenu ul
  357. {
  358. background-color: #fff; /* IE/Win (includeing 7) needs this on an object
  359. that hasLayout so that it doesn't "look through"
  360. the menu and let any object (text) below the
  361. menu to gain focus, causing the menu to
  362. disappear. application of this rule does not
  363. cause any rendering problems with other browsers
  364. as the background color his covered by the
  365. menu itself. */
  366. }
  367. * html ul.rMenu-ver li,
  368. * html ul.rMenu-hor li ul.rMenu-ver li
  369. {
  370. /* the second selector in this rule is there
  371. because of problems IE/Mac has with
  372. inheritance and what rules should take
  373. precedence. and to serve as a reminder on
  374. how to work around the issue if it's
  375. encountered again down the road. */
  376. width: 100%;
  377. float: left;
  378. clear: left; /* IE6 (and earlier?) stick space below any LI
  379. in :hover state with a sub-menu. floating
  380. the LIs seems to work around this issue. But
  381. note that this also triggers hasLayout
  382. because we need a width of 100% on floats.
  383. But hasLayout on LIs breaks the menu in IE7.
  384. So we really need to be careful not to let
  385. floats get into anything other than IE6
  386. and earlier. IE Mac seems to need this
  387. too for some other reason. */
  388. }
  389. ul.rMenu-ver li a
  390. {
  391. min-width: 0; /* trigger hasLayout for IE7 on anchor
  392. elements. without hasLayout on anchors
  393. they would not expand the full width
  394. of the menu. this rule may not trigger
  395. hasLayour in later versions of IE and
  396. if you find this system broken in new
  397. versions of IE, this is probably the
  398. source. */
  399. }
  400. * html ul.rMenu-ver li a
  401. {
  402. height: auto; /* triggers hasLayout for IE/Mac */
  403. /* \*/ height: 100%; /* trigger hasLayout for IE6 and earlier. does
  404. not work for IE7 */
  405. }
  406. * html ul.rMenu-h
  407. { /* hide from IE Mac \*/
  408. padding-left: 2px; /* IE6 and earlier double the negative margins
  409. on the LI elements of horizontal menus. this
  410. is because the LIs float but the parent
  411. isn't floating. this can be fixed by floating
  412. rMenu-hor but I'd rather not float it so I just
  413. double up the padding used to compensate. */
  414. }
  415. * html ul.rMenu-hor li
  416. {
  417. width: 6em; /* IE Mac doesn't do auto widths so specify a width
  418. for the sake of IE/Mac. Salt to taste. */
  419. /* \*/ width: auto; /* now undo previous rule for non Macs by using
  420. the IE Mac backslash comment hack */
  421. }
  422.  
  423. /*******************************************************************************
  424.  * HACKS : Suckerfish
  425.  *
  426.  * IE6 and earlier do not support the :hover pseudoclass and so javascript is
  427.  * used to add the "sfhover" class of any LI element that the mouse is currently
  428.  * over. This method is called suckerfish and you can read up on it at:
  429.  * http://www.htmldog.com/articles/suckerfish/dropdowns/
  430.  *
  431.  * NOTE: this allows for support of dropdown menus up to 3 levels deep. if you
  432.  * want to support greather menu depth you need to alter these selectors.
  433.  * read the above mentioned website for more info on how to do that.
  434.  */
  435. * html ul.rMenu li.sfhover
  436. {
  437. z-index: 999;
  438. }
  439. * html ul.rMenu li.sfhover ul ul,
  440. * html ul.rMenu li.sfhover ul ul ul
  441. {
  442. display: none; /* IE/Suckerfish alternative for browsers that
  443. don't support :hover state on LI elements */
  444. }
  445. * html ul.rMenu li.sfhover ul,
  446. * html ul.rMenu li li.sfhover ul,
  447. * html ul.rMenu li li li.sfhover ul
  448. {
  449. display: block; /* ^ ditto ^ */
  450. }
  451.  
  452. /*******************************************************************************
  453.  * HACKS : Clearfix
  454.  *
  455.  * Clearfix provides a means to for an element to contain all it's floated
  456.  * children even if it's not normally tall enough to do so. For more information
  457.  * on clearfix please see:
  458.  * http://www.positioniseverything.net/easyclearing.html
  459.  */
  460. .clearfix:after
  461. {
  462. content: ".";
  463. display: block;
  464. height: 0;
  465. clear: both;
  466. visibility: hidden;
  467. }
  468. .clearfix
  469. {
  470. min-width: 0; /* trigger hasLayout for IE7 */
  471. display: inline-block;
  472. /* \*/ display: block; /* Hide from IE Mac */
  473. }
  474. * html .clearfix
  475. {
  476. /* \*/ height: 1%; /* Hide from IE Mac */
  477. }
  478.  
  479. /******************************************************************************/

Report this snippet  

You need to login to post a comment.