Menu
I don't know how to ask this question but i'll start with my code. here is the HTML and js
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<div id="behind-bg"></div>
<div id="code" class="code">
<a id="testlink" href="#">Click Here</a><br>
<a id="testlink" href="#">Click Here</a><br>
<a id="testlink" href="#">Click Here</a>
</div>
<div id="curl" class="curl"></div>
<div id="check-box-float">
<div id="open" class="toggle-menu">
<div id="close" class="toggle-menu">
</div>
</body>
<script>
$(function() {
$("#open").click(function() {
$(".curl").toggleClass("curl-out");
});
});
$(function() {
$("#open").click(function() {
$(".code").toggleClass("menu-reveal");
});
});
$(function() {
$("#close").click(function() {
$(".code").toggleClass("menu-unreveal");
});
});
</script>
</html>
and here is the css t go with it.
#open {
position:absolute;
display:block;
height:40px;
width:40px;
background: black;
top: 200px;
left: 400px;
z-index: 10;
}
#close {
position:absolute;
z-index: -9;
display:block;
height:40px;
width:40px;
background: yellow;
top: 0;
left: 40px;
}
.curl{
background: -moz-linear-gradient(-45deg, rgba(112,112,112,0) 48%, rgba(229,229,229,0.75) 51%, rgba(229,229,229,1) 52%, rgba(249,249,249,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(48%,rgba(112,112,112,0)), color-stop(51%,rgba(229,229,229,0.75)), color-stop(52%,rgba(229,229,229,1)), color-stop(100%,rgba(249,249,249,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(112,112,112,0) 48%,rgba(229,229,229,0.75) 51%,rgba(229,229,229,1) 52%,rgba(249,249,249,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(112,112,112,0) 48%,rgba(229,229,229,0.75) 51%,rgba(229,229,229,1) 52%,rgba(249,249,249,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(112,112,112,0) 48%,rgba(229,229,229,0.75) 51%,rgba(229,229,229,1) 52%,rgba(249,249,249,1) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(112,112,112,0) 48%,rgba(229,229,229,0.75) 51%,rgba(229,229,229,1) 52%,rgba(249,249,249,1) 100%); /* W3C */
width:15px;
height:15px;
position:fixed;
top:0;
left:0;
box-shadow: 0px 0px 5px #d3d3d3;
z-index: 20;
transition: width 2s ease, height 2s ease;
}
.curl-out {
width: 300px;
height: 300px;
box-shadow: 0px 0px 10px #d3d3d3;
}
.code{
background:#fffff;
white-space: nowrap;
overflow: hidden;
width:15px;
height:15px;
position:fixed;
top:0;
left:0;
z-index: 10;
}
.menu-reveal {
transition: width 2s ease, height 2s ease, z-index 3s ease;
width: 250px;
height: 250px;
z-index: 50;
}
.menu-unreveal {
transition: width 2s ease, height 2s ease, z-index 0s ease;
width: 15px;
height: 15px;
z-index: 10;
}
The problem I am getting is the behaviour of the two buttons (THE BLACK AND YELLOW BOXES)
when you load the page and click the black box the page curls and the text reveals with an ease - thats what i want. However, when you click the black button again the text doesn't disappear with an ease it just disappears.
next
if you refresh your browser and click the yellow button first the page curls but the the text does not reveal - that's fine too -- it's not programmed too. the black box has the #open ID
the problem is this - hit refresh again now click the black button first. this will open the curl and reveal the text, then if you keep clicking the yellow box it will work as desired ease in and out revealing the text with a z-index that makes it clickable too.
WHAT I WANT I want one button that works from the start which eases in and eases out. However, when the curl "closes" i want the z-index to animate immediately (so there is no delay when the page curl closes.)
I hope this makes sense.
382
asked Dec 20 '25 15:12
It is always best to get the transition added to an element BEFORE you make any changes. I've setup a fiddle to illustrate this and I think it achieves your goal: http://jsfiddle.net/xV9Rx/
Essentially:
I've moved transition properties around like so:
.code { transition: width 2s ease, height 2s ease, z-index 0s ease; /* no delay on z-index */ }
.menu-reveal { transition: width 2s ease, height 2s ease, z-index 3s ease; /* delay on z-index */ }
and thats it! Hope it helps!! :)
125
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
