Ruimte van het uitklapmenu vergroten

[Whatsupdoc]

Hoi
Sommige van mijn menu-onderwerpen zijn wat tekst betreft te groot
Bestaat de mogelijkheid om een aanpassing in de CSS te maken zodat de
ruimte van het uitklapmenu vergroot kan worden.

Met vriendelijke groet
Ed

[Goeroeboeroe]

Hallo,
In principe kun je vrijwel alles aanpassen. Hoe je dat moet doen, en of het ingewikkeld is, hangt van het menu af.
Gaat het om een uitklapmenu van deze site? Kun je in dat geval even de volledige titel of het nummer dat steeds achteraan staat even geven?
Als het om 'n ander menu gaat, dan graag even 'n link naar de code of de code even hier neerzetten.
Als het om 'n uitklapmenu van deze site gaat: die zijn nog niet aangepast voor mobiel, dat is misschien iets om rekening mee te houden. Dat zit wel in de pijplijn, maar zal nog wel even duren.

[Whatsupdoc]

Hoi,

Bedankt voor je reactie.

Ik vind het een zeer handig "Simpel Dropdownmenu"

Het gaat er om dat ik de tekst: "Verslaafd aan frisdrank" of "Voedingscentrum en Aspartaam" niet kwijt kan in één regel. Het wordt dan over twee regels weergegeven. Er is eigenlijk maar plaats voor zo'n 18 à 19 karakters (letters). Ik zou graag de kolom waarin deze teksten staan zodanig verbreden dat de genoemde teksten gemakkelijk op een regel kunnen.

[Goeroeboeroe]

Eh, er zijn twee 'simpele dropdownmenu's'. Ik geef toe dat het misschien handiger was geweest er eentje 'ingewikkeld' te noemen.
Ik ga er even vanuit dat je het menu met nummer 066 hebt, dat heeft maar één niveau. (Het andere is tot drie niveaus diep genest, maar ik raad dat eigenlijk af. Technisch hartstikke leuk, maar veel te ingewikkeld met de muis te openen.)

Je kunt de bovenste ingang (waar in het voorbeeld 'Knop 1', 'Knop 2', enz. in staat) verbreden door aan een van de <li>'s een id te geven.
Waar in de code
<li>Knop 2
staat, krijg je dan iets als
<li id="breed">Knop 2
En in de css:
li#breed {width: 20em;}
De breedte is nu voor alle knoppen op het eerste niveau (die steeds zichtbaar zijn) 6.5em. Knop nummer twee wordt nu 20 em breed. Je moet dan de totale breedte bij <nav> ook verhogen, anders past het niet meer.

Beter lijkt het mij om niet die bovenste knoppen te verbreden, want dan wordt het heel breed voor smalle vensters. Je zou de bovenste rij hetzelfde kunnen laten, maar één van de 'uitklapkolommen' breder kunnen maken.
Gaat vrijwel hetzelfde. Je geeft weer een id aan de knop waar de brede kolom moet komen, dus net als hierboven:
<li id="breed">Knop 2
In de css komt nu
li#breed li {width: 20em;}
Alleen de <li>'s binnen de tweede knop worden nu breder.

Als het om het menu met meer niveaus gaat, dan moet je vraag zo specifiek mogelijk, want dat zit veel ingewikkelder in elkaar.

[Whatsupdoc]

Hoi,

Weer bedankt voor je heldere uitleg.
Ik was inderdaad aan de slag gegaan met 035. Beetje ingewikkeld dat wel maar goed te doen behalve dan de breedte van de kolommen.
Ik vind dat het wel goed met de muis te openen valt. Heb er een paar niveaus afgehaald en dat ging goed.
Maar 066 is denk ik voor mijn doel toch wel beter geschikt.
Ik ga dus aan de slag om de kolommen in het tweede niveau enigszins te verbreden en dat zal wel lukken.

Misschien nog een hint hoe ik het menu in een bestaande website kan implementeren? Want toen ik dat probeerde ontstond er
tussen de bovenste ingang en de uitklapmenu's een spatie en waren de uitklapmenu's niet meer aanklikbaar.
Wellicht een foutje van mijn kant.

[Goeroeboeroe]

