---

Af ren nysgerrighed fik jeg fredag aften til at gå med at skrive en
multi level drop down menu udelukkende med CSS. Altså nul javascript.
Bare for at prøve det.

Menuens største svaghed er de faste bredder på knapperne og menuerne,
og derfor er den ikke optimal til rigtige websider, men jeg betragter
den nu også kun som en interessant CSS-øvelse.

Se den på http://kennethbernholm.dk/cssmenu1.html

Hvis nogen kan forbedre den, så skriv lige om det her i gruppen.

/Kenneth

---

Kenneth Bernholm frembragte:
> Af ren nysgerrighed fik jeg fredag aften til at gå med at skrive en
> multi level drop down menu udelukkende med CSS. Altså nul javascript.
> Bare for at prøve det.
>
> Menuens største svaghed er de faste bredder på knapperne og menuerne,
> og derfor er den ikke optimal til rigtige websider, men jeg betragter
> den nu også kun som en interessant CSS-øvelse.
>
> Se den på http://kennethbernholm.dk/cssmenu1.html
>
> Hvis nogen kan forbedre den, så skriv lige om det her i gruppen.
>
> /Kenneth

Du har ikke noget indhold på siden.
Din CSS bruger visibility egenskaben til at skjule/vise menuer med
visibility : hidden; eller visibility : visible;
Det betyder at indholdet bliver skubbet ned ad siden, også selvom
menuerne ikke er vist.
http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility
Med visibility : hidden; tager elementet stadig plads i layoutet - men
indholdet tegnes ikke.

Prøv med display : block; eller display : none; i stedet.
Så kan der også være indhold. Evt. kan det også kombineres med z-index.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Kenneth Bernholm skrev:
> Af ren nysgerrighed fik jeg fredag aften til at gå med at skrive en
> multi level drop down menu udelukkende med CSS. Altså nul javascript.
> Bare for at prøve det.
>
> Menuens største svaghed er de faste bredder på knapperne og menuerne,
> og derfor er den ikke optimal til rigtige websider, men jeg betragter
> den nu også kun som en interessant CSS-øvelse.
>
> Se den på http://kennethbernholm.dk/cssmenu1.html
>
> Hvis nogen kan forbedre den, så skriv lige om det her i gruppen.

Som Birger skriver, er det problematisk at bruge
visibility-egenskaben. Din menu går også totalt i stykker i
IE6.

Plus point for kreativ brug af forældre-barn selektoren,
:after pseudoelementet og content-egenskaben.

Øvelsen som sådan er set før, for eksempel hos undertegnede:
http://webdesign101.dk/www/cssmenu/dropdownmenu/eks12a.html
Artiklen
http://webdesign101.dk/www/cssmenu/dropdownmenu/
forklarer hvordan man kommer om ved problemerne med
ældre versioner af IE.

Problemet med faste bredder på menuen og undermenuerne
kan løses ved at bruge class names eller id på ul'erne.
Jeg synes det er for omstændeligt at udføre til et eksempel,
så derfor har jeg i nogle år brugt UDM4 navigationssystemet,
se for eksempel
http://webdesign101.dk/showcase/

Det er rart at se et helt originalt bidrag til dette
emne. Respekt.
--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

---

CSS styret DropDown men

Ad: Jørgen Farum

Jeg har fundet stor fornøjelse af at bruge din dropdown menu
Jeg har forsøgt at lave det om, så jeg istedet for at få alle
undermenuer i en linie nedad, kunne få dem på ny linie under øverste
menu, i samme bredde som denne, og så elles i flere linier efter behov.
Men kan ikke få dem til at ændre orientering.

har bl.a. brugt den her:

http://www.thammawat.com/default.php?side=Isan

Fungerer fint i FF og IE7

Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:
> Kenneth Bernholm skrev:
> > Af ren nysgerrighed fik jeg fredag aften til at gå med at skrive en
> > multi level drop down menu udelukkende med CSS. Altså nul
javascript.
> > Bare for at prøve det.
> >
> > Menuens største svaghed er de faste bredder på knapperne og
menuerne,
> > og derfor er den ikke optimal til rigtige websider, men jeg
betragter
> > den nu også kun som en interessant CSS-øvelse.
> >
> > Se den på http://kennethbernholm.dk/cssmenu1.html
> >
> > Hvis nogen kan forbedre den, så skriv lige om det her i gruppen.
>
> Som Birger skriver, er det problematisk at bruge
> visibility-egenskaben. Din menu går også totalt i stykker i
> IE6.
>
> Plus point for kreativ brug af forældre-barn selektoren,
> :after pseudoelementet og content-egenskaben.
>
> Øvelsen som sådan er set før, for eksempel hos undertegnede:
> http://webdesign101.dk/www/cssmenu/dropdownmenu/eks12a.html
> Artiklen
> http://webdesign101.dk/www/cssmenu/dropdownmenu/
> forklarer hvordan man kommer om ved problemerne med
> ældre versioner af IE.
>
> Problemet med faste bredder på menuen og undermenuerne
> kan løses ved at bruge class names eller id på ul'erne.
> Jeg synes det er for omstændeligt at udføre til et eksempel,
> så derfor har jeg i nogle år brugt UDM4 navigationssystemet,
> se for eksempel
> http://webdesign101.dk/showcase/
>
> Det er rart at se et helt originalt bidrag til dette
> emne. Respekt.
> --
>
> Med venlig hilsen
> Jørgen Farum Jensen
> Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
> Webdesign med stylesheets: http://webdesign101.dk/cssbog/
> ..


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

