Det er ikke det jeg vil.. i dit eksemple fra #5.. vil jeg have din "røde" undermenu rykket højre, sådan der bliver et mellemrum mellem undermenu og menu.. der imellem skal "tappen/pilen" ligge, når man ":hover" på eksempelvis "Emne#2.0".
Jeg kan ikke søge noget på google, da jeg ikke ved, hvad sådan en slags "Tap/pil" hedder derude... men jeg har set det praktiseret ude på nettet.
Men netop som du siger, slipper hover ved mellemgangen mellem over og under menu.. og så er løsningen med position: absolute; jo heller ikke dynamisk. Skulle jo gerne være sådan at "billedet" med ved "hover" på de andre menu items.
#8: Årrrh.. come on ;-) Selv du skal ud i hampen engang imellem "smiler"
Ja.. har testet koden i #12. Ikke det jeg søger!! Så må nok ud i noget "WorkAround". På en eller anden måde, mangler bare ideen om hvad sådan en "Tap/pil" kaldes derude.
Vi kommer det nok ikke nærmere her , ole.. Vil du have noget for din tid, så smid venligst et svar.
Jamen, kan du så ikke fortælle mig, hvad forskellen er på #12 (hvor jeg jo netop har lavet den workaround, du har bad om) og så på dette billedeksempel?
Såvidt jeg kan se, gør de nøjagtig det samme. Hvis du er uenig, må du give en forklaring på, hvor forskellen ligger
Jow.. jeg skal prøve.. Koden i #12.. giver mig din "Gule" menu.. og så din "røde" undermenu rykket ud fra menu'en ligesom på mit billede. Men der eksisterer ikke skyggen af nogen "Arrow.png" nogen steder. Har så prøvet at smide url'en på min egen "pil" ind der. virker heller ikke. Ved ikke om der er noget jeg simpelthen ikke fatter.
Øh.. Dovenskaben.. Fik mig til at udkommetere "Style" i head'en med "<!-- -->".. fjernede jeg lige, så nu virker overgangen uden at slippe hover. Så mangler bare en eksisterende url til billedet. Så jeg tror jeg siger tak for hjælpen.
Ja.. det er nok en forudsætning for noget som helst. Jeg sidder lige og prøver at se, hvad det er du gør i #12... du og jeg bygger menu'er på lidt forskellige måder, så skal lige have oversat din kode til min.
Tricket er, at submenuens UL ligger i et DIV, som lægger sig helt op ad hoved-UL'en. DIV'et har fået lidt venstre-padding for st skubbe submenuen mod højre. På den måde slipper vores hover ikke (DIV'et ligger jo i LI-elementet, der får hover).
Giv evt. DIV'et lidt baggrundsfarve, så du kan se, hvad jeg mener:
Og hvorledes.. skaber man så det kun er "pilen" der holder forbindelsen til "Sub Menu" og ikke hele vejen ned langs "Sub Menu'en".. altså det stykke som div'en afdækker. Prøvede at smide et ekstra <li> element på... funger ikke rigtigt.
UL'en er jo positioneret absolute. Det betyder, den i sig selv ikke fylder noget. Derfor kan du bare sætte det omkransende DIV's højde til 1.2em, hvad browserene er rimeligt enige om, er line-height i et element =)
Ja.. nu bruger jeg sjældent em.. holder mig til standardden ;-) Det jeg prøvede var at smide et listitem på øverst og så trække med noget margin... fungede ikke lige på første forsøg... men roooolig.. Det skal det komme til :-) Kluderede lidt med positionerne Relative og absolute.. Også derfor det er djævlens værk at spolerer det naturlige flow.
Positionering er 'djævelens værk', når man ikke er helt sikker på begrundelserne for brugen - og hvordan det bruges mest fornuftigt. Jeg tror ikke, du finder simplere løsning, end den jeg viser ovenfor.
Jeg har givet "Sub-Menu'ens" UL en gul farve.. Hvad er det lige jeg laver forkert siden jeg ikke kan trække de "List-Items" hen til bagkant af pilen.. Menu ....
#size1 ul { position: relative; } #size1 ul li a { text-decoration: none; color: #DEB887; } #size1 ul li { list-style-type: none; margin: 8px 8px 8px 0; width: 115px; height: auto; text-align: center; line-height: 40px; display: block; background: #524F62; } #size1 ul li ul li {
width: 130px; height: auto; display: block; } #size1 ul li ul { display: none; } #size1 ul li:hover ul { display: block; } #size1 ul li ul li { margin: 0; } #size1 ul li:hover { background: #FFFACD; } li:hover .pil { margin-top: -25px; margin-left: 30px; height: 30px; position: absolute; left: 125px; background: red url(billeder/pil1.png) no-repeat; border: 1px solid red; } .pil ul { margin-left: 31px; background: yellow;
}
</style> </head> <body style="background: #DEFF56;">
Hej NielsGjern. Du kunne bruge denne her side, www.cssmenumaker.com til at oprette din dropdown menu. Jeg ved at der er flere forskellig designs med den pil du snakker om, og det er nemt og hurtigt.Håber du kunne bruge svaret. Mvh. Mads
Ja.. Det ser fint ud..Men jeg skal lære og vil selv lave "lortet".. Selvfølgelig er hjælp til en "NewBie" velkommen... Godt man har et site som "Eksperten.dk/udvikleren.dk"
@olebole: Fandt en løsning.. droppede Div'en og smed billedet på Ul'en istedet. Positionerede den absolute med med netop top: 0 og left: 100% som du sagde.. og gav den en left-padding. Eneste problem er at ":hover" stadig gælder på baggrunden mellem hoved menu og Submenu'ens list-items... hmmm
Faktisk er jeg ikke enig. Jeg finder det personligt lettere at betjene menuen, hvis hover ikke slipper mellem hoved- og submenu. For mig er det en pleasing feature =)
Jow.. jow. Det kan du sige... Men hvis den ikke slipper der i "GråZonen" selv når man passere Hovedmenu Punkt 2 og Punkt 3. Men kører du på hoved menu'en slipper den når man skifter til hoved menu Punkt 2. Er det ikke lidt underligt??
Er det ikke mere underligt, at der fiser en pil rundt på skærmen i takt med de bevægelser du laver, når du flytter en klump plastik rundt på bordet? =)
Det syntes jeg da ikke... Det er vel bare et spørgsmål om et koordinat system, hvor du flytter X og Y værdier ved hjælp af et optisk øje eller en trackball... Eller??
Men er du træt af det skal du bare investere i det nye windows 8 og købe en touch skærm... Så tror jeg du slipper for musen.. Og skal så heller ikke udsættes for engang med tiden at skulle i behandling for museskader.. Meeen så kommer skaderne squ sikkert bare i skuldren, når du gentagen gange har rakt ud efter toucj´h skærmen.
Jeg er ikke træt af noget, men det kræver faktisk ret gode abstraktionsevner at bruge/forstå en mus. Det er efter sigende en af mange grunde til, at det er forholdsvis sjældent at se sydbengalske sumpbævere, fordybet i web-surfing =)
Pointen var bare, at webbrugere som regel er ganske kompetente - og at du måske bekymrer dig for meget om for små ting =)
Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.