Hoi,
Dat menu opent inderdaad wel leuk met de muis, maar als je last heb van enigszins trillende handen, om maar iets te noemen... Ik heb het ooit voornamelijk gemaakt omdat er veel vraag naar was op forums, en dit menu in ieder geval íéts beter (minder slecht) is dan wat je vaak ziet. Zei hij arrogant...

Die spatie zou in principe niet moeten ontstaan. Mogelijk staat er in je bestaande css iets dat het menu ook beïnvloedt? Als je in Firefox ontwikkelt kun je de extensie Firebug installeren. Daarmee kun je exact zien welke css een bepaald element beïnvloedt. (Elke browser heeft inmiddels dat soort hulpmiddelen, al dan niet ingebouwd, maar ik vind zelf Firebug met stip het prettigste.)
Dat de uitklapmenu's niet meer aanklikbaar zijn, zou kunnen betekenen dat ze ergens onder zitten. Als een of andere div of wat dan ook óver het menu heen zit, werkt klikken niet meer. Als die div of zo onzichtbaar is, zoek je je ongans. Dan zijn hulpmiddelen zoals Firebug onmisbaar, die maken zichtbaar wat onzichtbaar is.
Het kan ook aan de browser liggen. Internet Explorer 9 is de eerste versie die enigszins fatsoenlijk bruikbaar is voor het maken van sites (hoewel ook die versie heel snel veroudert, omdat er alleen beveiligings-updates worden uitgebracht).
IE 8 heeft nogal wat kuren bij hoveren, juist in dit soort menu's. Over IE 7 en eerder past slechts een meelevend stilzwijgen. Als het eerst werkt in Firefox (of Opera, Safari, Google Chrome), dan kun je later aanpassingen gaan aanbrengen gericht op ('n bepaalde versie van) IE.
(Safari schijnt trouwens ook niet meer ontwikkeld te worden voor Windows, dus dat zal ook heel snel onbruikbaar worden voor het maken van sites.)
Overigens zijn dingen als helemaal niet aanklikbaar zijn meestal vrij makkelijk op te lossen, makkelijker dan hele kleine probleempjes. Dus dat geeft hoop.

[Alexander]

Beste Goeroeboeroe,

Allereerst complimenten voor deze site. Ik ben een beginneling met css, en heb wanhopig geprobeerd om het een beetje te leren door allerlei sites te bezoeken, maar het duizelt me. Toen kwam ik deze site tegen, en hoewel de css achter veel van de voorbeelden hier mij nog veel meer duizelig maakt, leer ik er toch heel veel van, gewoon door stapje voor stapje codes te veranderen en te zien wat er dan gebeurt. Maar er zijn grenzen aan wat ik (op mijn leeftijd) kan en wil opbrengen. Ik heb als doel alleen het maken van één enkele website, en ik realiseer me dat honderden zo niet duizenden uren stoppen in het volledig doorgronden van css in mijn geval niet zo slim is.

Wat ik wil maken is een eenvoudig dropdownmenu. Ik heb me gebaseerd op voorbeeld 66. De knoppen op hoofdniveau zijn 7.5em breed geworden, en de knoppen op het niveau daaronder heb ik een breedte van 12em gegeven. Dat gaat overal goed, behalve bij de meest rechter knop. Wat ik wil is dat alleen dat submenu naar links openklapt, zodat de rechterkant van de hoofdknop en van de subknoppen mooi uitgelijnd zijn.

Exact datzelfde doen jullie in voorbeeld 35, maar daarin zit een duizelingwekkende hoeveelheid extra code door de pijltjes en door de verdere subniveau's. Ik heb van alles geprobeerd om stukjes code uit dat voorbeeld te kopiëren naar wat ik aan het doen ben, maar dat leidt alleen tot frustratie en wanhoop.

Concreet: wat moet ik toevoegen om te zorgen dat alleen het rechter submenu naar links opent? Ik vermoed een aparte class aanmaken, maar dan ?

Alvast grote dank voor de hulp.

Met vriendelijke groet,
Alexander

[Goeroeboeroe]

