Bart Admiraal Bart Admiraal - 4 years ago 130
HTML Question

Transition doesnt work

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>&#169; Protonic</center></div>
</body>
</html>





P.S.
Sorry for my terrible language skills,
I am from the Netherlands.

Answer Source

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.

JS Fiddle-updated

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>&#169; Protonic</center>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download