tage jørgensen skrev:
> CSS styret DropDown men
>
> Ad: Jørgen Farum
>
> Jeg har fundet stor fornøjelse af at bruge din dropdown menu
> Jeg har forsøgt at lave det om, så jeg istedet for at få alle
> undermenuer i en linie nedad, kunne få dem på ny linie under øverste
> menu, i samme bredde som denne, og så elles i flere linier efter behov.
> Men kan ikke få dem til at ændre orientering.
>
> har bl.a. brugt den her:
>
> http://www.thammawat.com/default.php?side=Isan

Jeg har set princippet anvendt på andre
websites, men jeg har aldrig taget mig
tid til at fundere over princippet.

Lige ud af ærmet kan det i princippet
klares på samme måde som topmenuen
gøres vandret. Det vil sige a) left-float'e
li'erne i undermenuerne og b) positionere
de indlejrede ul'er i forhold til topmenuens
ul i stedet for topmenuens li'er.

I sagens natur er det nok bedst hvis man
kun har to niveauer.

I praksis er udfordringen måske nok lidt
større, men hvis du har lidt tålmodighed
- eller en anden er hurtigere end mig - er
jeg villig til at give det et skud.

Det kan jo være jeg kan hugge nogle ideer
fra Kenneth

--
Med venlig hilsen
Jørgen Farum Jensen
http://webdesign101.dk
..

---

Den 21-02-2010 13:27, Kenneth Bernholm skrev:
> Af ren nysgerrighed fik jeg fredag aften til at gå med at skrive en
> multi level drop down menu udelukkende med CSS. Altså nul javascript.
> Bare for at prøve det.
>
> Menuens største svaghed er de faste bredder på knapperne og menuerne,

Jeg har det samme problem med min menu. Og jeg kan ikke helt huske hvorfor.

> og derfor er den ikke optimal til rigtige websider, men jeg betragter
> den nu også kun som en interessant CSS-øvelse.
>
> Se den på http://kennethbernholm.dk/cssmenu1.html
>
> Hvis nogen kan forbedre den, så skriv lige om det her i gruppen.

Du vil muligvis kunne få bedre resultat med en Doc type.

Desuden, så er det ikke konsistent i IE7+IE8, sikkert fordi de ikke
forstår only-child. Du kan lege med before i stedet og så sætte det på
første UL efter en li. Disse versioner forstår visse andre ting, så vidt
jeg husker bl.a. first-child.

IE6 forstår ikke content, ejheller after, before, det kan være
nødvendigt (hvis man vil supportere arkæologisk teknik), at man står et
step yderligere tilbage. F.eks. at man bruger list-style-image, som kan
placeres nogenliunde hvor man vil. IE6 forstår så vidt jeg ved også
first-child, derfor en list-style-image på first-child af en ul som
ligger i en li. Men ærligt, jeg ville ikke tage hensyn til så gammelt
bras... Hvis folk har en IE6, så har de sikkert allerede også en FF
eller Opera.

Conditional comments, som man kunne vlære fristet til, mener jeg er en
fejlvurdering iøvrigt i proof-of-concept eksempler, det fordyrer koden,
og det gør det vanskeligere at udbygge.


MVH
Rune Jensen

---

Den 21-02-2010 13:27, Kenneth Bernholm skrev:

> Hvis nogen kan forbedre den, så skriv lige om det her i gruppen.

http://webdesigngruppen.dk/test/CSS_drop_down_poc.htm

Der er tilføjet "white-space" for oven og for neden på submenuer. Det er
en "hacked" løsning, hvilket vil sige, det kan gøres bedre.

Der er (forsøgt) en løsning på only-child-problemet, som så gør, at
undermenuer først vises med en pil, hvis linket hovers. Det kan nok
løses. Til gengæld er det konsistent.

Virker ad H til i IE7, men det er også kun ved første forsøg.

IE6 vil jeg ikke udtale mig om, den tager jeg ikke hensyn til mere.


MVH
Rune Jensen