Revision: 3646 Author: hans URL: http://bknr.net/trac/changeset/3646
Menu completely revamped, now CSS based.
U trunk/projects/quickhoney/website/static/javascript.js U trunk/projects/quickhoney/website/static/styles.css U trunk/projects/quickhoney/website/templates/index.xml
Modified: trunk/projects/quickhoney/website/static/javascript.js =================================================================== --- trunk/projects/quickhoney/website/static/javascript.js 2008-07-26 09:09:11 UTC (rev 3645) +++ trunk/projects/quickhoney/website/static/javascript.js 2008-07-26 10:17:52 UTC (rev 3646) @@ -422,7 +422,7 @@ });
pages['shop'] - = new Page(['clients_page'], + = new Page(['shop_page'], ['000000', 'ffffff', '0054ff'], function() { footer_hide(); @@ -471,23 +471,6 @@ // change text colors $("body").style.backgroundColor = "#" + background_color; $("body").style.color = "#" + foreground_color; - - for (var i = 0; i < document.styleSheets.length; i++) { - var rules = document.styleSheets[i][document.all ? 'rules' : 'cssRules']; - for (var j = 0; j < rules.length; j++) { - var rule = rules[j]; - var selectorText = rule.selectorText.toLowerCase(); - if (selectorText == 'a') { - rule.style['color'] = '#' + link_color; - rule.style['backgroundColor'] = '#' + background_color; - } else if (selectorText == '.text') { - rule.style['color'] = '#' + foreground_color; - rule.style['backgroundColor'] = '#' + background_color; - } else if (selectorText == 'img.menu') { - rule.style['backgroundColor'] = '#' + link_color; - } - } - } }
function display_cms_window() { @@ -525,6 +508,7 @@
// Activate the menu by coloring the buttons correctly change_colors(pagename, page.colors); + $('menu').className = pagename;
// Update globals current_directory = pagename; @@ -734,7 +718,7 @@ return false; }
-function goto_page(page) { +function goto_results_page(page) { query_position = 0; for (var page_index = 0; page_index < page; page_index++) { for (var row_index = 0; row_index < query_result_pages[page_index].length; row_index++) { @@ -788,14 +772,14 @@ if (current_page > 0) { push(result_links, '<a href="#' + current_directory + '/' + current_subdirectory + '/' + (current_page - 1) + - '" onclick="goto_page(' + (current_page - 1) + ');"><<</a>'); + '" onclick="goto_results_page(' + (current_page - 1) + ');"><<</a>'); } else { push(result_links, '<<'); } var last_page = position_to_page(query_result.length - 1); if (current_page < last_page) { push(result_links, '<a href="#' + current_directory + '/' + current_subdirectory + '/' + (current_page + 1).toString() + - '" onclick="goto_page(' + (current_page + 1).toString() + ');">>></a>'); + '" onclick="goto_results_page(' + (current_page + 1).toString() + ');">>></a>'); } else { push(result_links, '>>'); } @@ -820,7 +804,7 @@ push(result_links, (page_number + 1).toString()); } else { push(result_links, '<a href="#' + current_directory + '/' + current_subdirectory + '/' + (current_page + 1).toString() + - '" onclick="goto_page(' + page_number + ');">' + (page_number + 1) + '</a>'); + '" onclick="goto_results_page(' + page_number + ');">' + (page_number + 1) + '</a>'); } }
Modified: trunk/projects/quickhoney/website/static/styles.css =================================================================== --- trunk/projects/quickhoney/website/static/styles.css 2008-07-26 09:09:11 UTC (rev 3645) +++ trunk/projects/quickhoney/website/static/styles.css 2008-07-26 10:17:52 UTC (rev 3646) @@ -80,24 +80,57 @@
/* menu */
-img.menu { +#menu.home a img { background-color: #953cfd; } + +#menu.pixel a img { background-color: #ff00ff; } +#menu.pixel a#m_pixel img.selected { visibility: visible } +#menu.pixel a#m_pixel img.unselected { visibility: hidden } + +#menu.vector a img { background-color: #00ccff; } +#menu.vector a#m_vector img.selected { visibility: visible } +#menu.vector a#m_vector img.unselected { visibility: hidden } + +#menu.news a img { background-color: #30be01; } +#menu.news a#m_news img.selected { visibility: visible } +#menu.news a#m_news img.unselected { visibility: hidden } + +#menu.shop a img { background-color: #0054ff; } +#menu.shop a#m_shop img.selected { visibility: visible } +#menu.shop a#m_shop img.unselected { visibility: hidden } + +#menu.contact a img { background-color: #ffa200; } +#menu.contact a#m_contact img.selected { visibility: visible } +#menu.contact a#m_contact img.unselected { visibility: hidden } + +#menu img.selected { + visibility: hidden; + z-index: 110; +} + +#menu a { position: absolute; padding: 0px; top: 36px; border-width: 0px; - background-color: white; }
-img#m_quickhoney { +#menu a img { + position: absolute; + top: 0px; + left: 0px; + border-width: 0px; +} + +#m_quickhoney { top: 28px; left: 36px; }
-img#m_pixel { left: 262px; } -img#m_vector { left: 334px; } -img#m_news { left: 416px; } -img#m_shop { left: 494px; } -img#m_contact { left: 594px; } +#m_pixel { left: 262px; } +#m_vector { left: 334px; } +#m_news { left: 416px; } +#m_shop { left: 494px; } +#m_contact { left: 594px; }
/* path / version */
Modified: trunk/projects/quickhoney/website/templates/index.xml =================================================================== --- trunk/projects/quickhoney/website/templates/index.xml 2008-07-26 09:09:11 UTC (rev 3645) +++ trunk/projects/quickhoney/website/templates/index.xml 2008-07-26 10:17:52 UTC (rev 3646) @@ -26,23 +26,28 @@ <img id="checkout" src="/image/checkout" width="112" height="24"/>
<div id="menu"> - <a onclick="show_page('home')" href="#home"> - <img alt="home" class="menu" id="m_home" src="/image/quickhoney" /> + <a onclick="show_page('home')" href="#home" id="m_home"> + <img alt="home" class="menu" src="/image/quickhoney" /> </a> - <a onclick="show_page('pixel')" href="#pixel" id="a_pixel" class="menu"> - <img alt="pixel" class="menu" id="m_pixel" src="/image/pixel-unselected" /> + <a onclick="show_page('pixel')" href="#pixel" id="m_pixel"> + <img alt="pixel" class="unselected" src="/image/pixel-unselected" /> + <img alt="pixel" class="selected" src="/image/pixel-selected" /> </a> - <a onclick="show_page('vector')" href="#vector"> - <img alt="vector" class="menu" id="m_vector" src="/image/vector-unselected" /> + <a onclick="show_page('vector')" href="#vector" id="m_vector"> + <img alt="vector" class="unselected" src="/image/vector-unselected" /> + <img alt="vector" class="selected" src="/image/vector-selected" /> </a> - <a onclick="show_page('news')" href="#news"> - <img alt="news" class="menu" id="m_news" src="/image/news-unselected" /> + <a onclick="show_page('news')" href="#news" id="m_news"> + <img alt="news" class="unselected" src="/image/news-unselected" /> + <img alt="news" class="selected" src="/image/news-selected" /> </a> - <a onclick="show_page('shop')" href="#shop"> - <img alt="shop" class="menu" id="m_shop" src="/image/shop-unselected" /> + <a onclick="show_page('shop')" href="#shop" id="m_shop"> + <img alt="shop" class="unselected" src="/image/shop-unselected" /> + <img alt="shop" class="selected" src="/image/shop-selected" /> </a> - <a onclick="show_page('contact')" href="#contact"> - <img alt="contact" class="menu" id="m_contact" src="/image/contact-unselected" /> + <a onclick="show_page('contact')" href="#contact" id="m_contact"> + <img alt="contact" class="unselected" src="/image/contact-unselected" /> + <img alt="contact" class="selected" src="/image/contact-selected" /> </a> </div>