Menu
So basically, I'm building an app in Meteor, and I have the left navbar in a position: fixed; and left : -300px and want to slide it over to left : 300px, but have no idea about how to animate a transition in Meteor (somewhat the slide transition in jquery). I understand the basic JQuery aspect of thing, but for some reason, it doesnt seem to work when I put it under the if Meteor.isClient aspect of the script. Keep in mind, Im am fairly new to Meteor, inclusive javascript code would be much appreciated.
My current code is as follows.
HTML
<body>
<div class='topmenu'>
<div class='menubutton'>
<span class="icon-bar1"></span>
<span class="icon-bar2"></span>
<span class="icon-bar3"></span>
<!--Needs to be fixed so that we only need to use one icon-bar class!!!-->
</div>
<div class='BanditDiv'>
<h1 class='BanditName'>Bandit</h1>
</div>
</div>
<div class='leftnav'>
<div class='sitenav'>
<a class='internalnav' href="#">Home</a>
<a class='internalnav' href="#">Musicians</a>
<a class='internalnav' href="#">Recording Space</a>
</div>
</div>
<div class='main'>
</div>
</body>
CSS
body{
margin: 0px 0px 0px 0px;
}
.navitem:hover{
background-color: #000066;
}
.main{
background-color: rgb(128,128,128);
height: 200vh;
width: 100vw;
margin: 0px 0px 0px 0px;
overflow-x:hidden;
}
.topmenu{
position: fixed;
z-index: 10;
top: 0px;
width: 100vw;
height: 50px;
background: white;
border-bottom: 2px lightgray solid;
}
.BanditDiv{
position: fixed;
top: 0px;
height: 50px;
width: 30vw;
margin-left: 35vw;
float: center;
}
.BanditName{
text-align: center;
font: 400 25px/1.3 'Berkshire Swash', Helvetica, sans-serif;
color: #000066;
}
.menubutton{
position: fixed;
top: 5px;
left: 5px;
height: 40px;
width: 40px;
border: 1px #cccccc solid;
background-color: white;
border-radius: 5px;
}
.menubutton:focus{
outline: 0;
}
.icon-bar1 {
position: fixed;
top: 15px;
left: 10px;
margin: 0px 0px 0px 0px;
display: block;
width: 30px;
height: 2px;
background-color: #cccccc;
border-radius: 1px;
}
.icon-bar2 {
position: fixed;
top: 25px;
left: 10px;
margin: 0px 0px 0px 0px;
display: block;
width: 30px;
height: 2px;
background-color: #cccccc;
border-radius: 1px;
}
.icon-bar3 {
position: fixed;
top: 35px;
left: 10px;
margin: 0px 0px 0px 0px;
display: block;
width: 30px;
height: 2px;
background-color: #cccccc;
border-radius: 1px;
}
.leftnav{
position: fixed;
top: 0px;
left: -300px;
width: 300px;
height: 100vh;
z-index: 9001;
background-color: yellow;
}
765
So this is what I came up with for the solution that seemed to work. I created an angular module inside the Meteor.isClient and that seemed to work well.
if (Meteor.isClient) {
angular.module('sidebar',['angular-meteor']);
angular.module('sidebar').controller('SidebarCtrl', ['$scope',
function ($scope) {
function Menu (callback){
$('.menubutton').on('click', function (){
$('.leftnav').css({"box-shadow" : "2px 2px 2px #888888"});
$('.leftnav').animate({left : "0px"}, 500, function(){
$('.main').click(function() {
$('.leftnav').animate({left: "-302px"}, 500);
$('.leftnav').css({"box-shadow" : "none"});
});
$('.leftnav').click(function(event){
event.stopPropagation();
});
});
});
}
Menu();
}]);
}
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