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 | |
---|