HTML
<section>
<div class="content">
<img src="http://www.larrytech.com/img/portfolio/location.jpg">
<div id="show_menu" class="menu_btn">Quick Menu</div>
<div id="mob_menu">
<h5>Quick Menu</h5>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Incentives</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Conferences</a></li>
<li><a href="#">About us</a></li>
</ul>
</div>
</div>
</section>
CSS
section {
width:460px;
margin: auto;
height: 600px;
}
.content {
width: 92%;
position: relative;
overflow:hidden;
}
.content img {
width: 100%;
height: 600px;
object-fit: cover;
}
.menu_btn {
position: absolute;
bottom: 40px;
left: 0;
right: 0;
margin: auto;
text-align: center;
width: 100px;
padding: 10px 20px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4e287e+30,d131ed+100 */
background: #4e287e; /* Old browsers */
background: -moz-linear-gradient(-45deg, #4e287e 30%, #d131ed 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #4e287e 30%,#d131ed 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #4e287e 30%,#d131ed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e287e', endColorstr='#d131ed',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
color: #FFF;
border-radius:40px;
font-size: 0.95em;
transition: all 0.8s ease 0s;
}
#mob_menu {
position: absolute;
left: 0;
right:0;
bottom: -140px;
margin: auto;
height: 140px;
width: 100%;
background-color:#FFF;
border-top: 1px solid rgba(0,0,0,0.2);
transition: all 0.8s ease 0.3s;
}
#mob_menu h5 {
margin: 0;
text-align: center;
padding: 15px;
color: #333;
}
#mob_menu ul {
display: block;
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
flex-flow: row nowrap;
-moz-flex-flow: row nowrap;
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
-o-flex-flow: row nowrap;
display: flex;
list-style-type:none;
padding:0;
}
#mob_menu ul li {
flex: 1;
-moz-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
-o-flex: 1;
min-width: 160px;
}
#mob_menu ul li a {
display: block;
color: #222;
text-decoration: none;
font-size: 0.9em;
text-align: center;
}
JAVASCRIPT
$('#show_menu').click(function() {
$(this).css('bottom', '-60px');
$('#mob_menu').css('bottom', '0');
});
