[CSS] Navi display block/none

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [CSS] Navi display block/none

    Hi,

    ich hab mir ne horizontale Navi mit Subebenen gebastelt.

    Einblenden bei Hover funktioniert auch wunderbar im IE wie auch im Mozilla.

    Das Problem ist jetzt. Wenn ein Navi Element aktiv ist, wird die Subnavi immer angezeigt(logisch). Sie soll wenn man über ein anderes Navielement fährt wieder ausgeblendet werden.

    Für jeden Ansatz dankbar.

    Hier mal der Code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
    <html>
    	<head>
    		<title>Web04 - 1</title>
    		<style type="text/css">
    		.clear {
    			clear: both;
    		}
    		body {
    			text-align: center;
    			background-image: url("../background.jpg");
    			padding: 0;
    			margin: 0;
    		}
    		a {
    			cursor: pointer;
    		}
    		#top {
    			width: 100%;
    			background-image: url("../milchglas.png");
    			background-repeat: repeat-x;
    			text-align: center;
    		}
    		#infoNavi {
    			width: 100%;
    			height: 23px;
    			text-align: right;
    		}
    		#teaserTop {
    			width: 951px;
    			height: 58px;
    			margin: 0 auto;
    			text-align: left;
    		}
    		#naviTop {
    			width: 951px;
    			height: 119px;
    			margin: 0 auto;
    			text-align: left;
    			background-image: url("../topNaviBG.png");
    			background-repeat: repeat-x;
    			background-color: #FFFFFF;
    		}
    		#naviTop ul {
    			list-style-type: none;
    			padding: 0;
    			margin: 0;
    		}
    		#naviTop ul li {
    			width: 120px;
    			height: 58px;
    			float: left;
    			background-image: url("../navi_off.png");
    			background-repeat: no-repeat;
    		}
    		#naviTop ul li ul.sub {
    			display: none;
    			position: absolute;
    			top: 160px;
    			width: 400px;
    			list-style-type: none;
    			padding: 0;
    			margin: 0;
    		}
    		#naviTop ul li ul.sub li {
    			display: none;
    			width: 40px;
    			float: left;
    			background-image: none;
    		}
    		#naviTop ul li:hover ul.sub {
    			display: block;
    		}
    		#naviTop ul li:hover ul.sub li {
    			display: block;
    		}
    		#naviTop ul li.last {
    			width: 0px;
    			clear: both;
    			background-image: none;
    		}
    		#naviTop ul li ul.active {
    			display: block;
    		}
    		#naviTop ul li ul.active li {
    			display: block;
    		}
    		#naviTop ul li:hover ul.active {
    			display: none;
    		}
    		#naviTop ul li:hover ul.active li {
    			display: none;
    		}
    		#banner {
    			width: 951px;
    			height: 161px;
    			margin: 0 auto;
    			text-align: justify;
    		}
    		#bannerShad {
    			width: 951px;
    			height: 14px;
    			margin: 0 auto;
    		}
    		#bottom {
    			width: 951px;
    			margin: 0 auto;
    		}
    		#left {
    			float: left;
    			padding: 0 14px;
    		}
    		#middle {
    			float: left;
    			padding: 0 14px;
    		}
    		#right {
    			float: left;
    			padding: 0 14px;
    		}
    		#navi {
    			float: left;
    			width: 286px;
    			padding: 0 14px;
    		}
    		#threeCols #left, #threeCols #middle, #threeCols #right {
    			width: 286px;
    		}
    		#threeCols #middle, #threeCols #right {
    			margin-left: 3px;
    		}
    		#twoCols #left, #twoCols #right {
    			width: 286px;
    		}
    		#oneCols #left {
    			width: 600px;
    		}
    		#footer {
    			width: 951px;
    			margin: 0 auto;
    			text-align: left;
    		}
    		</style>
    	</head>
    	<body>
    		<div id="top">
    			<div id="infoNavi">infoNavi</div>
    			<div id="teaserTop">teaserTop</div>
    			<div id="naviTop"><!-- Max 7 Stück -->
    				<ul>
    					<li>
    						Test
    						<ul class="sub">
    							<li>Test</li>
    							<li>Test</li>
    							<li>Test</li>
    							<li>Test</li>
    							<li class="last"></li>
    						</ul>
    					</li>
    					<li>
    						Test
    						<ul class="sub">
    							<li>Test</li>
    							<li>Test</li>
    							<li>Test</li>
    							<li>Test</li>
    							<li class="last"></li>
    						</ul>
    					</li>
    					<li>
    						<a href="">Test</a>
    						<ul class="sub active">
    							<li>Test</li>
    							<li>Test</li>
    							<li>Test</li>
    							<li>Test</li>
    							<li class="last"></li>
    						</ul>
    					</li>
    					<li>
    						Test
    						<ul class="sub">
    							<li>Test</li>
    							<li>Test</li>
    							<li>Test</li>
    							<li>Test</li>
    							<li class="last"></li>
    						</ul>
    					</li>
    					<li>
    						Test
    						<ul class="sub">
    							<li>Test</li>
    							<li>Test</li>
    							<li>Test</li>
    							<li>Test</li>
    							<li class="last"></li>
    						</ul>
    					</li>
    					<li>
    						Test
    						<ul class="sub">
    							<li>Test</li>
    							<li>Test</li>
    							<li>Test</li>
    							<li>Test</li>
    							<li class="last"></li>
    						</ul>
    					</li>
    					<li>
    						Test
    						<ul class="sub">
    							<li>Test</li>
    							<li>Test</li>
    							<li>Test</li>
    							<li>Test</li>
    							<li class="last"></li>
    						</ul>
    					</li>
    					<li class="last"></li>
    				</ul>
    			</div>
    			<div id="banner" style="background-image:url('../banner.png');">banner</div>
    			<div id="bannerShad" style="background-image:url('../banner_schatten.png');"></div>
    		</div>
    		<div id="bottom">
    			<div id="oneCols">
    				<div id="navi">navi</div>
    				<div id="left">left</div>
    				<div class="clear"></div>
    			</div>
    		</div>
    		<div id="footer">
    			Footer
    		</div>
    	</body>
    </html>
    Lurchi ! Lurchi ! Lurchi !

  • #2
    Hallo,

    momentan wird die aktive Unternavi ja nur ausgeblendet, wenn man über ihrern Hauptnavipunkt hovert. Das kannst du ja aber umformulieren, so dass sie ausgeblendet wird, wenn man über #navitop ul selbst hovert. Sobald du also mit der Maus in die Navigationsleiste reingehst, würde das aktive Untermenü verschwinden.

    Gruß,

    Amica
    [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
    Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
    Super, danke!
    [/COLOR]

    Kommentar


    • #3
      probier ich gleich mal aus

      Danke
      Lurchi ! Lurchi ! Lurchi !

      Kommentar


      • #4
        hmm klappt zwar aber noch nicht ganz perfekt

        Jetzt wird das aktive immer ausgeblendet selbst wenn ich über dem aktiven hovere was ja dann nicht eintreten soll.

        Dein Ansatz(Funktioniert)
        Code:
        #naviTop:hover ul li ul.active {
        	display: none;
        }
        Hinzugefügt:
        Mein Ansatz für zum Fixen des aktuellen Problems
        Code:
        #naviTop ul li:hover ul.active li {
        	display: block;
        }
        Zuletzt geändert von Anbu; 26.11.2010, 13:53.
        Lurchi ! Lurchi ! Lurchi !

        Kommentar


        • #5
          Zitat von Anbu Beitrag anzeigen
          hmm klappt zwar aber noch nicht ganz perfekt
          Das hatte ich nicht erwähnt, weil sich das ja von selbst versteht.
          [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
          Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
          Super, danke!
          [/COLOR]

          Kommentar


          • #6
            dann probier ich mal weiter...
            Lurchi ! Lurchi ! Lurchi !

            Kommentar


            • #7
              Du brauchst dafür doch eigentlich nur die specificity dieser beiden Regeln erhöhen:

              Code:
              		#naviTop ul li:hover ul.sub {
              			display: block;
              		}
              		#naviTop ul li:hover ul.sub li {
              			display: block;
              		}
              =>

              Code:
              		html body div#naviTop ul li:hover ul.sub {
              			display: block;
              		}
              		html body div#naviTop ul li:hover ul.sub li {
              			display: block;
              		}
              oder so ähnlich.
              [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
              Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
              Super, danke!
              [/COLOR]

              Kommentar


              • #8
                habs

                das hat gefehlt
                Code:
                #naviTop ul:hover li:hover ul.active {
                	display: block;
                }
                Danke für den Stoß in die richtige Richtung
                Lurchi ! Lurchi ! Lurchi !

                Kommentar


                • #9
                  Übrigens musst du die li-Elements nicht extra noch auf display: block/none setzen. Wenn das Elternelement mit display: none ausgeblendet wird, sind auch dessen Kinder nicht zu sehen.
                  [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                  Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                  Super, danke!
                  [/COLOR]

                  Kommentar


                  • #10
                    Lurchi ! Lurchi ! Lurchi !

                    Kommentar

                    Lädt...
                    X