Changed the main menu links so that they're highlighted when active

This commit is contained in:
Daniel Xie 2016-12-01 16:59:51 -06:00
parent 106c59efb0
commit eb31a0bd74
2 changed files with 12 additions and 36 deletions

@ -37,49 +37,21 @@ p {
text-decoration: none; text-decoration: none;
} }
.mainmenu>li a.active {
background-color: #4CAF50;
color: white;
}
.mainmenu>li a:hover:not(.active) { .mainmenu>li a:hover:not(.active) {
background-color: #555; background-color: #555;
color: white; color: white;
} }
/* Style all the buttons */ .mainmenu>li a:focus {
input[type=button] { background-color: #555;
width: 100px;
height: 32px;
background-color: #f4f4f4;
border: 1px solid #333333;
/* Makes cursor a pointer when you put mouse over button */
cursor: pointer;
} }
input[type=button]:hover { .mainmenu>li a.active {
/* When mouse is over the item, the background color becomes orange */ background-color: #555;
background-color: orange; color: white;
} }
h1 { h1 {
padding: 8px; padding: 8px;
} }
/** add the same margin to the save button **/
#save {
margin-left: 8px;
}
/** add the same margin to the left of the status box
but also make the text purple to make it stand out
a little bit **/
#status {
margin-left: 8px;
color: red;
/* text-shadow: px_from_left px_from_top px_blur color */
text-shadow: 2px 2px 8px #222
}

@ -51,12 +51,16 @@
<a href="#" id="create-script-menu-link"> Create Script </a> <a href="#" id="create-script-menu-link"> Create Script </a>
</li> </li>
<li class="scripts-tab" style="visibility:hidden">
<a href="#" id="scripts-menu-link"> Scripts </a>
</li>
<li class="world-tab" style="visibility:hidden"> <li class="world-tab" style="visibility:hidden">
<a href="#" id="world-menu-link"> World </a> <a href="#" id="world-menu-link"> World </a>
</li> </li>
<li class="develop-gui-tab" style="visibility:hidden"> <li class="create-program-tab" style="visibility:hidden">
<a href="#" id="develop-gui-menu-link"> Develop GUI </a> <a href="#" id="create-program-menu-link"> Create Program </a>
</li> </li>
<li class="save-game-tab"> <li class="save-game-tab">