Avatar billede NielsErikP Mester
05. marts 2013 - 14:24 Der er 59 kommentarer og
1 løsning

Hvorledes laver man en "tap"...

Hej...

Et spørgsmål om, hvorledes man laver en ""tap" på sine "listItems" i en undermenu... pegende op på den overliggende menupunkt??

Håber der er en med lidt viden!

På forhånd tak.
Avatar billede olebole Juniormester
05. marts 2013 - 14:36 #1
<ole>

Har du et billede af tanken?  =)

/mvh
</bole>
Avatar billede NielsErikP Mester
05. marts 2013 - 15:02 #2
Hej..

Tja.. jeg har da lige brygget et ;-) men lad nu være med at kalde mig teknisk tegner "Smiler".

billede af ""tap"
Avatar billede NielsErikP Mester
05. marts 2013 - 15:32 #3
Hej..

Som side er ideen som denne : menu 
Avatar billede NielsErikP Mester
05. marts 2013 - 15:33 #4
Ooops..

  menu
Avatar billede olebole Juniormester
05. marts 2013 - 15:39 #5
Du kan prøve noget i denne stil:

<style type="text/css">
body {
    margin: 0;
    padding: 0;
    font: 12px "Segoe UI", Tahoma, sans-serif;
}
ul {
    width: 100px;
    margin: 0;
    padding: 0;
    list-style: none;
    cursor: default;
}
li {
    position: relative;
    background: yellow;
}
li ul {
    position: absolute;
    left: 100%;
    top: 0;
    display: none;
    background: url(arrow.png)
}
li ul li {
    background: red;
}
li:hover {
    background: #f0f0f0 url(arrow.png) right top no-repeat;
}
li:hover ul {
    display: block;
}
</style>

<ul>
    <li>Emne #1.0</li>
    <li>Emne #2.0
        <ul>
            <li>Emne #2.1</li>
            <li>Emne #2.2</li>
            <li>Emne #2.3</li>
        </ul></li>
    <li>Emne #3.0</li>
    <li>Emne #4.0</li>
</ul>

Det giver en lidt anden pil - den ude i højre side, du kender fra alm. Win-menuer. Prøv det  =)
Avatar billede NielsErikP Mester
06. marts 2013 - 22:59 #6
Hej ole...

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.
Avatar billede olebole Juniormester
06. marts 2013 - 23:10 #7
Ja, men så slipper din hover jo, når du kommer ud over kanten. Lav dit design til teknologien  *o)
Avatar billede olebole Juniormester
06. marts 2013 - 23:11 #8
- men du kan sikkert dribble rundt med pudsige workarounds, hvis du gider ... I don't  =)
Avatar billede NielsErikP Mester
06. marts 2013 - 23:45 #9
Hej..

ja.. det er lige det den gør.. jeg havde prøvet at lave et lille billede og så sætte det med "position:absolute; left:? top: ?"
her

Og så selv ideen her

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"
Avatar billede NielsErikP Mester
06. marts 2013 - 23:47 #10
Hej..

Men tak for forsøget.. bare tryk "svar" hvis du har en anden holdning :-)
Avatar billede olebole Juniormester
06. marts 2013 - 23:48 #11
Så pyt!  :D

<style type="text/css">
body {
    margin: 0;
    padding: 0;
    font: 12px "Segoe UI", Tahoma, sans-serif;
}
ul {
    width: 100px;
    margin: 0;
    padding: 0;
    list-style: none;
    cursor: default;
}
li {
    position: relative;
    background: yellow;
}
li ul {
    position: absolute;
    left: 100%;
    top: 0;
    padding-left: 10px;
    display: none;
    background: url(arrow.png) no-repeat;
}
li ul li {
    background: red;
}
li:hover {
    background: #f0f0f0;
}
li:hover ul {
    display: block;
}
</style>

<ul>
    <li>Emne #1.0</li>
    <li>Emne #2.0
        <ul>
            <li class="hover-helper"></li>
            <li>Emne #2.1</li>
            <li>Emne #2.2</li>
            <li>Emne #2.3</li>
        </ul></li>
    <li>Emne #3.0</li>
    <li>Emne #4.0</li>
</ul>
Avatar billede olebole Juniormester
07. marts 2013 - 00:00 #12
- og hvis du ønsker border omkring submenuerne, kan du skrive:

<style type="text/css">
body {
    margin: 0;
    padding: 0;
    font: 12px "Segoe UI", Tahoma, sans-serif;
}
ul {
    width: 100px;
    margin: 0;
    padding: 0;
    list-style: none;
    cursor: default;
}
li {
    position: relative;
    background: yellow;
}
.sub-container {
    position: absolute;
    left: 100%;
    top: 0;
    padding-left: 10px;
    display: none;
    background: url(arrow.png) no-repeat;
}
.sub-container ul {
    border: 1px solid blue;
}
.sub-container li {
    background: red;
}
li:hover {
    background: #f0f0f0;
}
li:hover .sub-container {
    display: block;
}
.sub-container li:hover {
    background: green;
}
</style>

