Warnung: file_put_contents(/home/www/web1/html/php_dev/test.txt) [function.file-put-contents]: failed to open stream: Permission denied in /home/www/web1/html/php_dev/sys/lib.activity.php (Zeile 58)
[CSS] Navi display block/none [Archiv] - PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr
php-resource




Archiv verlassen und diese Seite im Standarddesign anzeigen :
[CSS] Navi display block/none


 
Anbu
26-11-2010, 12:08 
 
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:


<!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>

 
AmicaNoctis
26-11-2010, 12:46 
 
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

 
Anbu
26-11-2010, 12:56 
 
probier ich gleich mal aus

Danke :charity:

 
Anbu
26-11-2010, 13:48 
 
hmm klappt zwar aber noch nicht ganz perfekt :p

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

Dein Ansatz(Funktioniert)

#naviTop:hover ul li ul.active {
display: none;
}


Hinzugefügt:
Mein Ansatz für zum Fixen des aktuellen Problems

#naviTop ul li:hover ul.active li {
display: block;
}

 
AmicaNoctis
26-11-2010, 14:02 
 
hmm klappt zwar aber noch nicht ganz perfekt :p

Das hatte ich nicht erwähnt, weil sich das ja von selbst versteht. :p

 
Anbu
26-11-2010, 14:06 
 
dann probier ich mal weiter... :D

 
AmicaNoctis
26-11-2010, 14:09 
 
Du brauchst dafür doch eigentlich nur die specificity dieser beiden Regeln erhöhen:

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


=>

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.

 
Anbu
26-11-2010, 14:10 
 
habs :grin:

das hat gefehlt

#naviTop ul:hover li:hover ul.active {
display: block;
}


Danke für den Stoß in die richtige Richtung :o

 
AmicaNoctis
26-11-2010, 14:11 
 
Ü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.

 
Anbu
26-11-2010, 14:18 
 
:grin:

- -

Alle Zeitangaben in WEZ +2. Es ist jetzt 10:01 Uhr.