I am embarking on my first venture into creating an animated menu.
Take a look at this image to see what I have in mind:
The arrows serve as a visual representation of my desire for the names to drop down and fade in when the menu button is clicked. Additionally, I aim for the menu to expand evenly across the page.
I have made an attempt to create a fiddle, but progress has been slow:
Check it out here: http://jsfiddle.net/dz0cee5L/21/
Below is the CSS code:
.button-container {
width:100%;
}
.button {
padding: 7px 30px;
cursor: pointer;
vertical-align: middle;
border: 2px solid;
display: inline-block;
}
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
width:100%;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #dbd5d1;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #b93037;
}