<ul>
    <li>Emne #1.0</li>
    <li>Emne #2.0
        <div class="sub-container">
            <ul>
                <li>Emne #2.1</li>
                <li>Emne #2.2</li>
                <li>Emne #2.3</li>
            </ul>
        </div></li>
    <li>Emne #3.0</li>
    <li>Emne #4.0</li>
</ul>
Avatar billede olebole Juniormester
07. marts 2013 - 00:02 #13
- men du havde sgu ret! Det hjalp med lidt af hampen  *-\
Avatar billede NielsErikP Mester
07. marts 2013 - 00:06 #14
Hej...

Hmmmm.... Gud ved hvornår jeg bliver seriøs... nej pyt tror squ bare jeg holder mig fra at svare, hvis jeg ikke kan tage spørger seriøs :-)

Fint nok...


Andre med et bud på problemet.
Avatar billede olebole Juniormester
07. marts 2013 - 00:14 #15
Det forstår jeg så ikke lige. Hvad mener du?
Avatar billede NielsErikP Mester
07. marts 2013 - 00:22 #16
Hej...

Nå, jeg mener om der er andre med et bud på problemet...
Avatar billede olebole Juniormester
07. marts 2013 - 00:46 #17
Har du teste koden i #12? Den kommer da vist temmelig tæt på dine ønsker  =)
Avatar billede NielsErikP Mester
07. marts 2013 - 21:11 #18
Hej..

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.
Avatar billede olebole Juniormester
07. marts 2013 - 21:28 #19
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
Avatar billede olebole Juniormester
07. marts 2013 - 22:13 #20
Tjek denne fiddle med et billede fra ImageShack, men ellers identisk med #12
Avatar billede NielsErikP Mester
07. marts 2013 - 22:29 #21
Hej..

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.
Avatar billede NielsErikP Mester
07. marts 2013 - 22:32 #22
Hej...

Nemli' .. dit link i #20. Er lige nøjagtig det jeg søger, men hvorfor fanden det så ikke virker... ???
Avatar billede olebole Juniormester
07. marts 2013 - 22:37 #23
Min fiddle er kopieret fra #12  =)
Avatar billede olebole Juniormester
07. marts 2013 - 22:41 #24
PS: Og hvad point angår, så sætter du det bare på min 'tap' - svarer selv og accepterer  *D

Men lad os nu lige få skidtet til at funke for dig  =)
Avatar billede NielsErikP Mester
07. marts 2013 - 22:42 #25
Hej..

Ja.. det kan jeg se.. blot med en lidt anden billede url.
FISK... Og har du lige en ide om hvorfor det ikke funger hos mig??
Avatar billede NielsErikP Mester
07. marts 2013 - 22:47 #26
Hej..

Ø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.
Avatar billede olebole Juniormester
07. marts 2013 - 23:05 #27
Hehe ... ja, browseren skal jo gerne kunne se din CSS  *D
Avatar billede NielsErikP Mester
07. marts 2013 - 23:34 #28
Hej..

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.

Endnu engang tak.

Jeg lukker.
Avatar billede olebole Juniormester
07. marts 2013 - 23:46 #29
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:

.sub-container {
    position: absolute;
    left: 100%;
    top: 0;
    padding-left: 10px;
    display: none;
    background: green url(http://img585.imageshack.us/img585/1261/arrowisv.png) no-repeat;
}
Avatar billede olebole Juniormester
07. marts 2013 - 23:48 #30
PS: Den eneste begrundelse for DIV'et er, at du så kan sætte border på sub-UL'en.

Er det ikke nødvendigt, kan du bruge koden i #11 i stedet
Avatar billede NielsErikP Mester
08. marts 2013 - 00:28 #31
Hej...

Ja.. ja.. jeg prøver lige at lege med det ;-)
Avatar billede olebole Juniormester
08. marts 2013 - 00:50 #32
*o)
Avatar billede NielsErikP Mester
09. marts 2013 - 00:24 #33
Hej...

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.
Avatar billede olebole Juniormester
09. marts 2013 - 00:54 #34
Man beslutter sig for, at livet er for kort til petitesser  *D

Er man for ung til det, kan man alternativt vælge at skrive:

.sub-container {
    position: absolute;
    height: 1.2em;
    left: 100%;
    top: 0;
    padding-left: 10px;
    display: none;
    background: url(http://img585.imageshack.us/img585/1261/arrowisv.png) no-repeat;
}
Avatar billede olebole Juniormester
09. marts 2013 - 00:57 #35
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  =)
Avatar billede olebole Juniormester
09. marts 2013 - 01:04 #36
Du kan som før prøve at skrive:

