I have a question about transition, i am trying to create a custom collapsible sidebar, using transition. What is meant to happen, is that the #nav appears as soon as the image is hovered over. But somehow this doesn't work, please help.
#menu{
width: 1.75em;
height: 1.75em;
margin: 5px;
float: left;
}
#title{
color: rgba(0,0,0,0.50);
margin: 0% 0% 0% 5%;
font-size: 210%;
float: left;
}
#nav{
background-color: grey;
width: 0%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
#menu:hover #nav{
width: 50%;
function giveAlert(){
alert("Your costum button works!");
}/* Stylesheet voor Eric's meetcabine */
html, body{
height: 100%;
margin: 0%;
}
/* Opmaak voor Tablets */
@media screen and (max-width: 960px) and (max-height: 600px){
#header{
background: linear-gradient(white, gray);
height: 7.5%;
}
#menu{
width: 1.75em;
height: 1.75em;
margin: 5px;
float: left;
}
#title{
color: rgba(0,0,0,0.50);
margin: 0% 0% 0% 5%;
font-size: 210%;
float: left;
}
#nav{
background-color: grey;
width: 1%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
#menu:hover #nav{
width: 50%;
}
#navigation{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: grey;
}
li{
display: inline;
}
li a{
background-color: grey;
color: rgba(0,0,0,0.50);
display: block;
padding: 8px;
text-decoration: none; /*To remove the blue onderlines*/
}
li a:hover{
background-color: #607d8b; /*Blue-grey from matterialize*/
}
#section{
width: 100%;
height: 88%;
}
#buttons{
background-color: #f0f0f0;
width: 100%;
height: 50%;
}
#buttonlist{ /*da*/
margin: 0;
padding: 0;
}
#buttoncontainer{
float: none;
margin: 0;
padding: 0;
}
#button{
background-color: yellow;
width: 20%;
margin: 10px;
}
#button:hover{
background-color: red;
width: 20%;
margin: 10px;
}
#graph{
background-color: #fafafa;
width: 100%;
height: 50%;
}
#table{
background-color: #f6f6f6;
width: 100%;
height: 100%;
}
#footer{
background-color: grey;
position: fixed;
bottom: 0;
width: 100%;
}
}
/* Opmaak voor Desktops en Laptops en tablets*/
@media screen and (min-width: 960px) and (min-height: 600px){
#header{
background: linear-gradient(white, gray);
height: 7.5%;
}
#title{
color: rgba(0,0,0,0.50);
margin: 0%;
font-size: 375%;
}
#nav{
background-color: grey;
}
#navigation{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: grey;
}
li{
float: left;
display: inline;
}
li a{
background-color: grey;
color: rgba(0,0,0,0.50);
display: block;
padding: 8px;
text-decoration: none; /*To remove the blue onderlines*/
}
li a:hover{
background-color: #607d8b; /*Blue-grey from matterialize*/
}
#section{
width: 100%;
height: 88%;
}
#buttons{
background-color: #f0f0f0;
width: 50%;
height: 50%;
float: left;
}
#buttonlist{ /*da*/
margin: 0;
padding: 0;
}
#buttoncontainer{
float: none;
margin: 0;
padding: 0;
}
#button{
background-color: yellow;
width: 20%;
margin: 10px;
}
#button:hover{
background-color: red;
width: 20%;
margin: 10px;
}
#graph{
background-color: #fafafa;
width: 50%;
height: 50%;
float: left;
}
#table{
background-color: #f6f6f6;
width: 50%;
height: 100%;
float: right;
}
#footer{
background-color: grey;
position: fixed;
bottom: 0;
width: 100%;
}
}<!DOCTYPE html>
<html lang="nl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eric's meetcabine</title>
<link href="./favicon.ico" rel="icon" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="header">
<img src="menu.png" id="menu">
<h1 id="title">Eric's meetcabine</h1>
</div>
<div id="nav">
<ul id="navigation">
<li><a href="#home">Home</a></li>
<li><a href="#meting">Meting</a></li>
<li><a href="#help">Help</a></li>
</ul>
</div>
<div id="section">
<div id="buttons">
<ul id="buttonlist">
<li id="buttoncontainer" onclick="giveAlert()"><a id="button" href="#help">Coffee</a></li>
<li id="buttoncontainer" onclick="giveAlert()"><a id="button" href="#help">Tea</a></li>
<li id="buttoncontainer" onclick="giveAlert()"><a id="button" href="#help">Milk</a></li>
</ul>
</div>
<div id="table"></div>
<div id="graph"></div>
</div>
<div id="footer"><center>© Protonic</center></div>
</body>
</html>P.S. Sorry for my terrible language skills, I am from the Netherlands.
This works, also I changed #nav{ top:0; } to #nav{ top:27px; } to avoide the problem where when the #nav section expands it will cover the #menu toggle and the "hover" effect won't work making quirky animation.
Also change this selector #menu:hover ~ #nav to this #menu:hover ~ #nav, #nav:hover so that the #nav section will stay expanded when you hover away from the #menu into the #nav section and won't transition back to it's original width.
CSS:
#nav {
/* code */
top: 27px;
/* code */
}
#menu:hover ~ #nav, #nav:hover{
width: 50%;
}
HTML:
<div id="header">
<img src="menu.png" id="menu">
<h1 id="title">Eric's meetcabine</h1>
<div id="nav">
<ul id="navigation">
<li><a href="#home">Home</a>
</li>
<li><a href="#meting">Meting</a>
</li>
<li><a href="#help">Help</a>
</li>
</ul>
</div>
</div>
Full Code:
function giveAlert() {
alert("Your costum button works!");
}/* Stylesheet voor Eric's meetcabine */
html,
body {
height: 100%;
margin: 0%;
}
/* Opmaak voor Tablets */
@media screen and (max-width: 960px) and (max-height: 600px) {
#header {
background: linear-gradient(white, gray);
height: 7.5%;
}
#menu {
width: 25px;
height: 25px;
margin: 5px;
display: inline-block;
z-index: 10;
cursor: pointer;
}
#title {
color: rgba(0, 0, 0, 0.50);
margin: 0% 0% 0% 5%;
font-size: 210%;
display: inline-block;
}
#nav {
background-color: grey;
width: 1%;
height: 100%;
position: absolute;
top: 27px;
left: 0;
z-index: 1;
-webkit-transition: width 2s;
/* For Safari 3.1 to 6.0 */
transition: width 2s;
}
#menu:hover ~ #nav,
#nav:hover {
width: 50%;
}
#navigation {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: grey;
}
li {
display: inline;
}
li a {
background-color: grey;
color: rgba(0, 0, 0, 0.50);
display: block;
padding: 8px;
text-decoration: none;
/*To remove the blue onderlines*/
}
li a:hover {
background-color: #607d8b;
/*Blue-grey from matterialize*/
}
#section {
width: 100%;
height: 88%;
}
#buttons {
background-color: #f0f0f0;
width: 100%;
height: 50%;
}
#buttonlist {
/*da*/
margin: 0;
padding: 0;
}
#buttoncontainer {
float: none;
margin: 0;
padding: 0;
}
#button {
background-color: yellow;
width: 20%;
margin: 10px;
}
#button:hover {
background-color: red;
width: 20%;
margin: 10px;
}
#graph {
background-color: #fafafa;
width: 100%;
height: 50%;
}
#table {
background-color: #f6f6f6;
width: 100%;
height: 100%;
}
#footer {
background-color: grey;
position: fixed;
bottom: 0;
width: 100%;
}
}
/* Opmaak voor Desktops en Laptops en tablets*/
@media screen and (min-width: 960px) and (min-height: 600px) {
#header {
background: linear-gradient(white, gray);
height: 7.5%;
}
#title {
color: rgba(0, 0, 0, 0.50);
margin: 0%;
font-size: 375%;
}
#nav {
background-color: grey;
}
#navigation {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: grey;
}
li {
float: left;
display: inline;
}
li a {
background-color: grey;
color: rgba(0, 0, 0, 0.50);
display: block;
padding: 8px;
text-decoration: none;
/*To remove the blue onderlines*/
}
li a:hover {
background-color: #607d8b;
/*Blue-grey from matterialize*/
}
#section {
width: 100%;
height: 88%;
}
#buttons {
background-color: #f0f0f0;
width: 50%;
height: 50%;
float: left;
}
#buttonlist {
/*da*/
margin: 0;
padding: 0;
}
#buttoncontainer {
float: none;
margin: 0;
padding: 0;
}
#button {
background-color: yellow;
width: 20%;
margin: 10px;
}
#button:hover {
background-color: red;
width: 20%;
margin: 10px;
}
#graph {
background-color: #fafafa;
width: 50%;
height: 50%;
float: left;
}
#table {
background-color: #f6f6f6;
width: 50%;
height: 100%;
float: right;
}
#footer {
background-color: grey;
position: fixed;
bottom: 0;
width: 100%;
}
}<div id="header">
<img src="menu.png" id="menu">
<h1 id="title">Eric's meetcabine</h1>
<div id="nav">
<ul id="navigation">
<li><a href="#home">Home</a>
</li>
<li><a href="#meting">Meting</a>
</li>
<li><a href="#help">Help</a>
</li>
</ul>
</div>
</div>
<div id="section">
<div id="buttons">
<ul id="buttonlist">
<li id="buttoncontainer" onclick="giveAlert()"><a id="button" href="#help">Coffee</a>
</li>
<li id="buttoncontainer" onclick="giveAlert()"><a id="button" href="#help">Tea</a>
</li>
<li id="buttoncontainer" onclick="giveAlert()"><a id="button" href="#help">Milk</a>
</li>
</ul>
</div>
<div id="table"></div>
<div id="graph"></div>
</div>
<div id="footer">
<center>© Protonic</center>
</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments