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 {
color:red;
    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;
}
 .selected{
   
  color:red;
   }
   .test{
     color:white;
     
   }

JavaScript

$("a").click(function(){
var lin=document.getElementsByTagName("a");
var li1=lin.length;
for(li=0;li<=li1;li++){
try{
 if($(this).hasClass("selected") ) {
 
     $(this).removeClass("selected");
     $("a").addClass("test");
  }else{
      if($(this).hasClass("test") ) {
  
     $(this).removeClass("test");
        $(this).addClass("selected");
      s=this.id;
 
  localStorage.setItem('sichern',s);
    }
  
  
  }
  }catch(e){}
 }
 

      });


var h=localStorage.getItem('sichern');
 
 
 
 //warum geht das 
 //$("."+h+"").css("background","red")
 
// abernicht das 

$("."+h+"").addClass("selected")




































// wenn kein sound erwünscht dann ab hier alles löschen

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);
        }
      }
    };
  }
})();



 





// variables
var aLoops = []; // sound loops

// initialization
addEvent(window, 'load', function (event) {

    // load music files
 // aLoops[0] = new Audio('http://www.bigsoundbank.com/sounds/ogg/0477.ogg');
  //  aLoops[0].volume = 0.3;
    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;

 //   aLoops[0].addEventListener('ended', //function() { // loop background sound
  //      this.currentTime = 0;
  //     ...