#1

Volker W.

Administrator  (7794 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   volkerw68

Per CSS ganz einfach die Navigation und Menüs transparent machen

Wer bei web to date NG oder Siquando Pro Web so wie ich das Flex-Design Henderson nutzt, kann per folgendem CSS-Code die Navigation sowie deren Menüs ganz einfach mit etwas Transparenz ein wenig "cooler" machen.

Dazu kopiert Ihr im Client einfach folgenden Code nach Datei -> Website-Eigenschaften -> HTML -> Im <head>-Bereich :

<!-- V.W. | All Browsers -->

	<style>

		#nav {
			opacity: 0.8;
			position: relative;
			text-shadow: 1px 1px 1px #000000;
			z-index: 9999;
		}
 
		#nav ul ul {
			border-bottom: none;
		}
 
		#nav li li {
			border-bottom: 1px solid #284766;
		}

	</style>

<!-- V.W. | IE (5-8) -->

	<!--[if lte IE 8]>

		<style>

			#nav {
				filter: alpha(opacity=80);
				position: static;
			}

		</style>

	<![endif]-->

<!-- V.W. | End -->

Wer sich dies vorab ansehen möchte, kann dies auf meiner privaten Website gerne tun. Bei Mouse-over über dem Navigations-Punkt "Sounds" öffnet sich das nun transparente Dropdown-Menü mit ebenfalls weiteren transparenten Verzweigungen.

Auf bspw. der untergeordneten Hauptseite Sounds -> Korg -> Wavestation, welche ja aufgrund des umfangreichen Inhalts recht lang ist, kann man beim Scrollen der Seite sehr gut erkennen, daß die oben fixierte Haupt-Navigation ebenfalls zu 20% transparent ist.

Vermutlich funktioniert das Ganze auch mit allen anderen Flex-Designs. Dies habe ich aber bisher noch nicht geprüft. Da geht also Probieren über Studieren!

Ggf. paßt Ihr den CSS-Code halt wunschgemäß noch ein wenig an. Man kann auf diese Art und Weise eigentlich alles hinbekommen, was per CSS irgendwie realisierbar ist.

Viel Spaß mit diesem CSS-Tipp! 😉


Viele Grüße,
Volker

Über mich  ·  Volker W. Musik & Sounds  ·  Facebook  ·  Twitter  ·  Instagram  ·  StayFriends  ·  LinkedIn  ·  XING

2916 Aufrufe | 1 Beiträge