new UI - add highlighted class to first level menu when it's expanded.

This commit is contained in:
Jessica Wang 2010-10-13 18:25:00 -07:00
parent a9de7cbd23
commit a7656e01f0
2 changed files with 23 additions and 20 deletions

View File

@ -256,10 +256,10 @@ long milliseconds = new Date().getTime();
</div> </div>
</div> </div>
</div> </div>
<div class="leftmenu_list"> <div class="leftmenu_list" id="expandable_first_level">
<div class="leftmenu_content highlighted"> <div class="leftmenu_content" id="expandable_first_level">
<div class="leftmenu_firstindent"> <div class="leftmenu_firstindent">
<div class="leftmenu_arrows close" id="expanded_arrow_icon"> <div class="leftmenu_arrows close" id="expandable_first_level_arrow">
</div> </div>
<div class="leftmenu_list_icons"> <div class="leftmenu_list_icons">
<img src="images/instance_leftmenuicon.png" alt="Instance" /></div> <img src="images/instance_leftmenuicon.png" alt="Instance" /></div>
@ -296,9 +296,9 @@ long milliseconds = new Date().getTime();
</div> </div>
</div> </div>
<div class="leftmenu_list"> <div class="leftmenu_list">
<div class="leftmenu_content"> <div class="leftmenu_content" id="expandable_first_level">
<div class="leftmenu_firstindent"> <div class="leftmenu_firstindent">
<div class="leftmenu_arrows close" id="expanded_arrow_icon"> <div class="leftmenu_arrows close" id="expandable_first_level_arrow">
</div> </div>
<div class="leftmenu_list_icons"> <div class="leftmenu_list_icons">
<img src="images/storage_leftmenuicon.png" alt="Storage" /></div> <img src="images/storage_leftmenuicon.png" alt="Storage" /></div>
@ -342,9 +342,9 @@ long milliseconds = new Date().getTime();
</div> </div>
</div> </div>
<div class="leftmenu_list"> <div class="leftmenu_list">
<div class="leftmenu_content"> <div class="leftmenu_content" id="expandable_first_level">
<div class="leftmenu_firstindent"> <div class="leftmenu_firstindent">
<div class="leftmenu_arrows close" id="expanded_arrow_icon"> <div class="leftmenu_arrows close" id="expandable_first_level_arrow">
</div> </div>
<div class="leftmenu_list_icons"> <div class="leftmenu_list_icons">
<img src="images/templates_leftmenuicon.png" alt="Template" /></div> <img src="images/templates_leftmenuicon.png" alt="Template" /></div>
@ -464,9 +464,9 @@ long milliseconds = new Date().getTime();
</div> </div>
</div> </div>
<div class="leftmenu_list"> <div class="leftmenu_list">
<div class="leftmenu_content" id="leftmenu_domain"> <div class="leftmenu_content" id="expandable_first_level">
<div class="leftmenu_firstindent"> <div class="leftmenu_firstindent">
<div class="leftmenu_arrows close" id="expanded_arrow_icon"> <div class="leftmenu_arrows close" id="expandable_first_level_arrow">
</div> </div>
<div class="leftmenu_list_icons"> <div class="leftmenu_list_icons">
<img src="images/domain_leftmenuicon.png" alt="Domain" /></div> <img src="images/domain_leftmenuicon.png" alt="Domain" /></div>
@ -490,9 +490,9 @@ long milliseconds = new Date().getTime();
</div> </div>
</div> </div>
<div class="leftmenu_list"> <div class="leftmenu_list">
<div class="leftmenu_content"> <div class="leftmenu_content" id="expandable_first_level">
<div class="leftmenu_firstindent"> <div class="leftmenu_firstindent">
<div class="leftmenu_arrows close" id="expanded_arrow_icon"> <div class="leftmenu_arrows close" id="expandable_first_level_arrow">
</div> </div>
<div class="leftmenu_list_icons"> <div class="leftmenu_list_icons">
<img src="images/events_leftmenuicon.png" alt="Event" /></div> <img src="images/events_leftmenuicon.png" alt="Event" /></div>
@ -525,9 +525,9 @@ long milliseconds = new Date().getTime();
</div> </div>
</div> </div>
<div class="leftmenu_list"> <div class="leftmenu_list">
<div class="leftmenu_content highlighted"> <div class="leftmenu_content" id="expandable_first_level">
<div class="leftmenu_firstindent"> <div class="leftmenu_firstindent">
<div class="leftmenu_arrows open" id="expanded_arrow_icon"> <div class="leftmenu_arrows open" id="expandable_first_level_arrow">
</div> </div>
<div class="leftmenu_list_icons"> <div class="leftmenu_list_icons">
<img src="images/configuration_leftmenuicon.png" alt="System" /></div> <img src="images/configuration_leftmenuicon.png" alt="System" /></div>

View File

@ -1,13 +1,16 @@
$(document).ready(function() { $(document).ready(function() {
$("#leftmenu_container").find("#expanded_arrow_icon").bind("click", function(event) { $("#leftmenu_container").find("#expandable_first_level").bind("click", function(event) {
var $submenu = $(this).parent().parent().siblings(".leftmenu_expandedbox"); var $firstLevelMenu = $(this);
if($submenu.css("display") == "none") { var $secondLevelMenu = $firstLevelMenu.siblings(".leftmenu_expandedbox");
$(this).removeClass("close").addClass("open"); if($secondLevelMenu.css("display") == "none") {
$submenu.show(); $firstLevelMenu.find("#expandable_first_level_arrow").removeClass("close").addClass("open");
$firstLevelMenu.addClass("highlighted");
$secondLevelMenu.show();
} }
else { else {
$(this).removeClass("open").addClass("close"); $firstLevelMenu.find("#expandable_first_level_arrow").removeClass("open").addClass("close");
$submenu.hide(); $firstLevelMenu.removeClass("highlighted");
$secondLevelMenu.hide();
} }
return false; return false;
}); });