Tomasz Gregorczyk

Tomasz Gregorczyk Product Manager

Temat: Menu rozwijalne w CSS

Witam,
menu rozwijalne Suckerfish za pomoca CSS

Niestety moge pokazac tylko na zrzutach.

Po lewej FF po prawej IE:

Obrazek


Poniżej kod calego menu:

.mod_navigation
{
position:absolute;
overflow:visible;
margin-left:auto;
z-index:999;
}
.mod_navigation p
{
margin:0px;
padding-left:5px;
background-color:#006699;
color:#ffffff;
}
.mod_navigation ul
{
margin:0px;
padding:0px;
list-style-type:none;
}
.mod_navigation li
{
width:146px;
position:relative;
float:left;
background-color:#007cc2;
border-top:1px solid #006699;
border-left:1px solid #006699;
line-height:25px;
}
.mod_navigation li ul ul
{
left:147px;
top:0px;
position:absolute;
}
.mod_navigation li ul
{
bottom:0px;
left:-1px;
right:0px;
top:26px;
position:absolute;
display:none;
}
.mod_navigation ul li:hover ul ul
{
display:none;
}
.mod_navigation ul ul li:hover ul
{
display:block;
}
.mod_navigation ul li:hover ul,
.mod_navigation ul li.sfhover ul
{
display:block;
}
.mod_navigation ul li:hover ul ul,
.mod_navigation ul li.sfhover ul ul
{
display:none;
}
.mod_navigation ul ul li:hover ul,
.mod_navigation ul ul li.sfhover ul
{
display:block;
}
.mod_navigation a
{
padding-left:5px;
text-decoration:none;
color:#ffffff;
}
.mod_navigation li:hover,
.mod_navigation li.sfhover
{
background-color:#006699;
}

Zrobione wg przepisu stad: http://www.typolight.org/wiki/tutorials:suckerfish_eng...
Kordian Zadrożny

Kordian Zadrożny TETA HR, IT.
Konsulting,
Marketing, JOOMLA,
CorelDraw

Temat: Menu rozwijalne w CSS

daj temu na wierzchu zindex -1
Krzysztof K.

Krzysztof K. webdeveloper

Temat: Menu rozwijalne w CSS

czy tam jest baner flash? Jeśli tak to poczytaj o wmode
Tomasz Gregorczyk

Tomasz Gregorczyk Product Manager

Temat: Menu rozwijalne w CSS

Nie, nie ma flasha. Albo tekst, albo zdjecie.
Krzysztof K.

Krzysztof K. webdeveloper

Temat: Menu rozwijalne w CSS

jak wcześniej wspomniano pobaw się z-indexem. Ale najlepiej to na menu daj z-index:999, albo na elementy menu.

A najlepiej wystaw to, bo na razie to wróżenie z fusów ;)

konto usunięte

Temat: Menu rozwijalne w CSS

Pytanie dodatkowe jest takie, czy menu i fotka poniżej są w tym samym divie - bo jeśli nie, to nadanie z-index tylko w menu nie wystarczy. Dodatkowo trzeba będzie nadać z-index także kontenerom, w myśl zasady - div ze zdjęciem ma z-index=1, div z menu ma z-index=2, a samo menu ma z-index=3...
Tomasz Gregorczyk

Tomasz Gregorczyk Product Manager

Temat: Menu rozwijalne w CSS

A dlaczego Firefox nie grymasi tak jak IE? :)
Krzysztof K.

Krzysztof K. webdeveloper

Temat: Menu rozwijalne w CSS

Tomasz Gregorczyk:
A dlaczego Firefox nie grymasi tak jak IE? :)

Zależy jaki FF i jakie IE. A poza tym to trylogie by można o tym napisać ;)
Tomasz Gregorczyk

Tomasz Gregorczyk Product Manager

Temat: Menu rozwijalne w CSS

FF 3.0 i IE 7.0 w tym przypadkuTomasz Gregorczyk edytował(a) ten post dnia 18.07.08 o godzinie 07:30
Krzysztof K.

Krzysztof K. webdeveloper

Temat: Menu rozwijalne w CSS

Tomasz Gregorczyk:
FF 3.0 i IE 7.0 w tym przypadkuTomasz Gregorczyk edytował(a) ten post dnia 18.07.08 o godzinie 07:30

No to jeśli chodzi o takie porównanie to ja nie miałem większych problemów. Więcej problemów przysparzało zestawienie FF2 i IE6.

A co do strony to najlepiej ją wystaw.
Tomasz Gregorczyk

Tomasz Gregorczyk Product Manager

Temat: Menu rozwijalne w CSS

ok, oto adres: http://www.e-gregor.com/index.php
Krzysztof K.

Krzysztof K. webdeveloper

Temat: Menu rozwijalne w CSS

plik typolight.css
zamiast:
.inside { position:relative; text-align:left; }
powinno być
.inside { text-align:left; }

U mnie na ie7 i ff3 chodzi. Powiem ci jeszcze, ze to menu jakoś dziwnie chodzi. Za szybko się chowa.

Może przejdź do konkurencji - jQuery :)
Tomasz Gregorczyk

Tomasz Gregorczyk Product Manager

Temat: Menu rozwijalne w CSS

Dzieki, zadzialalo. Uciekalo ze wzgledu na margines podmenu od glownego elementu.Tomasz Gregorczyk edytował(a) ten post dnia 18.07.08 o godzinie 10:12

Następna dyskusja:

CSS- Pionowe menu- problem




Wyślij zaproszenie do