[globalnav] produce xhtml code
[opensuse:themes.git] / bento / js / global-navigation.js
1 $(document).ready(function() {
2
3     if (!global_navigation_data) return;
4
5     var html = '';
6
7     $.each(global_navigation_data, function(i,menu){
8         html += '<ul class="global-navigation-menu" id="menu-' + menu.id + '">';
9         $.each(menu.items, function(j,submenu){
10             html += '<li><a href="' + submenu.link +'">';
11             html += '<img src="' + location.protocol + '//static.opensuse.org/themes/bento/images/' + submenu.image + '.png" alt="" />';
12             html += '<span>' + submenu.title + '</span>';
13             html += '<span class="desc">' + submenu.desc + '</span>';
14             html += '</a></li>';
15         });
16         html += '</ul>';
17     });
18
19     $('#global-navigation').after(html);
20
21     $('#global-navigation li[id^=item-]').click(function(){
22         var name = $(this).attr('id').substring(5);
23         $("ul[id^=menu-]:visible").each(function() {
24             $(this).fadeOut('fast');
25         } );
26
27         if( $(this).hasClass('selected') ) {
28             $('#global-navigation li.selected').removeClass('selected');
29         } else {
30             $('#global-navigation li.selected').removeClass('selected');
31             position_menu('item-' + name, 'menu-' + name);
32             $('#menu-' + name).fadeIn();
33             $(this).addClass('selected');
34         }
35         return false;
36     });
37
38     $('.global-navigation-menu').mouseleave(function(){
39         $('#global-navigation li.selected').removeClass('selected');
40         $(this).fadeOut();
41     });
42
43 });
44
45 position_menu = function(button_id, menu_id) {
46     var top = $('#global-navigation').height()-12;
47     if ($.browser.webkit) top += 1;
48     var left = $('#' + button_id).offset().left-15;
49     $('#' + menu_id).offset({
50         left:left,
51         top:top
52     });
53
54 }