Hallo Alexander,
Dank voor het compliment.
Het kan zijn dat het even duurt voor je weer 'n reactie krijgt, want dit is vrijwel 'n eenpersoonsgebeuren. Maar in principe is dit forum precies hiervoor bedoeld: vragen over de voorbeelden. Dus welkom.

Als ik naar voorbeeld 35 kijk (al weer lang geleden gemaakt, dus het zit niet allemaal meer in m'n hoofd), dan openen de subknoppen onder de meest rechtse knop daar ook naar links. Als dat niet gebeurt, is er iets misgegaan bij het coderen.
In dat menu zit een class 'naar-links'. Die zou ervoor moeten zorgen dat de meest rechtse subknoppen naar links openen. Dus dat gebeurt inderdaad met een class.
Als je menu al ergens online staat, is het het makkelijkste als je 'n link daarnaar hier kunt posten. (Doe dat dan wel met een linkverkorter als goo.gl of maak de link op 'n andere manier onbruikbaar door spaties of zo toe te voegen, anders heb je kans dat bij zoeken op je site dit forum boven jouw site komt te staan in een zoekmachine.)
Als het niet online staat, kun je dan hier de html en css posten?
Zonder code is het heel moeilijk je vraag te beantwoorden.

Overigens zitten er aan dat voorbeeld wel 'n paar nadelen, omdat het inmiddels wel wat is verouderd.
* Het werkt mogelijk niet op touchscreens (tablet, smartphone, iPad, e.d.). Als dat belangrijk is, is dat waarschijnlijk vrij simpel voor elkaar te krijgen. (Niet heel netjes, maar in ieder geval zo dat het werkt. Voor 'heel netjes' moet het hele voorbeeld worden herschreven. Zoals heel veel op deze site.) Ik hoor wel of dat belangrijk is.
* Het menu past zich niet aan smalle schermen zoals smartphones aan. Dat is veel ingewikkelder in orde te krijgen. Dat wil niet zeggen dat het niet werkt, maar wel dat het mogelijk heel lastig te bedienen is. Op tablets zal dit al veel minder een probleem zijn.
* Omdat het voorbeeld al wat ouder is, staat er heel veel 'overbodige´ code in, wat het veel ingewikkelder maakt dan nodig is. Zo wordt bijvoorbeeld Internet Explorer 6 nog ondersteund. En een gruwel als #menu ul li:hover ul li:hover ul ul, #menu ul li a:hover ul li a:hover ul ul is nu veel simpeler te schrijven.

Maar in principe is je vraag waarschijnlijk vrij simpel op te lossen, afgezien van wat gelijk hierboven staat.

[Alexander]

Beste Goeroeboeroe,

Mijn probeersels staan nog niet online, en dat zal nog wel even duren ook. Ik kan de code hier plakken, maar het is eenvoudiger om gewoon te verwijzen naar jouw eigen voorbeeld 66. Dat heb ik namelijk als uitgangspunt gebruikt.

In jouw voorbeeld 66 zijn de subkolommen even smal als de hoofdknoppen, dus er klapt niets naar links of naar rechts uit. Dat gebeurt wel in voorbeeld 35, daar zie ik inderdaad "naar-links" in de code, maar er staat daar ook veel code die ik niet nodig heb (en niet altijd snap). Bovendien heb ik maar 1 subniveau nodig, dus 66 is voor mij beter dan 35.

Concrete vraag: mijn code is die van voorbeeld 66, alleen heb ik de subkolommen iets breder gemaakt dan de hoofdknoppen. Alles in het submenu klapt keurig naar rechts uit, ook de rechterkolom, maar die moet als enige naar links. Wat moet ik toevoegen (of overnemen uit 35) om bij de rechterkolom de uitklap naar links te krijgen?

Wat betreft het werken op touchscreens: jouw voorbeeld 66 werkt in elk geval wel op een iPad en een Samsung smartphone (al is het op die laatste klein). Bediening valt erg mee, omdat het maar 1 subniveau heeft.

Geschikt zijn voor zoveel mogelijk schermen is wel belangrijk, maar er zijn grenzen. Het is al duizelingwekkend genoeg om die css voor elkaar te krijgen op een desktop. Mijn frustratie was gisteren groot toen de lettergrootte (opgegeven in em), die er perfect uitzag in Firefox en Chrome, in Internet Explorer (versie 11) ineens veeeeel groter was. Hoe dat nou weer kan? Zolang ik dit nog niet aankan, maak ik me over smartphones maar niet teveel zorgen.

