tutorials.de - TEMPLATE

by SpiceLab

HTML

<div id="navwrapper">
  <div class="navmenu">
   <form action='eingeloggt.php' method='post'>
    <div class="mobillogo"></div>
    <div class="eingabe"><input type='text' name='name' class='form' size='20' value='Benutzer' onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"></div>
    <div class="eingabe"><input type='password' name='pwd' size='20' class='form' value='Passwort' onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"></div>
    <div class="divbutton"><button>Login</button></div>
    <ul>
      <li>
        <h2>Beispiel Überschrift</h2>
        <ul>
          <li><a href="#">Beispiel Unterpunkt</a></li>
          <li><a href="#">Beispiel Unterpunkt</a></li>
          <li><a href="#">Beispiel Unterpunkt</a></li>
        </ul>
      </li>
      <li>
        <h2>Beispiel Überschrift</h2>
        <ul>
          <li><a href="#">Beispiel Unterpunkt</a></li>
          <li><a href="#">Beispiel Unterpunkt</a></li>
          <li><a href="#">Beispiel Unterpunkt</a></li>
        </ul>
      </li>
      <li>
        <h2>Beispiel Überschrift</h2>
        <ul>
          <li><a href="#">Beispiel Unterpunkt</a></li>
          <li><a href="#">Beispiel Unterpunkt</a></li>
          <li><a href="#">Beispiel Unterpunkt</a></li>
          <li><a href="#">Beispiel Unterpunkt</a></li>
        </ul>
      </li>
    </ul>
   </form>
  </div>
  <div id="menu">
   <a href="#openNav" id="openBtn">Menü</a>
   <a href="#" class="register">Kostenlos Registrieren</a>
   <a href="#closeNav" id="closeBtn">Schließen</a>
  </div>
  <br class="clear"/>
</div>

CSS

* {
  margin:0;
  padding:0;
}
@media (max-width: 500px)
{
#navwrapper
{
    height:2em;
    overflow-x:hidden;
}
.navmenu, #menu
{
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
 
.navmenu
{
    width: 50%;
    height: 100%;
    position: fixed;
    left: 0%;
    top: 0;
    background: #252525;
}
.navmenu ul {
  list-style:none;
} 
.navmenu ul li h2 {
   margin-top: 2em;
   background: #05425e;
   height: 1.5em;
   border-top: solid 1px #777777;
   border-bottom: solid 1px #777777;
   color: white;
   padding: 3px;
   font: bold 0.8em Arial, Helvetica, sans-serif;
   text-align: center;   
}
.navmenu ul li ul li {
  height: 1.5em;
    border-bottom: solid 1px #777777;
    color: white;
    padding: 3px;
    font: bold 0.8em Arial, Helvetica, sans-serif;
    text-align: center;
}
.navmenu div
{
    height: 1.5em;
    border-bottom: solid 1px #777777;
    color: white;
    padding: 3px;
}
 
.headline
{
   
}
 
.underline
{
    
}
 .navmenu ul li ul li a
{
    text-decoration: none;
    color: white;
}
 
.navmenu ul li ul li:hover
{
    background: #444444;
}
 
.divbutton div
{
    padding: 0;
}
.divbutton
{
    background: #444444;
    padding: 0;
}
 
.divbutton:hover
{
    background: #4d764e;
}
 
.navmenu input
{
    width: 100%;
    height: 100%;
    margin: 0;
    display: block;
    text-align: center;
    text-decoration: none;
    background: #252525;
    border: 0;
    color: #ffffff;
    font: bold 0.8em Arial, Helvetica, sans-serif;
}
 
.navmenu button
{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    text-decoration: none;
    background: #444444;
    border: 0;
    color: #ffffff;
    font: bold 0.8em Arial, Helvetica, sans-serif;
}
 
.navmenu .eingabe:hover, .navmenu input:hover
{
    background: #444444;
}
.navmenu button:hover
{
    width: 100%;
...