Commit 5840d762607aad6281fa665e8d1dee44deb4c3a1
1 parent
da79e4ad
Exists in
master
and in
29 other branches
ActionItem70: adding initial implementation of top bar
git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@505 3f533792-8f58-4932-b0fe-aaf55b0a4547
Showing
23 changed files
with
586 additions
and
169 deletions
Show diff stats
app/helpers/application_helper.rb
... | ... | @@ -143,9 +143,12 @@ module ApplicationHelper |
143 | 143 | content_tag('span', (link_to _('Logout'), { :controller => 'account', :action => 'logout'}, :method => 'post'), :id => 'logout_box') |
144 | 144 | end |
145 | 145 | |
146 | - # FIXME | |
147 | 146 | def footer |
148 | - 'nothing in the footer yet' | |
147 | + # FIXME: add some information from the environment | |
148 | + [ | |
149 | + content_tag('div', 'some information about this environment'), | |
150 | + content_tag('div', _('%s, version %s' % [ link_to(Noosfero::PROJECT, 'http://www.colivre.coop.br/Noosfero'), Noosfero::VERSION])), | |
151 | + ].join("\n") | |
149 | 152 | end |
150 | 153 | |
151 | 154 | # returns the current profile beign viewed. | ... | ... |
app/views/layouts/application.rhtml
... | ... | @@ -4,61 +4,136 @@ |
4 | 4 | <%= javascript_include_tag :defaults %> |
5 | 5 | <%= design_all_header_tags %> |
6 | 6 | <%= javascript_include_tag 'cms' %> |
7 | - <%= javascript_include_tag 'menu' %> | |
8 | 7 | <% if params[:controller] == 'cms' %> |
9 | 8 | <%= stylesheet_link_tag 'cms' %> |
10 | 9 | <% end %> |
11 | 10 | <%= stylesheet_link_tag 'common' %> |
11 | + | |
12 | 12 | <%= stylesheet_link_tag 'menu' %> |
13 | + <%= javascript_include_tag 'menu' %> | |
13 | 14 | </head> |
14 | 15 | |
15 | 16 | <body onload='javascript: if (document.forms[0] != null && document.forms[0].elements[0] != null) { document.forms[0].elements[0].focus(); }'> |
16 | - <%= image_tag 'loading.gif', :id => 'spinner', :style => "display:none; float:right;" %> | |
17 | - <div id="wrap" class='category_blue'> | |
18 | - <% unless flash[:notice].nil? %> | |
19 | - <div id='notice'> | |
20 | - <%= flash[:notice] %> | |
21 | - <div class='button'> | |
22 | - <%= link_to_function( content_tag(:span, _('Close') ), visual_effect(:fade, "notice", :duration => 0.5), :id => 'button_close_notice' ) %> | |
23 | - </div> | |
24 | - </div> | |
25 | - <% end %> | |
26 | - <div id="frame"> | |
27 | - <div id="menu_accessibility"> | |
28 | - <%= _('Skip to:') %> | |
29 | - <a href="#main_content"><%= _('Content') %></a> | | |
30 | - <a href="#sidebar"><%= _('Navigation') %></a> | | |
31 | - <a href="#footer"><%= _('Footer') %></a> | |
32 | - </div> | |
33 | 17 | |
34 | - <div id="header"> | |
35 | - <%= header %> | |
18 | + <% unless flash[:notice].nil? %> | |
19 | + <div id='notice'> | |
20 | + <%= flash[:notice] %> | |
21 | + <div class='button'> | |
22 | + <%= link_to_function( content_tag(:span, _('Close') ), visual_effect(:fade, "notice", :duration => 0.5), :id => 'button_close_notice' ) %> | |
36 | 23 | </div> |
24 | + </div> | |
25 | + <% end %> | |
37 | 26 | |
38 | - <div id='content'> | |
39 | - <!-- <a name='main_content'/></a> --> | |
40 | - <!-- Aqui entra um conteudo tipo o titulo da pagina do usuário e os botoes do comatose? --> | |
41 | - <!-- | |
42 | - <div id='header_content'> | |
43 | - </div> | |
44 | - --> | |
45 | - <% if params[:controller] == 'cms' %> | |
46 | - <div id='boxes'> | |
47 | - <%= yield %> | |
48 | - </div> | |
49 | - <% else %> | |
50 | - <%= design_display(yield) %> | |
51 | - <% end %> | |
52 | - </div> | |
27 | + <%= image_tag 'loading.gif', :id => 'spinner', :style => "display:none; float:right;", :alt => _('Image for Loading...') %> | |
53 | 28 | |
54 | - <div id="footer"> | |
55 | - <!-- <a name='footer'/></a> --> | |
56 | - <%= footer %> | |
57 | - <%= design_display_icon('back', :action => 'list')%> | |
29 | + <div id="wrap" class='category1'> | |
30 | + <div id='noosfero_bar' class='category1'> | |
31 | + <div id='accessibility_menu'> | |
32 | + <a href='#'>Acessibilidade</a> | |
33 | + <a href='#'>Central de Buscas</a> | |
34 | + <a href='#'>Ir para conteúdo</a> | |
35 | + </div><!-- accessibility_menu --> | |
36 | + | |
37 | + <div id='navigation_bar'> | |
38 | + <ul> | |
39 | + | |
40 | + <li id='category1' class='active'> | |
41 | + Noosfero | |
42 | + <ul> | |
43 | + <li><a href=''><span>Iteam 1</span></a></li> | |
44 | + <li><a href=''><span>Itemdasd 2</span></a></li> | |
45 | + <li><a href=''><span>Iteaam 3</span></a></li> | |
46 | + <li><a href=''><span>Iteaam 4</span></a></li> | |
47 | + <li><a href=''><span>Itemdasds 5</span></a></li> | |
48 | + <li><a href=''><span>Itesdm 2</span></a></li> | |
49 | + <li><a href=''><span>Iteam 3</span></a></li> | |
50 | + <li><a href=''><span>Iteasdasdm 4</span></a></li> | |
51 | + <li><a href=''><span>Itesdasm 5</span></a></li> | |
52 | + <li><a href=''><span>Itesdm 2</span></a></li> | |
53 | + <li><a href=''><span>Itedsadm 3</span></a></li> | |
54 | + <li><a href=''><span>Itedsm 4</span></a></li> | |
55 | + <li><a href=''><span>Itessdsm 5</span></a></li> | |
56 | + <li><a href=''><span>Itessasm 2</span></a></li> | |
57 | + <li><a href=''><span>Isssssstesm 3</span></a></li> | |
58 | + <li><a href=''><span>Iteasdm 3</span></a></li> | |
59 | + <li><a href=''><span>Itessm 4</span></a></li> | |
60 | + <li><a href=''><span>Iteasdm 5</span></a></li> | |
61 | + </ul> | |
62 | + </li> | |
63 | + | |
64 | + <li id='category2'> | |
65 | + Territorios | |
66 | + <ul> | |
67 | + <li><a href=''><span>Item 1</span></a></li> | |
68 | + <li><a href=''><span>Itssssem 2</span></a></li> | |
69 | + <li><a href=''><span>Itsssssem 3</span></a></li> | |
70 | + <li><a href=''><span>Item 4</span></a></li> | |
71 | + <li><a href=''><span>Itssssem 5</span></a></li> | |
72 | + </ul> | |
73 | + </li> | |
74 | + | |
75 | + <li id='category3'> | |
76 | + Lalala | |
77 | + <ul> | |
78 | + <li><a href=''><span>Item 1</span></a></li> | |
79 | + <li><a href=''><span>Issstem 2</span></a></li> | |
80 | + <li><a href=''><span>Itsssem 3</span></a></li> | |
81 | + <li><a href=''><span>Item 4</span></a></li> | |
82 | + <li><a href=''><span>Itssem 5</span></a></li> | |
83 | + </ul> | |
84 | + </li> | |
85 | + | |
86 | + <li id='category4'> | |
87 | + Lalala | |
88 | + <ul> | |
89 | + <li><a href=''><span>Iaaaatem 1</span></a></li> | |
90 | + <li><a href=''><span>Item 2</span></a></li> | |
91 | + <li><a href=''><span>Itaaaem 3</span></a></li> | |
92 | + <li><a href=''><span>Itaaem 4</span></a></li> | |
93 | + <li><a href=''><span>Itaaaaaaaaem 5</span></a></li> | |
94 | + </ul> | |
95 | + </li> | |
96 | + </ul> | |
97 | + </div><!-- id='navigation_bar' --> | |
98 | + | |
99 | + <script type="text/javascript"> | |
100 | + prepareMenu('navigation_bar'); | |
101 | + </script> | |
102 | + | |
103 | + <div id='search_box'> | |
104 | + <form action="" method="GET"> | |
105 | + <input type='text' name='q' value='sua busca aqui ...'> | |
106 | + <input type='submit' value='Buscar'> | |
107 | + </form> | |
108 | + </div><!-- id='search_box' --> | |
109 | + </div><!-- id="noosfero_bar" --> | |
110 | + | |
111 | + <%# <div id="header"> %> | |
112 | + <%# header %> | |
113 | + <%# </div> %> | |
114 | + | |
115 | + <div id='content'> | |
116 | + <!-- <a name='main_content'/></a> --> | |
117 | + <!-- Aqui entra um conteudo tipo o titulo da pagina do usuário e os botoes do comatose? --> | |
118 | + <!-- | |
119 | + <div id='header_content'> | |
58 | 120 | </div> |
59 | - </div> | |
60 | - </div> | |
61 | - <%= image_tag 'loading.gif', :id => 'spinner', :style => "display:none; float:right;", :alt => _('Image for Loading...') %> | |
62 | - </body> | |
121 | + --> | |
122 | + <% if params[:controller] == 'cms' %> | |
123 | + <div id='boxes'> | |
124 | + <%= yield %> | |
125 | + </div> | |
126 | + <% else %> | |
127 | + <%= design_display(yield) %> | |
128 | + <% end %> | |
129 | + </div><!-- id="content" --> | |
130 | + | |
131 | + <div id="footer"> | |
132 | + <!-- <a name='footer'/></a> --> | |
133 | + <%= footer %> | |
134 | + </div><!-- id="footer" --> | |
135 | + | |
136 | + </div><!-- id="wrap" --> | |
63 | 137 | |
138 | + </body> | |
64 | 139 | </html> | ... | ... |
public/artwork/newbar/menu.html
... | ... | @@ -7,133 +7,133 @@ |
7 | 7 | <script type="text/javascript" src="menu.js"></script> |
8 | 8 | </head> |
9 | 9 | <body> |
10 | -<div id="wrap" class='category1'> | |
11 | - | |
12 | -<div id='noosfero_bar' class='category1'> | |
13 | - <div id='accessibility_menu'> | |
14 | - <a href='#'>Acessibilidade</a> | |
15 | - <a href='#'>Central de Buscas</a> | |
16 | - <a href='#'>Ir para conteúdo</a> | |
17 | - </div><!-- accessibility_menu --> | |
18 | 10 | |
19 | - <div id='navigation_bar'> | |
20 | - <ul> | |
21 | - <li id='category1' class='active'> | |
22 | - Noosfero | |
23 | - <ul> | |
24 | - <li><a href=''><span>Iteam 1</span></a></li> | |
25 | - <li><a href=''><span>Itemdasd 2</span></a></li> | |
26 | - <li><a href=''><span>Iteaam 3</span></a></li> | |
27 | - <li><a href=''><span>Iteaam 4</span></a></li> | |
28 | - <li><a href=''><span>Itemdasds 5</span></a></li> | |
29 | - <li><a href=''><span>Itesdm 2</span></a></li> | |
30 | - <li><a href=''><span>Iteam 3</span></a></li> | |
31 | - <li><a href=''><span>Iteasdasdm 4</span></a></li> | |
32 | - <li><a href=''><span>Itesdasm 5</span></a></li> | |
33 | - <li><a href=''><span>Itesdm 2</span></a></li> | |
34 | - <li><a href=''><span>Itedsadm 3</span></a></li> | |
35 | - <li><a href=''><span>Itedsm 4</span></a></li> | |
36 | - <li><a href=''><span>Itessdsm 5</span></a></li> | |
37 | - <li><a href=''><span>Itessasm 2</span></a></li> | |
38 | - <li><a href=''><span>Isssssstesm 3</span></a></li> | |
39 | - <li><a href=''><span>Iteasdm 3</span></a></li> | |
40 | - <li><a href=''><span>Itessm 4</span></a></li> | |
41 | - <li><a href=''><span>Iteasdm 5</span></a></li> | |
42 | - </ul> | |
43 | - </li> | |
44 | - | |
45 | - <li id='category2'> | |
46 | - Territorios | |
47 | - <ul> | |
48 | - <li><a href=''><span>Item 1</span></a></li> | |
49 | - <li><a href=''><span>Itssssem 2</span></a></li> | |
50 | - <li><a href=''><span>Itsssssem 3</span></a></li> | |
51 | - <li><a href=''><span>Item 4</span></a></li> | |
52 | - <li><a href=''><span>Itssssem 5</span></a></li> | |
53 | - </ul> | |
54 | - </li> | |
55 | - | |
56 | - <li id='category3'> | |
57 | - Lalala | |
58 | - <ul> | |
59 | - <li><a href=''><span>Item 1</span></a></li> | |
60 | - <li><a href=''><span>Issstem 2</span></a></li> | |
61 | - <li><a href=''><span>Itsssem 3</span></a></li> | |
62 | - <li><a href=''><span>Item 4</span></a></li> | |
63 | - <li><a href=''><span>Itssem 5</span></a></li> | |
64 | - </ul> | |
65 | - </li> | |
66 | - | |
67 | - <li id='category4'> | |
68 | - Lalala | |
69 | - <ul> | |
70 | - <li><a href=''><span>Iaaaatem 1</span></a></li> | |
71 | - <li><a href=''><span>Item 2</span></a></li> | |
72 | - <li><a href=''><span>Itaaaem 3</span></a></li> | |
73 | - <li><a href=''><span>Itaaem 4</span></a></li> | |
74 | - <li><a href=''><span>Itaaaaaaaaem 5</span></a></li> | |
75 | - </ul> | |
76 | - </li> | |
77 | - </ul> | |
78 | - </div><!-- id='navigation_bar' --> | |
79 | - <script type="text/javascript"> | |
80 | - prepareMenu('navigation_bar'); | |
81 | - </script> | |
11 | + <div id="wrap" class='category1'> | |
12 | + <div id='noosfero_bar' class='category1'> | |
13 | + <div id='accessibility_menu'> | |
14 | + <a href='#'>Acessibilidade</a> | |
15 | + <a href='#'>Central de Buscas</a> | |
16 | + <a href='#'>Ir para conteúdo</a> | |
17 | + </div><!-- accessibility_menu --> | |
82 | 18 | |
83 | - <div id='search_box'> | |
84 | - <form action="" method="GET"> | |
85 | - <input type='text' name='q' value='sua busca aqui ...'> | |
86 | - <input type='submit' value='Buscar'> | |
87 | - </form> | |
88 | - </div><!-- id='search_box' --> | |
89 | -</div> | |
90 | - <div id="header"> | |
91 | - <div id="virtual_community_identification">Default Virtual Community</div> | |
92 | - </div> | |
93 | - | |
94 | - <div id='content'> | |
95 | - <!-- <a name='main_content'/></a> --> | |
96 | - <!-- Aqui entra um conteudo tipo o titulo da pagina do usuário e os botoes do comatose? --> | |
97 | - <!-- | |
98 | - <div id='header_content'> | |
99 | - </div> | |
100 | - --> | |
19 | + <div id='navigation_bar'> | |
20 | + <ul> | |
21 | + <li id='category1' class='active'> | |
22 | + Noosfero | |
23 | + <ul> | |
24 | + <li><a href=''><span>Iteam 1</span></a></li> | |
25 | + <li><a href=''><span>Itemdasd 2</span></a></li> | |
26 | + <li><a href=''><span>Iteaam 3</span></a></li> | |
27 | + <li><a href=''><span>Iteaam 4</span></a></li> | |
28 | + <li><a href=''><span>Itemdasds 5</span></a></li> | |
29 | + <li><a href=''><span>Itesdm 2</span></a></li> | |
30 | + <li><a href=''><span>Iteam 3</span></a></li> | |
31 | + <li><a href=''><span>Iteasdasdm 4</span></a></li> | |
32 | + <li><a href=''><span>Itesdasm 5</span></a></li> | |
33 | + <li><a href=''><span>Itesdm 2</span></a></li> | |
34 | + <li><a href=''><span>Itedsadm 3</span></a></li> | |
35 | + <li><a href=''><span>Itedsm 4</span></a></li> | |
36 | + <li><a href=''><span>Itessdsm 5</span></a></li> | |
37 | + <li><a href=''><span>Itessasm 2</span></a></li> | |
38 | + <li><a href=''><span>Isssssstesm 3</span></a></li> | |
39 | + <li><a href=''><span>Iteasdm 3</span></a></li> | |
40 | + <li><a href=''><span>Itessm 4</span></a></li> | |
41 | + <li><a href=''><span>Iteasdm 5</span></a></li> | |
42 | + </ul> | |
43 | + </li> | |
101 | 44 | |
102 | - <div id="boxes"><h1>Account options</h1> | |
103 | -<h1>Account options</h1> | |
104 | -<h1>Account options</h1> | |
105 | -<h1>Account options</h1> | |
106 | -<h1>Account options</h1> | |
107 | -<h1>Account options</h1> | |
108 | -<h1>Account options</h1> | |
109 | -<h1>Account options</h1> | |
110 | -<h1>Account options</h1> | |
111 | -<h1>Account options</h1> | |
112 | -<h1>Account options</h1> | |
113 | -<h1>Account options</h1> | |
114 | -<h1>Account options</h1> | |
115 | -<h1>Account options</h1> | |
116 | -<h1>Account options</h1> | |
117 | -<h1>Account options</h1> | |
118 | -<h1>Account options</h1> | |
119 | -<h1>Account options</h1> | |
120 | -<h1>Account options</h1> | |
121 | -<h1>Account options</h1> | |
122 | -<h1>Account options</h1> | |
123 | - | |
124 | -</div> | |
45 | + <li id='category2'> | |
46 | + Territorios | |
47 | + <ul> | |
48 | + <li><a href=''><span>Item 1</span></a></li> | |
49 | + <li><a href=''><span>Itssssem 2</span></a></li> | |
50 | + <li><a href=''><span>Itsssssem 3</span></a></li> | |
51 | + <li><a href=''><span>Item 4</span></a></li> | |
52 | + <li><a href=''><span>Itssssem 5</span></a></li> | |
53 | + </ul> | |
54 | + </li> | |
55 | + | |
56 | + <li id='category3'> | |
57 | + Lalala | |
58 | + <ul> | |
59 | + <li><a href=''><span>Item 1</span></a></li> | |
60 | + <li><a href=''><span>Issstem 2</span></a></li> | |
61 | + <li><a href=''><span>Itsssem 3</span></a></li> | |
62 | + <li><a href=''><span>Item 4</span></a></li> | |
63 | + <li><a href=''><span>Itssem 5</span></a></li> | |
64 | + </ul> | |
65 | + </li> | |
125 | 66 | |
126 | - </div> | |
67 | + <li id='category4'> | |
68 | + Lalala | |
69 | + <ul> | |
70 | + <li><a href=''><span>Iaaaatem 1</span></a></li> | |
71 | + <li><a href=''><span>Item 2</span></a></li> | |
72 | + <li><a href=''><span>Itaaaem 3</span></a></li> | |
73 | + <li><a href=''><span>Itaaem 4</span></a></li> | |
74 | + <li><a href=''><span>Itaaaaaaaaem 5</span></a></li> | |
75 | + </ul> | |
76 | + </li> | |
77 | + </ul> | |
78 | + </div><!-- id='navigation_bar' --> | |
79 | + | |
80 | + <script type="text/javascript"> | |
81 | + prepareMenu('navigation_bar'); | |
82 | + </script> | |
83 | + | |
84 | + <div id='search_box'> | |
85 | + <form action="" method="GET"> | |
86 | + <input type='text' name='q' value='sua busca aqui ...'> | |
87 | + <input type='submit' value='Buscar'> | |
88 | + </form> | |
89 | + </div><!-- id='search_box' --> | |
90 | + </div><!-- id="noosfero_bar" --> | |
91 | + | |
92 | + <div id="header"> | |
93 | + <div id="virtual_community_identification">Default Virtual Community</div> | |
94 | + </div> | |
95 | + | |
96 | + <div id='content'> | |
97 | + <!-- <a name='main_content'/></a> --> | |
98 | + <!-- Aqui entra um conteudo tipo o titulo da pagina do usuário e os botoes do comatose? --> | |
99 | + <!-- | |
100 | + <div id='header_content'> | |
101 | + </div> | |
102 | + --> | |
103 | + | |
104 | + <div id="boxes"><h1>Account options</h1> | |
105 | + <h1>Account options</h1> | |
106 | + <h1>Account options</h1> | |
107 | + <h1>Account options</h1> | |
108 | + <h1>Account options</h1> | |
109 | + <h1>Account options</h1> | |
110 | + <h1>Account options</h1> | |
111 | + <h1>Account options</h1> | |
112 | + <h1>Account options</h1> | |
113 | + <h1>Account options</h1> | |
114 | + <h1>Account options</h1> | |
115 | + <h1>Account options</h1> | |
116 | + <h1>Account options</h1> | |
117 | + <h1>Account options</h1> | |
118 | + <h1>Account options</h1> | |
119 | + <h1>Account options</h1> | |
120 | + <h1>Account options</h1> | |
121 | + <h1>Account options</h1> | |
122 | + <h1>Account options</h1> | |
123 | + <h1>Account options</h1> | |
124 | + <h1>Account options</h1> | |
125 | + </div> | |
126 | + </div> | |
127 | 127 | |
128 | - <div id="footer"> | |
129 | - <!-- <a name='footer'/></a> --> | |
130 | - nothing in the footer yet | |
131 | - <div action="list" class="none_back back"></div> | |
132 | - </div> | |
128 | + <div id="footer"> | |
129 | + <!-- <a name='footer'/></a> --> | |
130 | + nothing in the footer yet | |
131 | + <div action="list" class="none_back back"> | |
132 | + </div> | |
133 | 133 | </div> |
134 | 134 | </div> |
135 | - <img alt="Image for Loading..." id="spinner" src="/images/loading.gif?1186069142" style="display:none; float:right;" /> | |
136 | 135 | |
136 | + <img alt="Image for Loading..." id="spinner" src="/images/loading.gif?1186069142" style="display:none; float:right;" /> | |
137 | 137 | </body> |
138 | 138 | </html> |
139 | 139 | ... | ... |
public/designs/templates/default/images/bg_bgheader.png
229 Bytes
public/designs/templates/default/images/bg_content.png
225 Bytes
public/designs/templates/default/images/bg_footer.png
168 Bytes
public/designs/templates/default/images/bg_header.png
23.3 KB
public/designs/templates/default/stylesheets/style.css
... | ... | @@ -20,8 +20,8 @@ padding-top: 10px; |
20 | 20 | position: relative; |
21 | 21 | width: 760px; |
22 | 22 | left: 50%; |
23 | - margin-left: -400px; | |
24 | - padding: 1em; | |
23 | + margin-left: -380px; | |
24 | + padding: 0em; | |
25 | 25 | } |
26 | 26 | |
27 | 27 | #box_3 { |
... | ... | @@ -48,10 +48,12 @@ padding-top: 10px; |
48 | 48 | } |
49 | 49 | |
50 | 50 | #footer { |
51 | - margin: 0px; | |
52 | - padding: 5px; | |
53 | - text-align: center; | |
54 | 51 | clear: both; |
52 | + text-align: center; | |
53 | + font-size: smaller; | |
54 | + color: #333; | |
55 | + margin-top: 2em; | |
56 | + padding: 5px; | |
55 | 57 | background: #c5d0df url("../images/bg_footer.png") top left repeat-x; |
56 | 58 | } |
57 | 59 | ... | ... |
229 Bytes
225 Bytes
168 Bytes
23.3 KB
215 Bytes
223 Bytes
225 Bytes
212 Bytes
211 Bytes
217 Bytes
238 Bytes
229 Bytes
278 Bytes
... | ... | @@ -0,0 +1,110 @@ |
1 | +function prepareMenu(id) { | |
2 | + | |
3 | + if ( document.all ) { | |
4 | + // add a class for work arround msie´s css bugs | |
5 | + $(id).className += " msie"; | |
6 | + } | |
7 | + | |
8 | + var zIndex = 10; | |
9 | + | |
10 | + $$("#" + id + " ul ul").each( function( ul ) { // para cada UL de sub-menu faça: | |
11 | + // Pega o link que abre este sub-menu: | |
12 | + var linkText = ul.parentNode.firstChild; | |
13 | + // Retira espaço em branco sobrando nas bordas deste: | |
14 | + linkText.nodeValue = linkText.nodeValue.replace( /^\s*|\s*$/g, "" ); | |
15 | + | |
16 | + // Create a link to open this sub-menu: | |
17 | + var link = document.createElement("a"); | |
18 | + link.href = "#"; | |
19 | + link.className = "linkSubMenu"; | |
20 | + linkText.parentNode.insertBefore( link, linkText ); | |
21 | + link.appendChild( linkText ); | |
22 | + link.parentNode.style.zIndex = zIndex++; | |
23 | + link.subMenu = ul; | |
24 | + ul.linkControle = link; | |
25 | + | |
26 | + link.openSubMenu = | |
27 | + function ( isMouseClick ) { | |
28 | + if( this.subMenu.style.display == "block" ) { | |
29 | + if( isMouseClick ) { | |
30 | + this.subMenu.style.display = "none"; | |
31 | + } else { | |
32 | + clearTimeout(this.timeOutClose); | |
33 | + clearTimeout(this.subMenu.timeOutClose); | |
34 | + return false; | |
35 | + } | |
36 | + } else { | |
37 | + this.subMenu.style.display = "block"; | |
38 | + clearTimeout(this.timeOutClose); | |
39 | + clearTimeout(this.subMenu.timeOutClose); | |
40 | + } | |
41 | + } | |
42 | + link.closeSubMenu = function(){ this.subMenu.style.display = "none" } | |
43 | + | |
44 | + link.onclick = function(){ this.openSubMenu(true); return false } | |
45 | + | |
46 | + // onmouseout e onmouseover manipulam o menu para pessoas normais | |
47 | + // onblur e onfocus manipulam o menu para pessoas que precisam navegar com tab | |
48 | + | |
49 | + link.onmouseover = link.onfocus = | |
50 | + function () { | |
51 | + this.openSubMenu(false); | |
52 | + }; | |
53 | + link.onmouseout = link.onblur = | |
54 | + function () { | |
55 | + this.timeOutClose = setTimeout( this.closeSubMenu.bind(this), 333 ); | |
56 | + }; | |
57 | + | |
58 | + ul.closeSubMenu = function(){ this.style.display = "none" } | |
59 | + | |
60 | + ul.onmouseover = ul.onfocus = | |
61 | + function () { | |
62 | + this.blurCalledByIEWorkArroundBug = false; | |
63 | + clearTimeout(this.timeOutClose); | |
64 | + clearTimeout(this.linkControle.timeOutClose); | |
65 | + }; | |
66 | + ul.onmouseout = ul.onblur = | |
67 | + function () { | |
68 | + if ( this.blurCalledByIEWorkArroundBug ) { return false } | |
69 | + this.blurCalledByIEWorkArroundBug = true; | |
70 | + this.timeOutClose = setTimeout( this.closeSubMenu.bind(this), 333 ); | |
71 | + }; | |
72 | + }); | |
73 | + | |
74 | + | |
75 | + ////// INI - Work Arround Bug da disgraça do M$IE ///////////////////// | |
76 | + if ( document.all ) { | |
77 | + function forceUlFocusFromLink ( a ) { | |
78 | + var stop = false; | |
79 | + a.ancestors().each( function(el) { | |
80 | + if ( el.id == "menu" ) { stop = true } | |
81 | + if ( ! stop && el.onfocus ) { el.onfocus() } | |
82 | + } ); | |
83 | + } | |
84 | + function forceUlBlurFromLink ( a ) { | |
85 | + var stop = false; | |
86 | + a.ancestors().each( function(el) { | |
87 | + if ( el.id == "menu" ) { stop = true } | |
88 | + if ( ! stop && el.onblur ) { el.onblur() } | |
89 | + } ); | |
90 | + } | |
91 | + $$("#" + id + " ul ul a").each( function( a ) { | |
92 | + // os links do sub menu forçarão o foco do ul | |
93 | + if ( a.className == "linkSubMenu" ) { | |
94 | + a.onfocus = function() { | |
95 | + forceUlFocusFromLink(this); | |
96 | + this.openSubMenu(false); | |
97 | + }; | |
98 | + a.onblur = function() { | |
99 | + forceUlBlurFromLink(this); | |
100 | + this.timeOutClose = setTimeout( this.closeSubMenu.bind(this), 333 ); | |
101 | + }; | |
102 | + } else { | |
103 | + a.onfocus = function() { forceUlFocusFromLink(this) }; | |
104 | + a.onblur = function() { forceUlBlurFromLink(this) }; | |
105 | + } | |
106 | + }); | |
107 | + } | |
108 | + | |
109 | +} | |
110 | +////// END - Work Arround Bug da disgraça do M$IE ///////////////////// | ... | ... |
... | ... | @@ -0,0 +1,227 @@ |
1 | +body { | |
2 | +margin:0px; | |
3 | +padding: 0px; | |
4 | +} | |
5 | + | |
6 | +/* Core do Tango na Barra | |
7 | +* Azul Escuro - 204a87 | |
8 | +*/ | |
9 | + | |
10 | +#noosfero_bar { | |
11 | + position: fixed; | |
12 | + background: #204a87 url("../images/bg_noosfero_bar.png") repeat-x; | |
13 | + top: -3px; | |
14 | + height: 35px; | |
15 | + margin-left: -3px; | |
16 | + margin-top: 3px; | |
17 | + margin-right: 3px; | |
18 | + padding: 0px; | |
19 | + font-family: serif-Sans, Verdana, Arial; | |
20 | +} | |
21 | + | |
22 | +#noosfero_bar *:focus { | |
23 | + color: red !important; | |
24 | +} | |
25 | + | |
26 | +#accessibility_menu { | |
27 | + float: left; | |
28 | + font-size: 10px; | |
29 | + padding: 1px; | |
30 | + color: #dfdfdf; | |
31 | +} | |
32 | + | |
33 | +#accessibility_menu a { | |
34 | + padding-left: 7px; | |
35 | + margin-left: 2px; | |
36 | + background: url("../images/icon_enter_mini.png") 0px 5px no-repeat; | |
37 | + color: #dfdfdf; | |
38 | + text-decoration: none; | |
39 | +} | |
40 | + | |
41 | +#accessibility_menu a:hover { | |
42 | + color: #fff; | |
43 | +} | |
44 | + | |
45 | +#navigation_bar ul { | |
46 | + float: right; | |
47 | + margin: 7px; | |
48 | + padding: 0px; | |
49 | + right: 0px; | |
50 | + text-align: right; | |
51 | + top: 0px; | |
52 | +} | |
53 | + | |
54 | +#navigation_bar ul li { | |
55 | + list-style: none; | |
56 | + display: inline; | |
57 | + font-size: 17px; | |
58 | + margin-right: 5px; | |
59 | +} | |
60 | + | |
61 | +#navigation_bar ul li a { | |
62 | + padding-left: 5px; | |
63 | + padding-right: 5px; | |
64 | + padding-top: -2px; | |
65 | + padding-bottom: 3px; | |
66 | + color: #fff; | |
67 | + text-decoration: none; | |
68 | +} | |
69 | + | |
70 | +#navigation_bar ul li ul { | |
71 | + padding: 10px; | |
72 | +} | |
73 | + | |
74 | +#navigation_bar ul li ul li { | |
75 | + display: block; | |
76 | + float: right; | |
77 | + margin: 5px; | |
78 | +} | |
79 | + | |
80 | + | |
81 | +/* ITEM 1 */ | |
82 | + | |
83 | +#noosfero_bar.category1 { | |
84 | + background: #204a87 url("../images/bg_noosfero_bar.png") repeat-x; | |
85 | +} | |
86 | + | |
87 | +/* FIXME: add another categories */ | |
88 | +#wrap.category1 { | |
89 | +border: 6px solid #204a87 !important; | |
90 | +} | |
91 | + | |
92 | +#category1 a { | |
93 | + border: 1px outset #6692c4; | |
94 | + background: #204a87 url("../images/bg_item_bar_blue_off.png") repeat-x; | |
95 | +} | |
96 | + | |
97 | +#category1 a:hover, li#category1.active a:hover { | |
98 | + border: 1px inset #6692c4 !important; | |
99 | + background: #3b6096 url("../images/bg_item_bar_blue_on.png") repeat-x !important; | |
100 | +} | |
101 | + | |
102 | +li#category1.active a { | |
103 | + border: 1px inset #6692c4; | |
104 | + background: #719ece url("../images/bg_item_bar_blue_active.png") repeat-x; | |
105 | +} | |
106 | + | |
107 | +li#category1 ul li a { | |
108 | + border: 1px outset #6692c4 !important; | |
109 | + background: #204a87 url("../images/bg_item_bar_blue_off.png") repeat-x !important; | |
110 | +} | |
111 | + | |
112 | +#category1 ul { | |
113 | + background: #204a87 url("../images/bg_noosfero_bar.png") repeat-x; | |
114 | +} | |
115 | + | |
116 | + | |
117 | +/* ITEM 2 red */ | |
118 | + | |
119 | +#noosfero_bar.category2 { | |
120 | + background: #a40000 url("../images/bg_noosfero_bar_red.png") repeat-x; | |
121 | +} | |
122 | + | |
123 | +#wrap.category2 { | |
124 | +border: 3px solid #a40000 !important; | |
125 | +} | |
126 | + | |
127 | +#category2 a { | |
128 | + border: 1px outset #a40000; | |
129 | + background: #a40000 url("../images/bg_item_bar_red_off.png") repeat-x; | |
130 | +} | |
131 | + | |
132 | +#category2 a:hover, li#category2.active a:hover { | |
133 | + border: 1px inset #a40000; | |
134 | + background: #ae1c1c url("../images/bg_item_bar_red_on.png") repeat-x; | |
135 | +} | |
136 | + | |
137 | +li#category2.active a { | |
138 | + border: 1px inset #a40000; | |
139 | + background: #ee2828 url("../images/bg_item_bar_red_active.png") repeat-x; | |
140 | +} | |
141 | + | |
142 | +#category2 ul { | |
143 | + background: #a40000 url("../images/bg_noosfero_bar_red.png") repeat-x; | |
144 | +} | |
145 | + | |
146 | + | |
147 | +/* ITEM 3 */ | |
148 | + | |
149 | +#noosfero_bar.category3 { | |
150 | + background: #204a87 url("../images/bg_noosfero_bar.png") repeat-x; | |
151 | +} | |
152 | + | |
153 | +#wrap.category3 { | |
154 | +border: 3px solid #204a87 !important; | |
155 | +} | |
156 | + | |
157 | +#category3 a { | |
158 | + border: 1px outset #6692c4; | |
159 | + background: #204a87 url("../images/bg_item_bar_blue_off.png") repeat-x; | |
160 | +} | |
161 | + | |
162 | +#category3 a:hover, li#category3.active a:hover { | |
163 | + border: 1px inset #6692c4 !important; | |
164 | + background: #3b6096 url("../images/bg_item_bar_blue_on.png") repeat-x !important; | |
165 | +} | |
166 | + | |
167 | +li#category3.active a { | |
168 | + border: 1px inset #6692c4; | |
169 | + background: #719ece url("../images/bg_item_bar_blue_active.png") repeat-x; | |
170 | +} | |
171 | + | |
172 | +li#category3 ul li a { | |
173 | + border: 1px outset #6692c4 !important; | |
174 | + background: #204a87 url("../images/bg_item_bar_blue_off.png") repeat-x !important; | |
175 | +} | |
176 | + | |
177 | +#category3 ul { | |
178 | + background: #204a87 url("../images/bg_noosfero_bar.png") repeat-x; | |
179 | +} | |
180 | + | |
181 | + | |
182 | +/* ITEM 4 red */ | |
183 | + | |
184 | +#noosfero_bar.category4 { | |
185 | + background: #a40000 url("../images/bg_noosfero_red.png") repeat-x; | |
186 | +} | |
187 | + | |
188 | +#wrap.category4 { | |
189 | +border: 3px solid #a40000 !important; | |
190 | +} | |
191 | + | |
192 | +#category4 a { | |
193 | + border: 1px outset #a40000; | |
194 | + background: #a40000 url("../images/bg_item_bar_red_off.png") repeat-x; | |
195 | +} | |
196 | + | |
197 | +#category4 a:hover, li#category4.active a:hover { | |
198 | + border: 1px inset #a40000; | |
199 | + background: #ae1c1c url("../images/bg_item_bar_red_on.png") repeat-x; | |
200 | +} | |
201 | + | |
202 | +li#category4.active a { | |
203 | + border: 1px inset #a40000; | |
204 | + background: #ee2828 url("../images/bg_item_bar_red_active.png") repeat-x; | |
205 | +} | |
206 | + | |
207 | +#category4 ul { | |
208 | + background: #a40000 url("../images/bg_noosfero_bar_red.png") repeat-x; | |
209 | +} | |
210 | + | |
211 | +#navigation_bar ul ul { | |
212 | +margin: 0px; | |
213 | +padding: 0px; | |
214 | +width: 100%; | |
215 | +left: 0px; | |
216 | +position: absolute; | |
217 | +margin-top: 34px; | |
218 | +display: none; | |
219 | +} | |
220 | + | |
221 | +#search_box { | |
222 | +display: none; | |
223 | +clear: both; | |
224 | +} | |
225 | + | |
226 | +#content { | |
227 | +} | ... | ... |