Difference between revisions of "Template:Duesseldorf"

Line 19: Line 19:
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
#bodyContent a[href ^="https://"], .link-https { padding-right:0px;}  
 
#bodyContent a[href ^="https://"], .link-https { padding-right:0px;}  
 +
 +
* {
 +
  margin: 0;
 +
  padding: 0;
 +
}
 +
 +
/* Icon 1 */
 +
 +
#nav-icon3 {
 +
  width: 60px;
 +
  height: 45px;
 +
  position: relative;
 +
  margin: 50px auto;
 +
  -webkit-transform: rotate(0deg);
 +
  -moz-transform: rotate(0deg);
 +
  -o-transform: rotate(0deg);
 +
  transform: rotate(0deg);
 +
  -webkit-transition: .5s ease-in-out;
 +
  -moz-transition: .5s ease-in-out;
 +
  -o-transition: .5s ease-in-out;
 +
  transition: .5s ease-in-out;
 +
  cursor: pointer;
 +
}
 +
 +
#nav-icon3 span {
 +
  display: block;
 +
  position: absolute;
 +
  height: 9px;
 +
  width: 100%;
 +
  background: #d3531a;
 +
  border-radius: 9px;
 +
  opacity: 1;
 +
  left: 0;
 +
  -webkit-transform: rotate(0deg);
 +
  -moz-transform: rotate(0deg);
 +
  -o-transform: rotate(0deg);
 +
  transform: rotate(0deg);
 +
  -webkit-transition: .25s ease-in-out;
 +
  -moz-transition: .25s ease-in-out;
 +
  -o-transition: .25s ease-in-out;
 +
  transition: .25s ease-in-out;
 +
}
 +
 +
/* Icon 3 */
 +
 +
#nav-icon3 span:nth-child(1) {
 +
  top: 0px;
 +
}
 +
 +
#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
 +
  top: 18px;
 +
}
 +
 +
#nav-icon3 span:nth-child(4) {
 +
  top: 36px;
 +
}
 +
 +
#nav-icon3.open span:nth-child(1) {
 +
  top: 18px;
 +
  width: 0%;
 +
  left: 50%;
 +
}
 +
 +
#nav-icon3.open span:nth-child(2) {
 +
  -webkit-transform: rotate(45deg);
 +
  -moz-transform: rotate(45deg);
 +
  -o-transform: rotate(45deg);
 +
  transform: rotate(45deg);
 +
}
 +
 +
#nav-icon3.open span:nth-child(3) {
 +
  -webkit-transform: rotate(-45deg);
 +
  -moz-transform: rotate(-45deg);
 +
  -o-transform: rotate(-45deg);
 +
  transform: rotate(-45deg);
 +
}
 +
 +
#nav-icon3.open span:nth-child(4) {
 +
  top: 18px;
 +
  width: 0%;
 +
  left: 50%;
 +
}
  
 
</style>
 
</style>
 +
 +
<div id="2021DD_TopBar">
 +
 +
<button id="2021DD_NavButton" onclick="this.getElementById('nav-icon3').classList.toggle('open')">
 +
Menu
 +
<div id="nav-icon3">
 +
  <span></span>
 +
  <span></span>
 +
  <span></span>
 +
  <span></span>
 +
</div>
 +
</button>
 +
  
 
<nav>
 
<nav>
Line 32: Line 127:
  
 
</nav>
 
</nav>
 +
 +
</div>
  
 
</html>
 
</html>

Revision as of 14:56, 19 September 2021