Menu
I am trying to make a menu appear from right side by jQuery animation by clicking on a span which have runmenu class but it does not work , I made the same class for a button and it worked fine , what is the problem here and why it works for button only?!
$(document).ready(function() {
$(".runmenu").click(function() {
$(".menu").animate({
"right": 0
}, 1000);
});
});/* Global*/
.conatianer {
width: 1026.66px;
}
/*End global*/
/*Start navbar*/
.navbar {
position: relative;
background: url(http://vividmarketinginc.com/wp-content/uploads/2015/08/1672___selected7.jpg);
background-size: cover;
height: 700.531px;
overflow: hidden;
}
.navbar .menu {
position: absolute;
right: -200px;
width: 200px;
height: 700px;
background-color: gray;
color: white;
}
.navbar .overlay {
position: absolute;
background-color: rgba(0, 0, 0, .2);
width: 100%;
height: 700.531px;
z-index: 1;
}
.navbar .navbar_one,
.navbar .navbar_two {
position: relative;
z-index: 2;
}
.navbar .navbar_one h3 {
float: left;
margin-top: 0;
color: #FFF;
padding: 20px;
text-transform: capitalize;
}
.navbar .navbar_one div {
float: right;
margin-right: 10px;
color: #FFF;
padding: 20px;
}
.navbar .navbar_two {
text-align: center;
padding-top: 230px;
}
.navbar .navbar_two i {
color: #FFF
}
.navbar .navbar_two h1 {
text-transform: capitalize;
color: #FFF;
}
.navbar .navbar_two h3 {
text-transform: capitalize;
color: #FFF
}
.navbar .navbar_two ul {
list-style: none;
}
.navbar .navbar_two ul li {
width: 110px;
background-color: rgba(81, 186, 164, .8);
-webkit-border-radius: 25px;
-moz-border-radius: 10px;
border-radius: 25px;
text-align: center;
color: #FFF;
font-family: Arial;
font-size: 20px;
font-weight: 600;
line-height: 10px;
cursor: pointer;
padding: 20px 25px;
margin-left: 555px;
}
.navbar .navbar_two ul li:hover {
background-color: #51baa4;
}
.navbar .navbar_two ul li a {
color: #FFF;
text-decoration: none
}
/*End navbar*/<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Template retrospect</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/StyleSheet.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/normalize.css" />
</head>
<body>
<!--Start NavBar-->
<div class="navbar">
<div class="menu">
<!--Menu -->
<i class="fa fa-long-arrow-right"></i>
<ul>
<li>home</li>
<li>generic</li>
<li>elements</li>
</ul>
</div>
<div class="overlay"></div>
<div class="navbar_one">
<h3>retrospect</h3>
<div>
<i class="fa fa-bars fa-lg"></i>
<span class="runmenu">menu</span>
</div>
</div>
<div class="navbar_two">
<i class="fa fa-soundcloud fa-4x"></i>
<h1>etiam adipiscing</h1>
<h3>magna feugiat lorem dolor egetas</h3>
<ul>
<li><a href="#" class="runmenu">learn more </a>
</li>
</ul>
</div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/JavaScript.js"></script>
</body>
</html>
907
With jQuery, you can create custom animations.
The slideToggle() method toggles between slideUp() and slideDown() for the selected elements. This method checks the selected elements for visibility. slideDown() is run if an element is hidden. slideUp() is run if an element is visible - This creates a toggle effect.
The . animate() method allows us to create animation effects on any numeric CSS property. The only required parameter is a plain object of CSS properties.
jQuery Effect show() Method The show() method shows the hidden, selected elements. Note: show() works on elements hidden with jQuery methods and display:none in CSS (but not visibility:hidden).
It's all about z-index property and nothing wrong in your javascript. Your span.runmenu wasn't clickable because the navbar2 block was positioned over the span. Change the css and get the problem resolved.
give
.runmenu {
z-index: 999;
cursor: pointer;
}
.navbar .navbar_two {
z-index: 0;
}
See the fiddle
Preview
$(document).ready(function() {
$('span.runmenu').click(function() {
console.log("ok");
$(".menu").animate({
"right": 0
}, 1000);
});
});/* Global*/
.runmenu {
z-index: 999;
cursor: pointer;
}
.conatianer {
width: 1026.66px;
}
/*End global*/
/*Start navbar*/
.navbar {
position: relative;
background: url(http://vividmarketinginc.com/wp-content/uploads/2015/08/1672___selected7.jpg);
background-size: cover;
height: 700.531px;
overflow: hidden;
}
.navbar .menu {
position: absolute;
right: -200px;
width: 200px;
height: 700px;
background-color: gray;
color: white;
}
.navbar .overlay {
position: absolute;
background-color: rgba(0, 0, 0, .2);
width: 100%;
height: 700.531px;
z-index: 1;
}
.navbar .navbar_one,
.navbar .navbar_two {
position: relative;
z-index: 2;
}
.navbar .navbar_one h3 {
float: left;
margin-top: 0;
color: #FFF;
padding: 20px;
text-transform: capitalize;
}
.navbar .navbar_one div {
float: right;
margin-right: 10px;
color: #FFF;
padding: 20px;
}
.navbar .navbar_two {
text-align: center;
padding-top: 230px;
z-index: 0;
}
.navbar .navbar_two i {
color: #FFF
}
.navbar .navbar_two h1 {
text-transform: capitalize;
color: #FFF;
}
.navbar .navbar_two h3 {
text-transform: capitalize;
color: #FFF
}
.navbar .navbar_two ul {
list-style: none;
}
.navbar .navbar_two ul li {
width: 110px;
background-color: rgba(81, 186, 164, .8);
-webkit-border-radius: 25px;
-moz-border-radius: 10px;
border-radius: 25px;
text-align: center;
color: #FFF;
font-family: Arial;
font-size: 20px;
font-weight: 600;
line-height: 10px;
cursor: pointer;
padding: 20px 25px;
margin-left: 555px;
}
.navbar .navbar_two ul li:hover {
background-color: #51baa4;
}
.navbar .navbar_two ul li a {
color: #FFF;
text-decoration: none
}
/*End navbar*/<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<!--Start NavBar-->
<div class="navbar">
<div class="menu">
<!--Menu -->
<i class="fa fa-long-arrow-right"></i>
<ul>
<li>home</li>
<li>generic</li>
<li>elements</li>
</ul>
</div>
<div class="overlay"></div>
<div class="navbar_one">
<h3>retrospect</h3>
<div>
<i class="fa fa-bars fa-lg"></i>
<span class="runmenu">menu</span>
</div>
</div>
<div class="navbar_two">
<i class="fa fa-soundcloud fa-4x"></i>
<h1>etiam adipiscing</h1>
<h3>magna feugiat lorem dolor egetas</h3>
<ul>
<li><a href="#" class="runmenu">learn more </a>
</li>
</ul>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
