kostenloser Webspace werbefrei: lima-city


Unterpunkte in Navigation, die erst bei :hover erscheinen

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    lorixon

    Kostenloser Webspace von lorixon

    lorixon hat kostenlosen Webspace.

    Hallo,

    ich habe mich jetzt ziemlich lange durch jegliche Foren gelesen, finde die Lösung aber nicht für meinen Fall. :(

    Ich bitte nur darum, mir zu helfen, dass ich Unterpunkte in einer Navigationsleiste machen kann, die erst erscheinen, wenn ich mit dem Mauszeiger über der Überkategorie bin.

    Dass das irgendwie mit a:hover funktionieren soll, habe ich da herauslesen können.

    Es kann auch nur ein nützlicher Link sein. Danke für jede Hilfe! :D

    CSS-Datei: Navigation
    #navButton .toggle {
    		text-decoration: none;
    		height: 100%;
    		left: 0;
    		position: absolute;
    		top: 0;
    		width: 100%;
    	}
    
    		#navButton .toggle:before {
    			content: "";
    			-moz-osx-font-smoothing: grayscale;
    			-webkit-font-smoothing: antialiased;
    			font-family: FontAwesome;
    			font-style: normal;
    			font-weight: normal;
    			text-transform: none !important;
    		}
    
    		#navButton .toggle:before {
    			background: rgba(144, 144, 144, 0.65);
    			border-radius: 4px;
    			color: #fff;
    			display: block;
    			font-size: 16px;
    			height: 2.25em;
    			left: 0.5em;
    			line-height: 2.25em;
    			position: absolute;
    			text-align: center;
    			top: 0.5em;
    			width: 3.5em;
    		}
    
    	#navPanel {
    		background: rgba(255, 255, 255, 0.975);
    		color: #444;
    		border-right: solid 1px rgba(144, 144, 144, 0.25);
    		box-shadow: 0.5em 0 2em 0 rgba(0, 0, 0, 0.125);
    	}
    
    		#navPanel nav {
    			padding: 0.5em 1.25em;
    		}
    
    			#navPanel nav ul {
    				list-style: none;
    				margin: 0;
    				padding: 0;
    			}
    
    				#navPanel nav ul li {
    					padding: 0;
    				}
    
    					#navPanel nav ul li:first-child a:not(.button), #navPanel nav ul li:first-child span:not(.button) {
    						border-top: 0;
    					}
    
    					#navPanel nav ul li a.button, #navPanel nav ul li span.button {
    						margin-top: 0.5em;
    					}
    
    					#navPanel nav ul li a:not(.button), #navPanel nav ul li span:not(.button) {
    						border-top: 1px solid rgba(0, 0, 0, 0.125);
    						display: block;
    						padding: 0.75em 0;
    						text-decoration: none;
    					}
    
    			#navPanel nav .button {
    				width: 100%;
    			}


    Beispiel eines Menüpunktes in der html:
    <nav id="nav">
    					<ul>
    						<li><a href="index.html">Home</a></li>
    						<li><a href="/wordpress">Blog</a></li>
    					</ul>
    				</nav>



    Was mache ich also falsch? :(

    LG
    Lorixon

    Beitrag zuletzt geändert: 17.6.2015 9:27:31 von lorixon
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Du kannst mit css-Klasse :hover Elemente selektieren, auf denen die Maus gerade liegt.

    ich hab hier man ein kleines Beispiel für ein Menu bei dem die Menu-Punkte erst angezeigt werden, wenn man den Haupt-Menüpunkt hovert.

    http://jsfiddle.net/u45750uv/

    Falls das nicht zufriedenstellend sein sollte sag einfach Bescheid!

    Beitrag zuletzt geändert: 17.6.2015 10:37:52 von daerror
  4. Hier ist eine sehr gute Anleitung http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Men%C3%BCs#Men.C3.BCs_mit_mehreren_.28geschachtelten.29_Ebenen

    Du musst praktisch eine Liste in eine Liste packen und diese dann mittels CSS entsprechend Anzeigen lassen.
  5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!