Menü mit onclick
Hallo liebe Community,
ich bin noch am Javascript lernen und schreibe deshalb hier ins Forum rein. Ich würde gerne ein Menü mit 3 Unterkategorien machen. Ich möchte dass dieses beim Klick auf einen Menüpunkt eine andere Farbe bekommt, sodass ich weiß auf welcher Seite ich mich befinde. Und wenn ich dann auf eines der Untermenüs drücke, soll der eben geklickte Menüpunkt aber immer noch blau sein. Ich hab mir überlegt, dass ich so etwas vermutlich mit onclick und if & else umsetzen kann. Hat einer so etwas schon einmal gemacht oder könnte mir ein Beispiel schicken, wie ich so etwas umsetzten kann?
Vielen Dank im Voraus.
LG. Louis.
Der hier verwendete Code
<script src="/js_webseite/jquery.js"></script>
<STYLE>
#nav,#nav ul {
width:100px;
margin: 0;
padding: 0;
}
#nav {
color:red;
font-size: 23px;
height: 36px;
width:500px;
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;
}
</STYLE>
<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>
<script>
$("a").click(function(){
var lin=docuhttps;
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');
$("."+h+"").addClass("selected")
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('/media/Post_Malone_Congratulations.ogg');
aLoops[1].volume = 1.0;
aLoops[2] = new Audio('/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(); // play click sound
});
addEvent(aBtns, 'mouseout', function (event) {
aLoops[1].currentTime = 0;
aLoops[1].pause(); // play click sound
});
addEvent(aBtns, 'click', function (event) {
aLoops[2].currentTime = 0;
aLoops[2].play(); // play click sound
});
</script>
</body>