seitenmenü homepage

by basti1012

HTML

Seitenmenü für hp
<div class="link1 link" id="navseite">
<li class="link1 link " id="link1">Link1
<ul>
<li class="link link2" id="link1113">Link111<ul class="raus">
     <li class="link link3" id="link1115">Link111</li>
     <li class="link link3" id="link112">Link112</li>
     <li class="link link3" id="link113">Link113</li>
</ul></li>
<li class="link link2" id="link112">Link12<ul>
     <li class="link link3" id="link121">Link111</li>
     <li class="link link3" id="link212">Link111</li>
     <li class="link link3" id="link123">Link111</li>
</ul></li>

<li class="link link2" id="link143">Link13<ul>
     <li class="link link3" id="link131">Link651</li>
     <li class="link link3" id="link322">Link662</li>
     <li class="link link3" id="link433">Link633</li>
</ul></li>
</ul></li>





<li class="link" id="link1">Link2
<ul>
<li class="link" id="link21">Link21</li>
<li class="link" id="link22">Link22</li>
<li  class="link" id="link23">Link23</li>
</ul></li>





<li class="link" id="link1">Link3
<ul>
<li class="link" id="link31">Link31</li>
<li class="link" id="link32">Link32</li>
<li class="link" id="link33">Link33</li>
</ul></li>





<li class="link" id="link1">Link4
<ul>
<li class="link" id="link41">Link41</li>
<li class="link" id="link42">Link42</li>
<li class="link" id="link43">Link43</li>
</ul></li>






 <li class="link" id="link1">Link5
<ul>
<li class="link" id="link51">Link51</li>
<li class="link" id="link52">Link52</li>
<li class="link" id="link53">Link53</li>
</ul></li>






<li class="link" id="link1">Link6
<ul>
<li class="link" id="link61">Link61</li>
<li class="link" id="link62">Link62</li>
<li class="link" id="link63">Link63</li>
</ul></li>






<li class="link" id="link1">Link7
<ul>
<li class="link" id="link71">Link71</li>
<li class="link" id="link72">Link72</li>
<li class="link" id="link73">Link73</li>
</ul></li>
</div>

CSS

#navseite{
  display:block;
}
#navseite,#navseite ul,
#navseite ul li ul {
    margin: 0;
    padding: 0;
}
#navseite li{
  top:0px;
  z-index:999;
  font-size:22px;
  height: 36px;
  text-shadow: 0 -1px 3px #202020;
  width:20vw;
  border-radius: 4px;
  box-shadow: 0 3px 4px #8b8b8b;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
   background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color: #5f5f5f;
    border: 1px solid black;
     color: #FFFFFF;
    display: block;
    line-height: 34px;
    outline: medium none;
    text-align: center;
    text-decoration: none;
    float: center;
    position: relative;
    width:calc(24vw - 2px);
}

ul{
    left: -9999px;
    position: absolute;
    top: -9999px;
    z-index: 2;
}

 

#navseite li .link:hover {
animation:animation 0.8s forwards linear infinite,blink 0.8s forwards linear infinite;
}

#navseite li:hover ul {
   top:0px;
   left:0px;
    width: 24vw;
    margin-left:24vw;
}

#navseite li:hover ul li:hover ul{
  display:block;
   top:0px;
   left:0px;
    width: 24vw;
    margin-left:24vw;
}
#navseite li:hover ul li ul{
  display:none;
}


 #navseite .link:active,
#navseite li .link:active{
  color:blue;
}
 
#navseite li .link:visited{
 color:yellow; 
}
 #navseite li:hover{
   color:red;
   transform:translate(40px, 0px);
   animation:blink 1s linear infinite;

 }
 
 
 
 
 
 
 
 
  @keyframes blink{
    0%,50%{
    border-left:2px solid red;
   border-right:2px solid red; 
      
    }
 
    51%,100%{
    border-left:2px solid green;
   border-right:2px solid green;
      
    }
  }
 @-webkit-keyframes animation {
    0% {
        -webkit-transform:rotate(3deg) scale(1);
    }
    30% {
        -webkit-transform: rotate(0deg)scale(1.2);
    }
    100% {
        -webkit-transform: rotate(-3deg) scale(1.1);
    }
}

JavaScript

$('.link3').hover(function(){
$('.link2').css('animation-play-state','paused');

});


$('.link2').hover(function(){
$(this).css('animation-play-state','running');

 
});