submenu variabele breedte

[Plotinus]

L.S.

Ik heb in mijn website-ontwerp een menubalk, waarbij ieder item daarop een submenu geeft, wat openklapt naar beneden. Dat submenu heeft om esthetische redenen een vaste breedte, wat goed gaat op mijn computerscherm. Ik merk echter dat op andere computers die breedte soms te klein is en de tekst vervolgens doorloopt in het item eronder. Mijn vraag is nu: kan ik het submenu een variabele breedte geven, zodat op computers met een lagere resolutie de respectievelijke items toch goed worden getoond, maar waarbij ik wel een minimum breedte definieer?

gegroet,
mrt

 

[Koekje000]

Ik denk niet dat het zozeer gaat om de resolutie van de verschillende beeldschermen, maar om de browser. Ik neem aan dat de sub-menuutjes in de vorm van een animatie uitklappen, door middel van CSS?
Je moet in je CSS voor elke soort browser aangeven hoe deze transformatie (animatie) plaats vindt:

Voor IE: -ms-[property]-[waarden];
Voor Firefox: -moz-[property]-[waarden];
Voor Chrome: -webkit-[property]-[waarden];

Nou weet ik niet zeker hoe je verder zou kunnen komen. Op internet zijn er veel voorbeelden te vinden van CSS menu's met submenu's .

 

[BobDeWebbouwer]

Heb je al {min-width: ..px;} geprobeerd op de submenu items (dus op de li)?

Een alternatief zou zijn om een min-height op te geven in plaats van een vaste height. Als de submenu items dan niet op 1 regel passen lopen ze niet door in het item eronder, maar wordt het item eronder netjes een stukje naar beneden geplaatst.

 

[Plotinus]

Het is gelukt: min-width: 160px, maar daarvoor nog width: auto, anders wordt het submenu 'oneindig' breed. Op een scherm met hoge resolutie ziet het er strak uit; op een iets minder scherm wordt het menu zo breed als nodig is.

Dank BobDewebbouwer!

Dank Koekje000 voor het meedenken. Ik zou er eigenlijk inderdaad ook nog een kleine animatie in willen steken: bij het over de menubalk gaan zou ik het submenu graag vertraagd in willen laten dalen en liefst zo dat de items over elkaar heen glijden - dit staat helaas niet in mijn boek. Als je een idee hebt...

gegroet,
mrt

 

[BobDeWebbouwer]

Graag gedaan, fijn dat het gelukt is!

 

[kenikavanbis]

ter inspiratie moet je eens kijken naar
http://www.noupe.com/css/100-great-css-menu-tutorials.html

 

[Plotinus]

hele goeie tip; dank je.

gegroet,
mrt