Navigation Wörter unterstreichen, Farbänderung beim Hovern etc
Hallo. Ich hab n Schulprojekt und soll eine Seite erstellen. An sich recht 'einfach', wenn man nur das nötigste reinpackt, aber Ich möchte schon dass es mir gefällt, da ich aber noch ein blutiger Anfänger bin, fällt mir das natürlich schwer.
Ich hänge noch ganz am Anfang an der Navigation.
Was ich möchte sind diese Dinge für die Navigation:
Wenn ich auf einen Bereich klicke, soll der aktive Bereich in der Navigation unterstrichen sein.
Wenn ich über ein Wort im Navigationsbereich hover, soll es die Farbe ändern.
Wenn ich runter scrolle, soll die Navigationsbar nicht sichtbar sein, sobald man aber minimal hochscrollt, soll sie wieder sichtbar sein.
Also an sich wie auf dieser Seite https://demos.pixelgrade.com/rosa/ nur halt das mit dem scrollen fehlt da.
Der hier verwendete Code
<script src="/js_webseite/jquery.js" ></script>
<style>
#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;
}
/* EOS */
</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>
</body>
<script type="text/javascript">//<![CDATA[
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");
});
</script>
</body>
</html>