[Goeroeboeroe]

Ah, ik begrijp het. Ik dacht dat je menu 35 als uitgangspunt had genomen.
Als de breedte van de subknoppen bekend is, zal het niet al te ingewikkeld zijn. Het maakt niet uit welke eenheid je voor die breedte gebruikt, em is goed maar px ook, en in principe elke eenheid.
Als ik het snel even uitprobeer bij 66.
De structuur is (beknopt):

Code: Selecteer alles

<ul id="top">
    <li id="een">Knop 1
        <ul>
            <li>
            (...)
            <li>
        </ul>
    </li>
    (...)
    <li>Knop 6
        <ul>
            <li>Knop 6 - 1</li>    
            (...)
            <li>Knop 6 - 6</li>
        </ul>
    </li>
</ul>

Ik verander <li>Knop 6 in <li id="test">Knop 6
Knop 6 is de meest rechtse knop, daar gaat het om. Als dat bij jou de vijfde is, dan moet het bij de vijfde.

Als ik nu de volgende regel css toevoeg:

Code: Selecteer alles

#test ul li {width: 30em; margin-left: -23.5em;}

kan ik de laatste rij subknoppen aanspreken:
#test ul li: de lijst-ingangen binnen de ul die binnen li#test zitten. Oftewel de meest rechtse subknoppen.
width: 30em; breder dan de 'hoofdknop' waar ze onder zitten.
margin-left: -23.5em; verplaats ze naar links.
Hoeveel je ze moet verplaatsen, moet je even uitproberen. Je kunt ook px nemen in plaats van em, als er maar een breedte is.
Dit zou in alle browsers moeten werken, maar ik heb het niet heel grondig getest.

Als de breedte van de subknoppen onbekend is, dan wordt het ingewikkelder. En dan is toch even de code nodig. Want dan moet je met iets als position gaan werken, en dat kan al snel ongewenste bijwerkingen hebben.

Ik hoop dat dit voldoende is, en anders hoor ik het wel. Succes.

[Alexander]

Mijn dank is immens. Het werkt en ik snap het nu nog ook! Geweldig!

[Goeroeboeroe]

Hartstikke leuk dat je dat nog even laat horen!

[Alexander]

Beste Goeroeboeroe,

Terug naar de vraag bovenaan dit topic, van alweer drie jaar geleden, maar nu zit ik met hetzelfde probleem.

