*Hi guys and gals. I need to open a menu div layer when a button is clicked
and close menu div layer if it is open on mouseover event using angular.
How do I start with a partially closed div and then get it to open on click
event? My code seems sound yet it does not work. Here is the code:*
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="" />
<title>collapsible meny 5</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-animate.js"></script>
<style>
.menu.ng-show {
animation: my_slide_animation 2s linear;
}
@keyframes my_slide_animation {
from { width:20px; }
to { width: 560px; }
}
.menu {
float: right;
top:80px;
right: 10px;
width:20px;
height:430px;
background-color:white;
border-color:#0AA7E5;
border-style: solid;
border-width: 3px;
border-left-width: 20px;
border-radius: 6px 6px;
font: bold 12px Verdana;
color: red;
overflow: none;
}
.button {
width:260px;
height:30px;
background-color:white;
border-color:#0AA7E5;
border-style: solid;
border-width: 3px;
border-left-width: 10px;
border-right-width: 10px;
border-radius: 6px 6px;
font: bold 12px Verdana;
color: red;
}
</style>
</head>
<body ng-app="myApp" ng-init="menu">
<button class="button" ng-mouseover="" ng-click="menu.ng-show">Contact
Us</button>
<div class="menu" ng-show="menu"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>
</body>
</html>
Please enlighten me as to the error in my logic.
Thanks in advance,
Batoe
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
