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;
}
.mainmenu>li a.active {
background-color: #4CAF50;
color: white;
}
.mainmenu>li a:hover:not(.active) {
background-color: #555;
color: white;
}
/* Style all the buttons */
input[type=button] {
width: 100px;
height: 32px;
background-color: #f4f4f4;
border: 1px solid #333333;
/* Makes cursor a pointer when you put mouse over button */
cursor: pointer;
.mainmenu>li a:focus {
background-color: #555;
}
input[type=button]:hover {
/* When mouse is over the item, the background color becomes orange */
background-color: orange;
.mainmenu>li a.active {
background-color: #555;
color: white;
}
h1 {
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>
</li>
<li class="scripts-tab" style="visibility:hidden">
<a href="#" id="scripts-menu-link"> Scripts </a>
</li>
<li class="world-tab" style="visibility:hidden">
<a href="#" id="world-menu-link"> World </a>
</li>
<li class="develop-gui-tab" style="visibility:hidden">
<a href="#" id="develop-gui-menu-link"> Develop GUI </a>
<li class="create-program-tab" style="visibility:hidden">
<a href="#" id="create-program-menu-link"> Create Program </a>
</li>
<li class="save-game-tab">