0
I have a Div, I am building a Custom Menu, in the Responsive style. I’d like to make her come up with an animated one, coming from the left side. Div contains the Menu links and a close button inside. Look at the code I’ve got so far:
<script type="text/javascript" src="http://hugovales.esy.es/jquery/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('.open-menu').click(function(e){
e.preventDefault();
var url = $(this).attr('href')
$('#menu').fadeIn(500);
});
$('#menu, .close-menu').click(function(e){
if( e.target !== this )
return;
$('#menu').fadeOut(500);
});
});
</script>
<div id="menu" style="background-color: rgba(0, 0, 0, 0.9); position:fixed; top:0; left:0; width:100%; height:100%; display:none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;">
<div id="mymenu" style="background-color: #fff; height: 100%; width: 20%; position: fixed; left: 0pt; top: 0pt; box-shadow: 10px -9px 3px rgba(0, 0, 0, 0.24);"><img class="close-menu" style="margin-left: 220px; margin-top: 10px;" src="http://hugovales.esy.es/css-alternative/bb083d7b27e4e2fd8e7f50c623582d10_30x40.png"></div></div>
<div class="open-menu">Open Menu</div>
This menu can be seen here, on my website.
You can see the text "Open Menu" there (In Header, Near Facebook Icon)
What I want is for him to come up with an animation, on the left side. Is there any way to make this Div (mymenu) appear like this? (Either with CSS or some Script)
Thank you to those who are willing to respond. Very Helpful!
That means that Div comes from the left as I wanted?
– Hugo Marcelo
The Transition property animates "anything" of html. Yes, it also applies to this case.
– Mr Guliarte
I couldn’t get it, boy.
– Hugo Marcelo