Register for your free account! | Forgot your password?

Go Back   elitepvpers > Coders Den > Web Development
You last visited: Today at 08:30

  • Please register to post and access all features, it's quick, easy and FREE!

Advertisement



Transparent Sticky Navigation

Discussion on Transparent Sticky Navigation within the Web Development forum part of the Coders Den category.

Reply
 
Old   #1
 
elite*gold: 0
Join Date: Aug 2017
Posts: 48
Received Thanks: 39
Transparent Sticky Navigation

Hallo Leute! Ich arbeite gerade an einem neuen Projekt und mein Wissen begrenzt sich auf CSS, HTML und PHP. Ich versuche gerade eine Navigation wie im folgenden Wordpress Theme zu erstellen:

Das klappt soweit auch ganz gut mit dem Code, den ich mir bisher zusammengebastelt habe:

Allerdings stehe ich vor einem letzten Problem .. mit nav.style.color lässt sich die Farbe des Text ändern, kann mir jemand sagen wie ich die Farbe von Links ändern kann (inkl. hover / visited)?

Ich habe einiges dazu gefunden, aber leider keine Lösung ..

Weiterhin würde ich mich über Tips freuen, wenn ich mein Vorhaben mit der Navigation anders / besser lösen kann bzw. wenn man an meinem vorhanden Code etwas verbessern kann.
Cℓoυd is offline  
Old 03/05/2019, 21:04   #2


 
False's Avatar
 
elite*gold: 0
The Black Market: 243/0/0
Join Date: Apr 2011
Posts: 11,115
Received Thanks: 2,436
Quote:
Originally Posted by Cℓoυd View Post
Hallo Leute! Ich arbeite gerade an einem neuen Projekt und mein Wissen begrenzt sich auf CSS, HTML und PHP. Ich versuche gerade eine Navigation wie im folgenden Wordpress Theme zu erstellen:

Das klappt soweit auch ganz gut mit dem Code, den ich mir bisher zusammengebastelt habe:

Allerdings stehe ich vor einem letzten Problem .. mit nav.style.color lässt sich die Farbe des Text ändern, kann mir jemand sagen wie ich die Farbe von Links ändern kann (inkl. hover / visited)?

Ich habe einiges dazu gefunden, aber leider keine Lösung ..

Weiterhin würde ich mich über Tips freuen, wenn ich mein Vorhaben mit der Navigation anders / besser lösen kann bzw. wenn man an meinem vorhanden Code etwas verbessern kann.
Ich würde dir raten statt das ganze Styling im Javascript zu machen es im Css zu machen.

Sprich du stylst ganz normal mit einer Klasse (z.B. menu) dein Menü und sobald man scrollt fügst du eine Klasse hinzu (z.B. fixed) mit der du einfach das Fixed Styling nutzt.

Wenn du auf Google nach "css link color" suchst und auf den ersten Link () gehst findest du auch schon das passende CSS Styling für Links.

Sollte das noch zu schwer für dich sein, dann rate ich dir erstmal die Grundlagen von Html, Javscript und Css anzuschauen und zu lernen bevor du dich an dieses Projekt machst.
False is offline  
Old 03/06/2019, 15:54   #3
 
elite*gold: 0
Join Date: Aug 2017
Posts: 48
Received Thanks: 39
Quote:
Originally Posted by False View Post
Ich würde dir raten statt das ganze Styling im Javascript zu machen es im Css zu machen.

Sprich du stylst ganz normal mit einer Klasse (z.B. menu) dein Menü und sobald man scrollt fügst du eine Klasse hinzu (z.B. fixed) mit der du einfach das Fixed Styling nutzt.
Konnte mein Problem nun mit viel probieren, wie oben beschrieben lösen ..

Code:
<div class="navigation" id='nav'>

	<ul>	
		<li><a href="">Startseite</a></li>
		<li><a href="">Neuigkeiten</a></li>
		<li><a href="">Galerie</a></li>
	</ul>
</div>
<script type="text/javascript">
	var  nav = document.getElementById('nav');
	window.onscroll = function(){
		if (window.pageYOffset >1) {
			nav.classList.add('floating');
		} else {
			nav.classList.remove('floating');
		}
	}
</script>
Cℓoυd is offline  
Reply


Similar Threads Similar Threads
Iphone, Navigation
07/20/2010 - Smartphones - 9 Replies
Hat sich erledigt, close pls.



All times are GMT +1. The time now is 08:30.


Powered by vBulletin®
Copyright ©2000 - 2026, Jelsoft Enterprises Ltd.
SEO by vBSEO ©2011, Crawlability, Inc.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Support | Contact Us | FAQ | Advertising | Privacy Policy | Terms of Service | Abuse
Copyright ©2026 elitepvpers All Rights Reserved.