background: red url(http://img585.imageshack.us/ (...)) no-repeat;

- så du kan se DIV'et og ikke bare dets baggrundsbillede.

Du kan fiddle med positionen af pile ved at lave mere eller mindre 'luft' i toppen og venstre side af billedet. Du kan også gøre det med:

background: red url(http://img585.imageshack.us/ (...)) 5px 3px no-repeat;

- som gerne skulle smide billedet 5px mod højre og 3px ned
Avatar billede NielsErikP Mester
09. marts 2013 - 01:07 #37
Hej..

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.

Nå.. tak ole...
Avatar billede olebole Juniormester
09. marts 2013 - 01:27 #38
em er nu i høj grad standard  =)

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.

- og selvtak  =)
Avatar billede NielsErikP Mester
09. marts 2013 - 22:36 #39
Hej...

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 ....
Avatar billede NielsErikP Mester
09. marts 2013 - 22:38 #40
Hej...

Og selvfølgelig en kode :



#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;">
   
    <div id="header">
    </div>
    <div id="site">
        <div id="size1">   
                <ul>
                    <li><a href="#">Side 1 </a>
                    <div class="pil">
                        <ul>
                            <li><a href="#">Side 1_1 </a> </li>
                            <li><a href="#">Side 1_2 </a> </li>
                            <li><a href="#">Side 1_3 </a> </li>
                        </ul>
                    </div>
                    </li>
                    <li><a href="#">Side 2 </a> </li>
                    <li><a href="#">Side 3 </a> </li>
                    <li><a href="#">Side 4 </a> </li>
                    <li><a href="#">Side 5 </a> </li>
                </ul>
        </div>
        <div id="size2">
        </div>
        <div id="size3">
        </div>
    </div>

Avatar billede olebole Juniormester
09. marts 2013 - 23:27 #41
Prøv:

#size1 ul {
    position: relative;
}
#size1 ul li a {
    text-decoration: none;
    color: #DEB887;
}
#size1 ul li {
    position: relative;
    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 {
    bottom: 0;
    height: 30px;
    position: absolute;
    left: 100%;
    background: red url(billeder/pil1.png) no-repeat;
    border: 1px solid red;
}
.pil ul {
    margin-left: 31px;
    background: yellow;
}
Avatar billede olebole Juniormester
09. marts 2013 - 23:29 #42
Udover de røde markeringer har jeg fjernet top- og left-margin fra DIV'et
Avatar billede NielsErikP Mester
10. marts 2013 - 00:03 #43
Hej..

Det giver samme resultat. Den "gule" UL skiller stadig "List-Item"'en fra pilen.
Avatar billede olebole Juniormester
10. marts 2013 - 00:12 #44
tja  =)
Avatar billede Holst123 Nybegynder
10. marts 2013 - 23:21 #45
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
Avatar billede NielsErikP Mester
10. marts 2013 - 23:50 #46
Hej...

#45:

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"

Men tak for forslaget :-)
Avatar billede olebole Juniormester
10. marts 2013 - 23:51 #47
@Holst123: Den løser ikke rigtig spørgers problem  =)
Avatar billede NielsErikP Mester
11. marts 2013 - 00:05 #48
Hej..

@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
Avatar billede olebole Juniormester
11. marts 2013 - 00:33 #49
Hehe ... jeg mindes en 404-side, jeg engang så:

This is not an error! This is a feature.
Please report annoying features to webmaster


Se det som en feature  *D
Avatar billede NielsErikP Mester
11. marts 2013 - 21:40 #50
Hej...

Ja.. Det ved jeg godt man kan se sådan på det...
Og web kodning må måske ikke være perfekt??

"Annoying feature"  ;-)
Avatar billede olebole Juniormester
12. marts 2013 - 14:43 #51
Nope ... a pleasing feature!  *o)

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  =)
Avatar billede NielsErikP Mester
12. marts 2013 - 21:25 #52
Hej..

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??
Avatar billede olebole Juniormester
13. marts 2013 - 18:10 #53
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?  =)
Avatar billede NielsErikP Mester
13. marts 2013 - 21:45 #54
Hej..

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.
Avatar billede olebole Juniormester
13. marts 2013 - 22:07 #55
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  =)
Avatar billede NielsErikP Mester
13. marts 2013 - 22:25 #56
Hej..

Det var satans.. Du har jo ret.
Nå..skal nok smide løsningen her.. Skulle jeg finde en.

Tak for supporten, olebole :-)
Avatar billede Magn0053 Novice
22. marts 2013 - 10:04 #57
Du har ret perfekte sider til at finde ting som dette ;) :D
Avatar billede NielsErikP Mester
22. marts 2013 - 23:12 #58
Hej...

#57: ...???
Avatar billede Magn0053 Novice
23. marts 2013 - 07:41 #59
undskyld jeg troede den "hoppede" ind længere op det er ikke ret længe siden jeg begyndte at skrive på de ting jeg læser på eksperten.dk
Avatar billede Magn0053 Novice
23. marts 2013 - 07:42 #60
det var til #46 ;)
Avatar billede Ny bruger Nybegynder

Din løsning...

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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester