#1

Volker W.

Administrator  (6659 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   VolkerWarmers  ·   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 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!-- V.W. | All Browsers -->
 
		<style type="text/css">
 
			<!--
 
				#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 type="text/css">
 
				#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

Volker W. Musik & Sounds  ·  Facebook  ·  Google+  ·  Twitter  ·  Instagram  ·  StayFriends  ·  LinkedIn  ·  XING

Hilfe-Anfragen per PN, E-Mail usw. werden ab sofort nicht mehr beantwortet. Genau dafür ist dieses Forum da. Vielen Dank!

1357 Aufrufe | 1 Beiträge