Slide with Site (Toggle+Label problem)

HTML & CSS
1

Hello everyone,

I have a problem with a button (toggle + label) in css3 code(stated above), that doesn’t react with an action. It should slide simultaneously with drop-down menu from above, unfortunately it doesn’t. Can someone find out what is missing in it? Thanks for helping me out.

2

Hi,

I’m not sure if this is what you were trying to do but here it is anyway :slight_smile:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
* {
	margin: 0;
	padding: 0;
	font-family: "Helvetica Neue", Helvetica, sans-serif;
}
h1 {
	font-size: 40px;
	font-weight: bold;
	color: #191919;
}
p {
	color: #888;
	padding: 5px 0;
}
#toggle {
	position: absolute;
	cursor: pointer;
	left: -100%;
	top: -100%;
}
#menu {
	background: #181818;
	color: #fff;
	position: absolute;
	top: -250px;
	left: 0;
	width: 100%;
	height: 250px;
	padding: 20px;
	-webkit-transition: top 300ms cubic-bezier(0.15, 0.04, 0.03, 0.94);
	-moz-transition: top 300ms cubic-bezier(0.15, 0.04, 0.03, 0.94);
	transition: top 300ms cubic-bezier(0.15, 0.04, 0.03, 0.94);
	overflow: hidden;
	box-sizing: border-box;
}
#toggle ~ label {
	position: static;
	display:block;
	cursor: pointer;
	padding: 10px;
	background: #0b5fc7;
	width: 100px;
	border-radius: 45px;
	padding: 8px 10px;
	color: #fff;
	line-height: 20px;
	font-size: 14px;
	text-align: center;
	-webkit-transition: all 500ms ease;
	transition: all 500ms ease;
}
#toggle ~ label:after {
	content: "click";
}
 #toggle:checked ~ #menu {
 position: relative;
 top: 0;
}
#container {
	-webkit-transition: margin 300ms cubic-bezier(.15, .04, .03, .94);
	transition: margin 300ms cubic-bezier(.15, .04, .03, .94);
	padding: 5em 3em;
}
 #toggle:checked ~ #container {
 margin-top: 250px;
}
#toggle:checked ~ label {
	background: #DC3838;
}
#toggle:checked ~ label:after {
	content: "Done!";
}
</style>
</head>

<body>
<input type="checkbox" name="toggle" id="toggle"/>
<nav id="menu">
  <h2>Menu</h2>
  <p>List of the Menu</p>
</nav>
<article id="containter">
  <h2>Title of the Article</h2>
  <p>Subtitle of the Article</p>
</article>
<label for="toggle"></label>
</body>
</html>

I moved the label after the heading as I assumed that’s where you wanted it back in the flow (not absolutely positioned).

Then I used the general sibling combinator (~) instead of the adjacent sibling combinator(+) to target the label now that it was moved.

3

Yeah it finally worked, thanks buddy:) Could you tell me, where and how to put label transition to slice it down smoothly as menu?

4

Hi,

I’m not keen on this as it means limiting the menu to a fixed height which is bad for responsive design so you would need to add in media queries to change the 'magic numbers’ depending on how tall your content may be.

Note it also means that users resizing the text will not be catered for so you should probably change it all to ems for the height and margins.

Anyway here is the smooth slide in version albeit with the caveats mentioned above.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
* {
	margin: 0;
	padding: 0;
}
body {
	font-family: "Helvetica Neue", Helvetica, sans-serif;
}
h1 {
	font-size: 40px;
	font-weight: bold;
	color: #191919;
}
p {
	color: #888;
	padding: 5px 0;
}
#toggle {
	position: absolute;
	cursor: pointer;
	left: -100%;
	top: -100%;
}
#menu {
	background: #181818;
	color: #fff;
	position: absolute;
	top: -250px;
	left: 0;
	width: 100%;
	overflow:hidden;
	padding: 20px;
	height:250px;
	-webkit-transition: top 1300ms cubic-bezier(0.15, 0.04, 0.03, 0.94);
	-moz-transition: top 1300ms cubic-bezier(0.15, 0.04, 0.03, 0.94);
	transition: top 1300ms cubic-bezier(0.15, 0.04, 0.03, 0.94);
	box-sizing: border-box;
}
#toggle ~ label {
 position: static;
 display:block;
 cursor: pointer;
 padding: 10px;
 margin:0 0 0 3em;
 background: #0b5fc7;
 width: 100px;
 border-radius: 45px;
 padding: 8px 10px;
 color: #fff;
 line-height: 20px;
 font-size: 14px;
 text-align: center;
}
#toggle ~ label:after {
 content: "click";
}
 #toggle:checked ~ #menu {
 top: 0;
}
#container {
	padding: 5em 3em;
	margin:0;
	-webkit-transition: margin 1300ms cubic-bezier(0.15, 0.04, 0.03, 0.94);
	-moz-transition: margin 1300ms cubic-bezier(0.15, 0.04, 0.03, 0.94);
	transition: margin 1300ms cubic-bezier(0.15, 0.04, 0.03, 0.94);
}
#toggle:checked ~ #container {
 margin:250px 0 0;
}
#toggle:checked ~ label {
 background: #DC3838;
}
#toggle:checked ~ label:after {
 content: "Done!";
}
</style>
</head>

<body>
<input type="checkbox" name="toggle" id="toggle"/>
<nav id="menu">
  <h2>Menu</h2>
  <p>Fixed height menu only</p>
</nav>
<article id="container">
  <h2>Title of the Article</h2>
  <p>Subtitle of the Article</p>
</article>
<label for="toggle"></label>
</body>
</html>

I’d be tempted to use something like velocity.js instead to do this and avoid the limitations of fixed heights as with the css animations in this case.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.