Is there a way to modify my menu button so that it slides down and up when clicked, instead of just showing and hiding?
HTML:
<div class="nav">
<nav class="primary-nav" ng-show="showMenu" ng-class="{true: 'showMenu'}[showMenu]">
<ul>
<li><a href="someurl">Desktop Site</a></li>
<li><a href="someurl">Link 1</a></li>
<li><a href="someurl">Link 2</a></li>
<li><a href="someurl">Link 3</a></li>
</ul>
</nav>
<div class="nav-slide"> <a href="" ng-click="showMenu = !showMenu">Menu</a>
</div>
CSS:
.nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
.primary-nav {
width: 100%;
background: #fff;
}
.primary-nav a { display: block; padding: 15px 8px; border-bottom: 1px solid #D1D1D1; color: #666666; font-weight: 700; }
.primary-nav li:last-child a { border-bottom: none; }
.nav-slide {
position: relative;
top: 0;
border-top: 4px solid #fff;
-webkit-box-shadow: 0px 5px 4px 0px #000;
box-shadow: 0px 5px 4px 0px #000;
z-index: 10;
}
.nav-slide a {
display: block;
width: 80px;
position: relative;
right: 10px;
padding: 2px 0 8px 0;
float: right;
text-align: center;
color: #333;
font-weight: 700;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: 0px 5px 4px 0px #000;
box-shadow: 0px 5px 4px 0px #000;
}
.nav-slide a.active { background-position: center -24px }
.showMenu {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
Check out the plunker for an interactive demo: http://plnkr.co/edit/NvWW0x2d8NPNJAIfDN5F