tpmenü by basti1012

top menü by basti 1012

by basti1012

HTML

<body>
 
        <ul id="nav">
  <li><a id="link2"  class="test link1" href="#">Menu 1</a>
                <ul>
 <li><a  id="link3"  class="link2 test" href="#">Submenu 1</a></li>
 <li><a id="link4"   class="link3 test" href="#">Submenu 2</a></li>
 <li><a  id="link5"   class="link4 test"href="#">Submenu 3</a></li>
 <li><a id="link6"   class="link5 test"href="#">Submenu 4</a></li>
 <li><a id="link7"   class="link6 test"href="#">Submenu 5</a></li>
                </ul>
            </li>
 <li><a id="link8"   class="link7 test"href="#">Menu 2</a>
                <ul>
  <li><a id="link9"   class="link8 test"href="#">Submenu 2-1</a></li>
 <li><a id="link10"   class="link9 test"href="#">Submenu 2-2</a></li>
 <li><a id="link11"   class="link10 test"href="#">Submenu 2-3</a></li>
 
                    </ul> 
             </li>
 <li><a id="link12"   class="link11 test1 test"href="#">Menu 3</a>
                <ul>
 <li><a id="link13"   class="link12 test"href="#">Submenu 3-1</a></li>
  <li><a id="link14"   class="link13 test"href="#">Submenu 3-2</a></li>
 <li><a id="link15"   class="link14 test"href="#">Submenu 3-3</a></li>
  <li><a id="link16" class="link15 test"href="#">Submenu 3-4</a></li>
  <li><a id="link17"   class="link16 test"href="#">Submenu 3-5</a></li>
                </ul>
            </li>
 
        </ul>
 
    </body>

CSS

#nav,#nav ul {
width:100px;
    margin: 0;
    padding: 0;
}
#nav {
    font-size: 23px;
    height: 36px;
   // text-shadow: 0 -1px 3px #202020;
    width:500px;
   // box-shadow: 0 3px 4px #8b8b8b;
    background-color: #5f5f5f;
}
#nav li {
    border: 1px solid #575757;
    display: block;
    float: left;
    height: 35px;
    position: relative;
    width:150px;
}
#nav ul {
    left:-9999px;
    position: absolute;
    top:-9999px;
}
#nav ul li {
      background:#838383;
    box-shadow: 5px 5px 5px;
    width: 100%;
}

#nav li a {
    display: block;
    text-align: center;
    text-decoration: none;
 padding-top:8px;
}
 
 
@keyframes tada {
    0% {
 transform: scale(1);
    }
    30% {
   transform: scale(1.2);
    }
    100% {
 transform: scale(1.1);
    }
}
#nav li > a:hover {
 animation:tada 0.3s linear 1 forwards;
 color:yellow;
}

 #nav li:hover ul {
    left: 0;
    top: 34px;
    width: 150px;
}
   .test{
     color:white;
   }
     .test2{
     color:yellow;
   }

JavaScript

var h=localStorage.getItem('sichern');

$("#"+h+"").addClass("test2")


$("a").click(function(){
      s=this.id;
 
  localStorage.setItem('sichern',s);
var lin=document.getElementsByTagName("a");
// $(this).parent().addClass('test2');
for(li=2;li<=17;li++){
 try{
  
 if($("#link"+li).hasClass("test2") ) {
     $("#link"+li).removeClass("test2");
     $("#link"+li).addClass("test");
}
 }catch(e){}
     $(this).addClass("test2");
}
});
$("#link2,#link3,#link4,#link5,#link6,#link7").click(function(){
  $("#link2").addClass("test2");
});


$("#link8,#link9,#link10,#link11").click(function(){
 $("#link8").addClass("test2");
});

$("#link12,#link13,#link14,#link15,#link16,#link17").click(function(){
 $("#link12").addClass("test2");
});


// wenn kein sound erwünscht dann ab hier alles löschen
function sound(){
var addEvent = (function () {
  if (document.addEventListener) {
    return function (el, type, fn) {
      if (el && el.nodeName || el === window) {
        el.addEventListener(type, fn, false);
      } else if (el && el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
        }
      }
    };
  } else {
    return function (el, type, fn) {
      if (el && el.nodeName || el === window) {
        el.attachEvent('on' + type, function () { return fn.call(el, window.event); })
      } else if (el && el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
        }
      }
    };
  }
})();
var aLoops = [];
addEvent(window, 'load', function (event) {
    aLoops[1] = new Audio('http://www.script-tutorials.com/demos/272/media/button.ogg');
    aLoops[1].volume = 1.0;
    aLoops[2] = new Audio('http://www.script-tutorials.com/demos/272/media/button_click.ogg');
    aLoops[2].volume = 1.0;
});
var aBtns = document.querySelectorAll('#nav li');
addEvent(aBtns, 'mouseover', function (event) {
    aLoops[1].currentTime = 0;
    aLoops[1].play();
});
addEvent(aBtns, 'mouseout', function...