Permalink
Browse files

Menu items show a differente color when selected

  • Loading branch information...
1 parent 4356516 commit c1a6c7ff07e06cd97b59c0500dc438b8acc14076 @juanmaorta committed Mar 20, 2012
Showing with 27 additions and 3 deletions.
  1. +4 −0 css/main.css
  2. +18 −2 index.html
  3. +5 −1 sass/main.scss
View
4 css/main.css
@@ -98,6 +98,10 @@ ul {
text-decoration: none; }
#menu a:hover {
color: black; }
+ #menu a:active {
+ color: black; }
+ #menu a.current {
+ color: black; }
@media screen and (max-width: 768px) {
#menu {
float: none;
View
20 index.html
@@ -41,11 +41,16 @@
$maincont = $("#display_info");
$idcont = $("#id_info_cont");
+
// mini-router to load content
// so it will maintain state on page reloads
$(window).hashchange( function(){
- var param = (window.location.hash.substr(1));
+ var param, $menuitems;
+
+ $menuitems = $("#menu a");
+ param = (window.location.hash.substr(1));
+
switch(param) {
case "personal_info":
myApp.displayPersonalInfo($maincont, candidate);
@@ -69,14 +74,25 @@
myApp.displayPersonalInfo($maincont, candidate);
break;
}
+
+ // shows status in menu items
+ $menuitems.each(function () {
+ var $item, id;
+ $item = $(this)
+ id = $item.attr("href").substr(1);
+ if (id !== param) {
+ $item.removeClass("current");
+ } else {
+ $item.addClass("current");
+ }
+ });
});
$(window).hashchange();
// always show id info
myApp.displayIdInfo($idcont, candidate);
-
// print
$("#footer").click(function () {
myApp.printerView($maincont, candidate);
View
6 sass/main.scss
@@ -115,7 +115,11 @@ ul {
a {
color: inherit;
text-decoration: none;
- &:hover {color: $strong_color;} }
+ &:hover {color: $strong_color;}
+ &:active {color: $strong_color;}
+ &.current {color: $strong_color;}
+
+ }
@media screen and (max-width: 768px) {
float: none;
width: 100%;

0 comments on commit c1a6c7f

Please sign in to comment.