Op basis van menu 035 (dat is een heel ingewikkelde, maar ik heb nu eenmaal meer dan twee niveau's nodig) ben ik bezig een site te maken (die staat nog in de steigers, en is dus niet online). Wat ik zou willen is dat de knop op niveau 1 en de eerste uitklaplijst (niveau 2) even breed zijn, maar dat vervolgens de uitklaplijst op niveau 3 een stuk breder wordt. Op dat niveau moet ik namelijk langere tekst kwijt. Niveau 4 heb ik niet.

Het lukt me wel om niveau 3 breder te maken, maar dan wordt niveau 2 ook zo breed en dat is weer niet te bedoeling (lastig met de muis en zo). Kortom, hoe doet een mens dit?

Een tweede vraag: in een uitklaplijst op niveau 2 komen vier onderwerpen vlak onder elkaar (omdat ze verwante zijn); daarna zou ik in die uitklaplijst een stukje leeg willen (soort lege regel), en vervolgens komt er in diezelfde uitklaplijst een vijfde onderwerp (een onderwerp dat niet met de voorgaande vier verwant is en dus een beetje apart moet staan). Ik heb het geprobeerd met <br> na het vierde onderwerp en dat werkt prima, alleen is dan de achtergrondkleur van die lege regel hetzelfde als de achtergrondkleur van de body, en niet de achtergrondkleur van de rest van de uitklaplijst. Ook hier: hellup!

Alvast grote dank.

Met vriendelijke groet,
Alexander

[Goeroeboeroe]

Hallo Alexander,

Wat zou die code tegenwoordig 'n stuk simpeler kunnen. Staat op het lijstje om te moderniseren, maar er is nogal veel wat moet worden aangepast. Ik moest er weer even inkomen, maar volgens mij zou het volgende moeten werken. Ik heb het niet heel grondig getest, en vermoedelijk zitten er nu wel wat achtergrondkleuren dubbel in, maar daar is mee te leven.

* De lege regel op het tweede niveau. Dat is de makkelijkste.
Zet een </ br> (xhtml) of <br> (html) achter de </a> waar de lege regel onder moet komen:

Code: Selecteer alles

<a href="menu-035-achter-dl.html" title="Knop 1 - 5">Knop 1 - 5</a></br></li>

Dan krijg je inderdaad een 'doorzichtige' open regel.
Voeg aan de css toe:

Code: Selecteer alles

li {background: #e4e4e4;}

Nu is de lege regel ook grijs. (Als je de grijze achtergrond hebt veranderd, moet daar natuurlijk de nieuwe kleur komen.)

* De breedte van het tweede niveau even breed maken als de knoppen bovenaan. Dat kan in de volgende twee regels:

Code: Selecteer alles

#menu ul li:hover ul, #menu ul li a:hover ul {top: 2em; left: -1px; width: 9em; margin-top: 1px;}
#menu ul li:hover ul li a, #menu ul li a:hover ul li a {width: 9em; background: #e4e4e4;}

In beide regels moet de 9em worden veranderd naar dezelfde breedte als de knoppen bovenin.
(De eerste regel is voor de breedte van de lijst, de tweede voor de links)


* Nu is het derde niveau dus inderdaad ook even breed als het tweede.
Om dat te veranderen, moet je nog dieper in dat oerwoud van ul li ul li wahaha graven. (Zonder Internet Explorer 6 kan dat heel wat duidelijker, maar goed, dat is nog niet veranderd, dus wordt het nog even graven).
De breedte van het derde niveau kun je aanpassen in de volgende twee regels:

Code: Selecteer alles

#menu ul li:hover ul li ul, #menu ul li a:hover ul li a ul, #menu ul li:hover ul li ul.naar-links, #menu ul li a:hover ul li a ul.naar-links {position: absolute; left: -2000px; width: 300px;}
#menu ul li:hover ul li:hover ul li a, #menu ul li a:hover ul li a:hover ul li a {background: #e4e4e4; width: 300px;}

De oorspronkelijke regels zijn precies hetzelfde als die hierboven, alleen is aan beide regels width: 300px; toegevoegd. De bovenste regel is weer voor de <ul>'s, de onderste voor de links.
Mogelijk is het wat te veel css, afhankelijk van hoe jij het menu hebt aangepast, maar dat is te overleven.

Nu is de plaatsing van het derde niveau niet goed meer, door de verandering van de breedte van tweede en derde niveau.
Als het derde niveau naar links opengaat, kun je dat aanpassen in de regel

Code: Selecteer alles

#menu ul li:hover ul li:hover ul.naar-links, #menu ul li a:hover ul li a:hover ul.naar-links {left: auto; right: 9em;}

De aanpassing gebeurt bij right: 9em;

Als het derde niveau naar rechts opengaat, kun je dat aanpassen in de regel

Code: Selecteer alles

#menu ul li:hover ul li:hover ul, #menu ul li a:hover ul li a:hover ul {top: 0; left: 9em; margin-top: -1px;}

De aanpassing gebeurt bij left: 9em;

Ik hoop dat je hier wat aan hebt, en anders hoor ik het wel.
Vriendelijke groet

[Alexander]

Dank, dank, dank.

Twee hele dagen gepuzzel en frustratie in één klap weggevaagd: dit werkt perfect. Ik zal niet zeggen dat ik alles in de code snap, maar als ik braaf doe wat je zegt lukt het, en bij iedere stap leer ik bij.

Mocht voorbeeld 035 in de toekomst inderdaad herschreven worden, dan houd ik me aanbevolen voor een seintje. Ben blij dat het nu werkt, dus zelf ga ik er geen code uit slopen waarvan ik vermoed dat die verouderd is.

Alexander