I have a navigation bar and a sub-navigation bar in my app. In the sub bar it's possible to press on a button and I want this button to open a new sub bar which will hide the original bar.
The new sub bar should slide from behind the main bar and hide the second bar.
Problem is:
When the third bar appears it bounces instead of appear smoothly
When the third bar disappears it just disappears and doesn't slide back up as I would expect
I tried playing with the top property thinking it might solve the issue, but it hasn't.
I'm attaching here the snippet. Or you can view it in jsfiddle
angular.module('myapp.controllers', []);
var app = angular.module('myapp', ['myapp.controllers', 'ngAnimate', ]);
angular.module('myapp.controllers').controller("BarController", function ($scope) {
$scope.showActionsBar = false;
$scope.cancelAction = function () {
$scope.showActionsBar = false;
}
$scope.click = function () {
$scope.showActionsBar = true;
}
});
.navbar-deploy {
background-color: red;
border: solid transparent;
}
.third, .sub-navbar-fixed {
background-color: black;
width: 100%;
height:60px;
padding-top: 18px;
margin-bottom: 0px;
z-index: 1000;
color: white;
}
.actions-bar {
top: 40px;
background-color: yellow;
position: fixed;
padding-left: 0px;
z-index: 1001;
}
.sub-bar {
padding-top: 40px;
}
.third-in, .third-out {
-webkit-transition:all ease-out 0.3s;
-moz-transition:all ease-out 0.3s;
-ms-transition:all ease-out 0.3s;
-o-transition:all ease-out 0.3s;
transition:all ease-out 0.3s;
-webkit-backface-visibility: hidden;
}
.third-in.myhidden-remove, .third-out.myhidden-add.myhidden-add-active {
display: block !important;
top: -2000px;
z-index: 0;
}
.third-out.myhidden-add, .third-in.myhidden-remove.myhidden-remove-active {
display: block !important;
top: -80px;
z-index: 1001;
}
.myhidden {
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<div ng-app="myapp">
<div ng-controller="BarController">
<div class="navbar-deploy navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="col-lg-2">First Toolbar</div>
</div>
</div>
<div class="sub-bar">
<div class="sub-navbar-fixed" ng-cloak>
<div class="container-fluid">
<span>
<a ng-click="click()"><span> Second Toolbar</span>
</a>
<div class="actions-bar third third-in third-out" ng-cloak ng-class="{'myhidden': !showActionsBar}">
<div class="container-fluid form-group"> <span class="col-lg-10">
<div class="col-lg-2 col-lg-offset-1">
<a ng-click="cancelAction()">Back</a>
</div>
</span>
</div>
</div>
</span>
</div>
</div>
</div>
</div>
</div>
Try this:
.myhidden{ top:-2000px; }
To be honest.. I know why the "bounce". Your yellow container is placed (with visibility:hidden) at the final position (when visible). When you start your animation the menu first go to top (origin of the animation) and then down.
To fix it you may probably position the yellow container when not visible under the black menu but... Imho your html is quite a mess (I don't mean any offense) as your container is place inside an span which contains the buttom and it's a children of the red menu... and that changing all that may mess up everything.
But your menu effect is easy to do it from scratch with nothing but very simple css, html and jquery. This is how I would do it in case it may help you if you are up to change your code.
With this html (the order of the elements are set to avoid the use of z-index)
<div class="header">
<div class="header-bot">
<span class="show">second toolbar</span>
</div>
<div class="header-extra">
<span class="hide">back</span>
</div>
<div class="header-top">
<span>first toolbar</span>
</div>
</div>
this css:
body {margin:0;padding:0;}
span {color:#fff;}
.header {
width:100%;
position:fixed;
top:0;
}
.header-top {
background-color:black;
height:50px;
position:absolute;
top:0px;
width:100%;
}
.header-bot {
background-color:red;
height:50px;
position:absolute;
top:50px;
width:100%;
}
.header-extra {
background-color:yellow;
height:50px;
position:absolute;
top:0;
width:100%;
transition: all 0.3s ease;
}
.down {
top:50px;
}
.hide {color:#000;}
and just this jquery (to add or remove a class when click on the buttoms):
$(document).ready(function () {
$('.show').click(function () {
$('.header-extra').addClass("down");
});
$('.hide').click(function () {
$('.header-extra').removeClass("down");
});
});
You may have something simillar to what you are looking for. Hope this can help anyway.
FIDDLE
Just remove class third-in and third-out from div element it will stop bouncing effect.
<div class="actions-bar third " ng-cloak ng-class="{'myhidden': !showActionsBar}">
<div class="container-fluid form-group"> <span class="col-lg-10">
<div class="col-lg-2 col-lg-offset-1">
<a ng-click="cancelAction()">Back</a>
</div>
</span>
</div>
</div>
Related
I'm trying to create an animation, which moves text up and shows some content when hovered over a card. When hovered over the card, the animation works as expected but when the cursor is placed on top of the text, there's this weird glitch and the text keeps moving up and down.
I've put this up on : https://codepen.io/anon/pen/qGwpaG
My code
HTML
<section class="section" id="black">
<div class="container">
<p class="display-4 d-flex justify-content-center spacing text-center light bold mt-3" id="case-head"> Make something you love.</p>
</div>
<div class="container">
<div class="row no-gutters">
<div class="col-lg-4">
<a href="blog.html" class="hover">
<div class="image">
<img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" class="">
</div>
<p class="img-text color bold">Sample - 1</p>
<p class="img-description light">Lorem Ipsum </p>
<i class="fas fa-long-arrow-alt-right img-description arrow"></i>
</a>
</div>
</section>
CSS
.img-text {
padding: 10px;
position: absolute;
bottom: 0px;
left: 16px;
font-size: 30px;
}
.img-description{
position: absolute;
padding: 10px;
bottom: 35px;
left: 16px;
font-size: 20px;
color: white;
}
.image {
position:relative;
width: 100%;
height: auto;
}
.image img {
width:100%;
vertical-align:top;
}
.image:after {
content:'\A';
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.8);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:hover:after {
opacity:1;
}
.color
{
color: white!important;
}
JS
$('.img-description').hide();
$(".hover").mouseover(function() {
$(this).find(".img-text").animate({ bottom: 100 },100);
$(this).find('.img-description').show();
})
$(".hover").mouseout(function() {
$(this).find(".img-text").animate({ bottom: 8 });
$(this).find('.img-description').hide();
})
You need to make sure that only the parent element is triggering the events. When using mouseover/mouseout, any child element will also trigger these events, which you don't want.
To fix this, you can either use mouseenter/mouseleave or, even better, use the hover shorthand:
$(".hover").hover(
function() {
$(this).find(".img-text").animate({ bottom: 100 }, 100);
$(this).find(".img-description").show();
},
function() {
$(this).find(".img-text").animate({ bottom: 8 });
$(this).find(".img-description").hide();
}
);
https://codepen.io/anon/pen/mYgxWv
Why is my preloaded animation continuing to display on my website after the preloaded animation is finished and my website launches?
I only want the preloaded animation to display for the amount of seconds specified and for it not to continue over when my website launches. Just to confirm I want to remove the preload animation from my active website after it launches. I only want the animation to be there for the specified seconds and when the site launches I don't want to see it. How can I remove this?
This is an jsfiddle example example of how it looks currently with the loading animation carrying over to my website in the JSFIDDLE, this is what I want to be removed and only have the preload animation before the website launches
I believe the issue is with my html. I have two sets of <body> tags due to the preloaded page being separate to my website. Could this be confusing the process and causing the preloading animation to carry over to my actual site when it launches?
Please Note
The splash divrepresents the webpage which displays for a few seconds at the start.
The app divrepresents my actual website.
Here is what I want removed this whole preloaded animation part with the text and black background from my website after it launches.
I want my website to look like this when it launches after the preloaded animation is finished.
This is because you have set .splash as the class of that div. And you are trying to get document.getElementById('splash'), which as the name says, gets the element by id attribute which is why it is giving you an error. Simply change the class attribute to id or just change the js to-
document.getElementsByClassName('splash')[0]
I have demonstrated that in your code using the id-
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$(document).on('click', 'a.page-scroll', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
body{
background:#333;
background: -webkit-gradient(radial, center center, 120, center center, 900, from(#111), to(#111));
background:-moz-radial-gradient(circle, #111, #111);
}
#app {
display: none;
}
#splash{
margin:200px auto;
}
h1{
font-family: 'Actor', sans-serif;
color:#FFF;
font-size:16px;
letter-spacing:1px;
font-weight:200;
text-align:center;
}
#splash span{
width:16px;
height:16px;
border-radius:50%;
display:inline-block;
position:absolute;
left:50%;
margin-left:-10px;
-webkit-animation:3s infinite linear;
-moz-animation:3s infinite linear;
-o-animation:3s infinite linear;
}
#splash span:nth-child(2){
background:blue;
-webkit-animation:kiri 1.2s infinite linear;
-moz-animation:kiri 1.2s infinite linear;
-o-animation:kiri 1.2s infinite linear;
}
#splash span:nth-child(3){
background:red;
z-index:100;
}
#splash span:nth-child(4){
background:red;
-webkit-animation:kanan 1.2s infinite linear;
-moz-animation:kanan 1.2s infinite linear;
-o-animation:kanan 1.2s infinite linear;
}
#-webkit-keyframes kanan {
0% {-webkit-transform:translateX(20px);
}
50%{-webkit-transform:translateX(-20px);
}
100%{-webkit-transform:translateX(20px);
z-index:200;
}
}
#-moz-keyframes kanan {
0% {-moz-transform:translateX(20px);
}
50%{-moz-transform:translateX(-20px);
}
100%{-moz-transform:translateX(20px);
z-index:200;
}
}
#-o-keyframes kanan {
0% {-o-transform:translateX(20px);
}
50%{-o-transform:translateX(-20px);
}
100%{-o-transform:translateX(20px);
z-index:200;
}
}
#-webkit-keyframes kiri {
0% {-webkit-transform:translateX(-20px);
z-index:200;
}
50%{-webkit-transform:translateX(20px);
}
100%{-webkit-transform:translateX(-20px);
}
}
#-moz-keyframes kiri {
0% {-moz-transform:translateX(-20px);
z-index:200;
}
50%{-moz-transform:translateX(20px);
}
100%{-moz-transform:translateX(-20px);
}
}
#-o-keyframes kiri {
0% {-o-transform:translateX(-20px);
z-index:200;
}
50%{-o-transform:translateX(20px);
}
100%{-o-transform:translateX(-20px);
}
}
body, {
width: 100%;
height: 100%;
}
html, body {
width: 100%;
height: 100%;
}
#media(min-width:767px) {
.navbar {
padding: 10px 0;
-webkit-transition: background .1s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .1s ease-in-out,padding .5s ease-in-out;
transition: background .1 ease-in-out,padding .1s ease-in-out;
//background-color: transparent;
background-color: white;
}
.top-nav-collapse {
padding: 0;
}
}
.nav.navbar-nav li a {
color: black;
}
.navbar-brand>img {
max-height: 100%;
height: 100%;
width: auto;
margin: 0 auto;
}
.intro-section {
height: 100%;
padding-top: 70px;
text-align: center;
min-height: auto;
background: #333;
}
.main1 {
color: #FFFFFF;
font-family: "Helvetica";
font-weight: bold;
font-size: 2em
}
.about-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
}
.contact-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
}
p {
color: white;
font-family: "Helvetica";
font-size: 1.3em;
margin: 10px auto;
white-space: nowrap;
overflow: hidden;
width: 0px
}
.main1 {
animation: type 1s 0s forwards steps(60, end);
}
.main2 {
animation: type2 1s 1s forwards steps(60, end);
}
.main3 {
animation: type3 1s 2s forwards steps(60, end);
}
span {
animation: blink 1s infinite;
}
#keyframes type{
from { width: 0; }
to { width: 430px; }
}
#keyframes type2{
from { width: 0; }
to { width: 224px; }
}
#keyframes type3{
from { width: 0; }
to { width: 364px; }
}
#keyframes blink{
to{opacity: .0;}
}
::selection{
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
setTimeout(function(){
document.getElementById('app').style['display'] = 'block';
document.getElementById('splash').style['display'] = 'none';
}, 3000);
</script>
<!--The script above in my code is placed in my code is head-->
<body>
<div id="splash">
<h1>LIAM DOCHERTY'S PORTFOLIO IS</h1>
<span></span>
<span></span>
<span></span>
<br>
<h1>LOADING</h1>
</div>
<div id="app">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" <img src="##############" alt="Personal Logo Design"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li>
<a class="page-scroll" href="#page-top">Home</a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Intro Section -->
<section id="intro" class="intro-section">
<div class="container header-container">
<div class="row">
<div class="col-lg-12 text-center">
<p class="main1">Welcome To My Digital Portfolio</p>
<p class="main2">My name is Liam Docherty</p>
<p class="main3">I'm a front end web developer from London.</p>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>About Section</h1>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Contact Section</h1>
</div>
</div>
</div>
</section>
</div>
The menu works ok, but have no animation. I want the .fullpagenav on click comes out from the left to right, and when re-clicked returns back (from right to left). It was great if you can do it with toggle and animation, only for the short code.
I found this code on the following topic: Slide to side with jquery on click and toggle
So, I have this following code:
$( ".secondary-toggle" ).click(function() {
$('.fullpagenav').animate({width:'toggle'},350);
});
.fullpagenav {
position:fixed;
height: 100%;
width:100%;
z-index: 2;
background-color:#464646;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fullpagenav">
<div id="secondary" class="secondary toggled-on" aria-expanded="true">
<nav id="site-navigation" class="main-navigation" role="navigation">
...
</nav>
</div>
</div>
Code above doesn't working, I create similiar code for you, to show You how could it be done. Its simply code, if you dont understand something, just ask me.
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script>
$(document).on('click', '.menu-item', function(e) {
var self = $(e.currentTarget);
self.toggleClass('menu-item-toggle')
});
</script>
<style>
.menu-item {
width: 50px;
height: 50px;
background-color: green;
position: relative;
left: 0;
transition: left 2s;
}
.menu-item-toggle {
left: 100px;
}
</style>
<div class="menu-item">Menu item</div>
https://jsfiddle.net/s7076ja4/
First you need to set it at the left most of the page and then create a class having position left:0 and then toggle that class on click and for the effects use transition.
$( ".secondary-toggle" ).click(function() {
if($(this).hasClass('active_nav')){
$('.fullpagenav').removeClass('active_nav');
}
else{
$('.fullpagenav').addClass('active_nav');
}
});
.fullpagenav {
position:fixed;
height: 100%;
width:100%;
z-index: 2;
background-color:#464646;
left:-100%;
transition: all 1s linear 1s;
-webkit-transition: all 1s linear 1s;
-moz-transition: all 1s linear 1s;
}
.active_nav{
left:0!important;
transition: all 1s linear 1s;
-webkit-transition: all 1s linear 1s;
-moz-transition: all 1s linear 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fullpagenav">
<div id="secondary" class="secondary toggled-on" aria-expanded="true">
<nav id="site-navigation" class="main-navigation" role="navigation">
...
</nav>
</div>
</div>
I placed the fullpagenav div to left most and on click on that div animates as you requested.
Below is the updated code
$( ".fullpagenav" ).click(function() {
$('.secondary').animate({width:'toggle'},350);
});
.fullpagenav {
position: fixed;
height: 100%;
width: 1%;
margin-left: -1%;
}
.secondary {
position: fixed;
height: 100%;
width: 10%;
background-color: #464646;
display: none;
padding-left: 1%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fullpagenav">
<div id="secondary" class="secondary toggled-on" aria-expanded="true">
<nav id="site-navigation" class="main-navigation" role="navigation">
...
</nav>
</div>
</div>
I'm trying to create the same effect as found on this site here https://glenner.org/ in the header when you click either the phone or email icon it toggles hidden text to slide. So when you click on the phone icon the text slides between the phone and the email icon.
I have this so far:
<div id="clickable" style="float:left; cursor:pointer; color: red"><i class="fa fa-phone"></i></div>
<div id="hidden" style="display:none; white-space:nowrap;">Phone Number</div>
<div id="clickable2" style="float:left; cursor:pointer; color: red"><i class="fa fa-envelope"></i></div>
<div id="hidden2" style="display:none; white-space:nowrap;">Email Here</div>
//
$('#clickable').click(function() {
$('#hidden').animate({width:'toggle'},350);
});
$('#clickable2').click(function() {
$('#hidden2').animate({width:'toggle'},350);
});
As of now when I click on one of the links it goes down to the next line, I'm sure I'm missing some css styling to fix this?
Here is my JsFiddle set up for it: http://jsfiddle.net/804jeg82/412/
I would clean up your code a little, put the hidden div inside the clickable div. Use CSS to control the animation and use classes rather than id's.
But that's just personal preference.
$(document).ready(function(){
$('.clickable').on('click' , function() {
$(this).find('.hid').toggleClass('showme');
});
});
.clickable .fa {
cursor: pointer;
color: red
}
.clickable .fa,
.hid {
float: left;
}
.hid {
width: 0;
overflow: hidden;
white-space: nowrap;
transition: all ease .35s;
-webkit-transition: all ease .35s;
-moz-transition: all ease .35s;
}
.showme {
width: 180px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="clickable"><i class="fa fa-phone"></i>
<div class="hid">Phone Number</div>
</div>
<div class="clickable"><i class="fa fa-envelope"></i>
<div class="hid">Email Here</div>
</div>
You need to add float:left to your hidden div
Specifically:
<div id="hidden" style="display:none; white-space:nowrap; float:left">Phone Number</div>
You may also wish to consider separating your HTML and CSS, for example if you used the ID, you could do something like:
HTML
<div id="hidden">Phone Number</div>
CSS
#hidden {
display:none;
white-space:nowrap;
float:left;
}
I am writing a bootstrap site, and want to make a sort of pop out menu from the right of the screen. This menu needs to be hidden' and when a button "Menu" is clicked it pops out of screen right, and covers whatever is on screen right. it does not push the content out of the way. Kind of like the windows 8 menu when you slide your finger from screen right.
I've thought of making a dropdown menu, since it behaves almost like I want, except for it's position. But I need to change the dropdown behaviour, So that instead of the dropdown menu popping out attached to the dropdown button, it pops out of screen right, but I can't find out how to do this.
<head>
...
<link href ="CSS/Bootstrap.min.css" rel ="stylesheet"/>
</head>
<div class="col-xs-3">
<!--some side content-->
</div>
<div class="col-xs-9">
<!--some side content-->
</div>
<div class="col-xs-12">
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<li class="dropup">
<a class="dropdown-toggle" data-toggle="dropdown">Menu
<ul> class="dropdown-menu">
<li>
</li>
<li>
</li>
</ul>
</a>
</li>
</div>
</nav>
</div>
<script src="JS/jquery-1.11.3.min.js"></script>
<script src="JS/bootstrap.min.js"></script>
I have three folders in my project:
Css with bootstrap css files(bootstrap-theme, bootstrap-theme min, bootstrap, bootstrap min)
Fonts
JS with bootstrap.js and bootstrap.min.js
Please show me how to do this.
If you know of a different way of making the menu I want in bootstrap I'd love to hear it as well.
Here is a simple example to get you going:
jsFiddle Demo
Note that an id was added to the a tag that opens the menu, to make it easy for jQuery to capture the click event on that element.
In the jQuery, we are using a variable mnuOut to keep track of whether the menu is IN or OUT (visible or hidden).
Also, we use the .animate() method to animate the slide out from the right. This works by changing the css attribute right:
FROM right:-80px (slid 80px beyond the right side of the screen)
TO right:0 where the right-most edge of the myMenu DIV is flush against the right side of the screen.
HTML:
<div id="myMenu">
<div id="item1" class="submenu">Item 1</div>
<div id="item2" class="submenu">Item 2</div>
<div id="item3" class="submenu">Item 3</div>
</div>
<a id="menuTrigger" class="dropdown-toggle" data-toggle="dropdown">Menu
CSS:
#myMenu{position:fixed;top:20px;right:-80px;width:80px;height:300px;background:palegreen;}
.submenu{width:100%;height:20px;padding:20px 5px;border:1px solid green;}
#menuTrigger:hover{cursor:pointer;}
jQuery:
mnuOut=false;
$('#menuTrigger').click(function(){
if (mnuOut){
//Menu is visible, so HIDE menu
$('#myMenu').animate({
right: '-80px'
},800);
mnuOut = false;
}else{
//Menu is hidden, so SHOW menu
$('#myMenu').animate({
right: 0
},800);
mnuOut = true;
}
})
If you want your menu to cover the content make sure you add
position: absolute;
Or
position: fixed;
Then after that give it
right: 500px;
But instead of 500px use the width of your menu
And to make it popout just override the
right: 0;
Making it 0 will make it stick to the right back to its original position
What you want requires a little more than just a couple of lines of css but I think this will give you a good start. Just style according to your theme:
HTML
<div id="oneout">
<span class="onetitle">
menu
</span>
<div id="oneout_inner">
<center>
menu info here
<br>
</center>
</div>
</div>
CSS
#oneout {
z-index: 1000;
position: fixed;
top: 64px;
right: 1px;
width: 18px;
padding: 40px 0;
text-align: center;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
#oneout_inner {
top: 60px;
right: -250px;
position: fixed;
width: 230px;
padding: 10px;
background: #FFFFFF;
height: auto;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
text-align: left;
border:1px solid #333;
}
#oneout:hover {
z-index: 1000;
right: 250px;
}
#oneout:hover #oneout_inner {
z-index: 1000;
right: 0px;
}
.onetitle {
display: block;
writing-mode: lr-tb;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
position: absolute;
right: -11px;
top: 3px;
font-family: Lucida Sans;
font-size: 16px;
font-weight: normal;
text-transform: uppercase;
letter-spacing: -1px;
}
Here is a working DEMO