| 1 | /* Styles for jQuery menu widget |
|---|
| 2 | Author: Maggie Wachs, maggie@filamentgroup.com |
|---|
| 3 | Date: September 2008 |
|---|
| 4 | */ |
|---|
| 5 | |
|---|
| 6 | |
|---|
| 7 | /* REQUIRED STYLES - the menus will only render correctly with these rules */ |
|---|
| 8 | |
|---|
| 9 | .fg-menu-container { position: absolute; top:0; left:-999px; padding: .4em; overflow: hidden; } |
|---|
| 10 | .fg-menu-container.fg-menu-flyout { overflow: visible; } |
|---|
| 11 | |
|---|
| 12 | .fg-menu, .fg-menu ul { list-style-type:none; padding: 0; margin:0; } |
|---|
| 13 | |
|---|
| 14 | .fg-menu { position:relative; } |
|---|
| 15 | .fg-menu-flyout .fg-menu { position:static; } |
|---|
| 16 | |
|---|
| 17 | .fg-menu ul { position:absolute; top:0; } |
|---|
| 18 | .fg-menu ul ul { top:-1px; } |
|---|
| 19 | |
|---|
| 20 | .fg-menu-container.fg-menu-ipod .fg-menu-content, |
|---|
| 21 | .fg-menu-container.fg-menu-ipod .fg-menu-content ul { background: none !important; } |
|---|
| 22 | |
|---|
| 23 | .fg-menu.fg-menu-scroll, |
|---|
| 24 | .fg-menu ul.fg-menu-scroll { overflow: scroll; overflow-x: hidden; } |
|---|
| 25 | |
|---|
| 26 | .fg-menu li { clear:both; float:left; width:100%; margin: 0; padding:0; border: 0; } |
|---|
| 27 | .fg-menu li li { font-size:1em; } /* inner li font size must be reset so that they don't blow up */ |
|---|
| 28 | |
|---|
| 29 | .fg-menu-flyout ul ul { padding: .4em; } |
|---|
| 30 | .fg-menu-flyout li { position:relative; } |
|---|
| 31 | |
|---|
| 32 | .fg-menu-scroll { overflow: scroll; overflow-x: hidden; } |
|---|
| 33 | |
|---|
| 34 | .fg-menu-breadcrumb { margin: 0; padding: 0; } |
|---|
| 35 | |
|---|
| 36 | .fg-menu-footer { margin-top: .4em; padding: .4em; } |
|---|
| 37 | .fg-menu-header { margin-bottom: .4em; padding: .4em; } |
|---|
| 38 | |
|---|
| 39 | .fg-menu-breadcrumb li { float: left; list-style: none; margin: 0; padding: 0 .2em; font-size: .9em; opacity: .7; } |
|---|
| 40 | .fg-menu-breadcrumb li.fg-menu-prev-list, |
|---|
| 41 | .fg-menu-breadcrumb li.fg-menu-current-crumb { clear: left; float: none; opacity: 1; } |
|---|
| 42 | .fg-menu-breadcrumb li.fg-menu-current-crumb { padding-top: .2em; } |
|---|
| 43 | |
|---|
| 44 | .fg-menu-breadcrumb a, |
|---|
| 45 | .fg-menu-breadcrumb span { float: left; } |
|---|
| 46 | |
|---|
| 47 | .fg-menu-footer a:link, |
|---|
| 48 | .fg-menu-footer a:visited { float:left; width:100%; text-decoration: none; } |
|---|
| 49 | .fg-menu-footer a:hover, |
|---|
| 50 | .fg-menu-footer a:active { } |
|---|
| 51 | |
|---|
| 52 | .fg-menu-footer a span { float:left; cursor: pointer; } |
|---|
| 53 | |
|---|
| 54 | .fg-menu-breadcrumb .fg-menu-prev-list a:link, |
|---|
| 55 | .fg-menu-breadcrumb .fg-menu-prev-list a:visited, |
|---|
| 56 | .fg-menu-breadcrumb .fg-menu-prev-list a:hover, |
|---|
| 57 | .fg-menu-breadcrumb .fg-menu-prev-list a:active { background-image: none; text-decoration:none; } |
|---|
| 58 | |
|---|
| 59 | .fg-menu-breadcrumb .fg-menu-prev-list a { float: left; padding-right: .4em; } |
|---|
| 60 | .fg-menu-breadcrumb .fg-menu-prev-list a .ui-icon { float: left; } |
|---|
| 61 | |
|---|
| 62 | .fg-menu-breadcrumb .fg-menu-current-crumb a:link, |
|---|
| 63 | .fg-menu-breadcrumb .fg-menu-current-crumb a:visited, |
|---|
| 64 | .fg-menu-breadcrumb .fg-menu-current-crumb a:hover, |
|---|
| 65 | .fg-menu-breadcrumb .fg-menu-current-crumb a:active { display:block; background-image:none; font-size:1.3em; text-decoration:none; } |
|---|
| 66 | |
|---|
| 67 | |
|---|
| 68 | |
|---|
| 69 | /* REQUIRED LINK STYLES: links are "display:block" by default; if the menu options are split into |
|---|
| 70 | selectable node links and 'next' links, the script floats the node links left and floats the 'next' links to the right */ |
|---|
| 71 | |
|---|
| 72 | .fg-menu a:link, |
|---|
| 73 | .fg-menu a:visited, |
|---|
| 74 | .fg-menu a:hover, |
|---|
| 75 | .fg-menu a:active { float:left; width:92%; padding:.3em 3%; text-decoration:none; outline: 0 !important; } |
|---|
| 76 | |
|---|
| 77 | .fg-menu a { border: 1px dashed transparent; } |
|---|
| 78 | |
|---|
| 79 | .fg-menu a.ui-state-default:link, |
|---|
| 80 | .fg-menu a.ui-state-default:visited, |
|---|
| 81 | .fg-menu a.ui-state-default:hover, |
|---|
| 82 | .fg-menu a.ui-state-default:active, |
|---|
| 83 | .fg-menu a.ui-state-hover:link, |
|---|
| 84 | .fg-menu a.ui-state-hover:visited, |
|---|
| 85 | .fg-menu a.ui-state-hover:hover, |
|---|
| 86 | .fg-menu a.ui-state-hover:active, |
|---|
| 87 | .fg-menu a.ui-state-active:link, |
|---|
| 88 | .fg-menu a.ui-state-active:visited, |
|---|
| 89 | .fg-menu a.ui-state-active:hover, |
|---|
| 90 | .fg-menu a.ui-state-active:active { border-style: solid; font-weight: normal; } |
|---|
| 91 | |
|---|
| 92 | .fg-menu a span { display:block; cursor:pointer; } |
|---|
| 93 | |
|---|
| 94 | |
|---|
| 95 | /* SUGGESTED STYLES - for use with jQuery UI Themeroller CSS */ |
|---|
| 96 | |
|---|
| 97 | .fg-menu-indicator span { float:left; } |
|---|
| 98 | .fg-menu-indicator span.ui-icon { float:right; } |
|---|
| 99 | |
|---|
| 100 | .fg-menu-content.ui-widget-content, |
|---|
| 101 | .fg-menu-content ul.ui-widget-content { border:0; } |
|---|
| 102 | |
|---|
| 103 | |
|---|
| 104 | /* ICONS AND DIVIDERS */ |
|---|
| 105 | |
|---|
| 106 | .fg-menu.fg-menu-has-icons a:link, |
|---|
| 107 | .fg-menu.fg-menu-has-icons a:visited, |
|---|
| 108 | .fg-menu.fg-menu-has-icons a:hover, |
|---|
| 109 | .fg-menu.fg-menu-has-icons a:active { padding-left:20px; } |
|---|
| 110 | |
|---|
| 111 | .fg-menu .horizontal-divider hr, .fg-menu .horizontal-divider span { padding:0; margin:5px .6em; } |
|---|
| 112 | .fg-menu .horizontal-divider hr { border:0; height:1px; } |
|---|
| 113 | .fg-menu .horizontal-divider span { font-size:.9em; text-transform: uppercase; padding-left:.2em; } |
|---|
| 114 | |
|---|
