html.de - Rotierender Text Demo #2

by SpiceLab

HTML

<nav class="vertical" style="margin-top: 5px;">
  <ul>                        
    <li><a href="" style=""><span>Startseite <span>+</span></span></a></li>
  </ul>
</nav>

CSS

*{padding:0;margin:0;}
body{font:16px/1 sans-serif}
 
 
/*VERTICAL MENU*/
nav.vertical{
  position:relative;
  width: 160px;
  text-align: center;
  content: "+";
}
 
/* ALL UL */
nav.vertical ul{
  list-style: none;
}
/* ALL LI */
nav.vertical li{
  position:relative;
}
/* ALL A */
nav.vertical a{
  display:block;
  color:#eee;
  text-decoration:none;
  padding:40px 10px;
  background:#00B7FF;
  transition:0.2s;
}
/* ALL A HOVER */
nav.vertical li:hover > a{
  background:#778;
}
 
/* INNER UL HIDE */
nav.vertical ul ul{
  position:absolute;
  left:0%;
  top:0;
  width:100%;
  visibility:hidden;
  opacity:0;
  transition: transform 0.2s;
  transform: translateX(50px);
}
/* INNER UL SHOW */
nav.vertical li:hover > ul{
  left:100%;
  visibility:visible;
  opacity:1;
  transform: translateX(0px);
}
 
#margin2{margin-bottom: 1px;}

nav a :first-child :last-child {transition: transform 0.5s ease-in-out}
nav a:hover :first-child :last-child {display:inline-block;transform: rotate(60deg);} /* +-Zeichen rotiert, wenn der Button überfahren wird */