Avatar billede htx98i17 Professor
12. maj 2017 - 16:02 Der er 3 kommentarer og
1 løsning

Hvorfor kollapser menu

Nedenstående menu kollapser når jeg ændrer class'en "nav label ul" style position fra relative til absolute.

1. Hvorfor gør den det? (jeg har brug for at definere den som absolute da jeg skal have en transition height på den)

[code]

<!doctype html>
<html lang="da-DK" >
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
       
        <title></title>
       
        <style>
            html {
    font-family:         "Lucida Sans", sans-serif;
    font-size:        12pt;
}

@font-face {
    font-family: serpentine;
    src: url(font/serpentine.ttf);
}

* {
    box-sizing:         border-box;
}

a.menu:link {
    color:            white;
}

a.menu:active {
    color:            white;
}

a.menu:visited {
    color:            white;
}

a.menu:hover {
    color:            white;
}

body {
    margin:            0px;
    background:        white;
}

input {
    display:            none;
}

[class*="col-"] {
    float:             left;
    padding:             10px;
 
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

/* For mobile phones */

[class*="col-"] {
    width:            100%;
}

header {
    position:            relative;
    font-size:        25pt;
    text-align:        center;
    color:            white;
    background-color:    #476699;
    border-bottom:        5px solid #97b0d8;
}

header img {
    width:            100%;
}

header div {
    font-size:        10pt;
}

.menuknap {
    position:            absolute;
    width:            35px;
    height:            35px;
   
    bottom:            10px;
    right:            10px;
   
    padding:            3px;
   
    cursor:            pointer;
}

.menuknap div {
    float:            left;
    height:            4px;
    width:            100%;
    margin:            2px 0px; 2px;
    background-color:    #97b0d8;
    border-radius:        2px;
   
}

nav {
    position:            relative;
    display:            block;
   
    background-color:     #657287;

    transition:        width 0.5s;       
}

#onoff:checked + nav {
    width:            0px;
    clear:            both;
   
}

nav label {
    display:            block;
    border:            0px solid black;
}


nav label ul {
    position:            relative; /*hvorfor kollapser hele menuen når position ændres til absolute?*/
    height:            30px;
    list-style-type:    none;
    padding:            0px;
    overflow:            hidden;
   
}

nav input:checked + label ul {
    height:            100%;
}

nav input:checked + label ul li:first-child  {
    background:            #476699;
    border-bottom:            1px solid #97b0d8;
    border-top:            1px solid #97b0d8;
   
}

nav label ul li:first-child {
    padding-left:        20px;
    font-size:        14pt;
    transition:        background-color 0.5s, border-top 0.5s, border-bottom 0.5s;
    padding-top:        5px;
    padding-bottom:    5px;
    cursor:            pointer;
   
}

nav label ul li {
    margin-bottom:        0px;
    color:            white;
}

nav label ul li a {
    display:            block;
    padding-top:        10px;
    padding-bottom:    10px;
}


.k1 {
    border-top:        1px solid #657287;
    border-bottom:        1px solid #657287;
}


.k2-1 {
    padding-left:        40px;
}

.k2-2 {
   
    padding-left:        40px;
}

.k3 {
    padding-left:        60px;
    font-size:        10pt;

}


/* for tablets */

@media only screen and (min-width: 600px) {
   
    .col-1m {width: 8.33%;}
    .col-2m {width: 16.66%;}
    .col-3m {width: 25%;}
    .col-4m {width: 33.33%;}
    .col-5m {width: 41.66%;}
    .col-6m {width: 50%;}
    .col-7m {width: 58.33%;}
    .col-8m {width: 66.66%;}
    .col-9m {width: 75%;}
    .col-10m {width: 83.33%;}
    .col-11m {width: 91.66%;}
    .col-12m {width: 100%;}
   
   
    header img {
        max-width:        350px;
    }
   
    nav {
        display:            block;
       
    }
   
    header .menuknap {
        display:            none;
    }
   
   
}

/*for PC */


@media only screen and (min-width: 780px) {
   
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
   
   
}

        </style>
    </head>
   
<body>

<div class="row" >
    <header class="col-12" >
        <label class="menuknap" for="onoff" >
            <div></div><div></div><div></div><div></div>
        </label>
    </header>
</div>

<div class="row">
   
    <input type="checkbox" id="onoff" >
    <nav class="col-4m col-3" id="navmenu" style="padding: 0px;" >
       
        <input type="checkbox" id="kid40" >
           
            <label for="kid40" >
               
                    <ul >
                        <li class="k1" >Hovedkategori</li>
                        <li class="k2-1" ><a href="#" class="menu" >Underkategori 1</a></li>
                        <li class="k2-1" ><a href="#" class="menu" >Underkategori 2</a></li>
                        <li class="k2-1" ><a href="#" class="menu" >Underkategori 3</a></li>
                    </ul>
               
            </label>
       
        <input type="checkbox" id="kid41" >
           
            <label for="kid41" >
               
                    <ul >
                        <li class="k1" >Hovedkategori 2</li>
                        <li class="k2-1" ><a href="#" class="menu" >Underkategori 1</a></li>
                        <li class="k2-1" ><a href="#" class="menu" >Underkategori 2</a></li>
                        <li class="k2-1" ><a href="#" class="menu" >Underkategori 3</a></li>
                    </ul>
               
            </label>
                   
    </nav>
   
    <div class="col-m8 col-9" >Forside</div>

</div>


</body>
</html>

[/code]
Avatar billede htx98i17 Professor
12. maj 2017 - 16:12 #1


<!doctype html>
<html lang="da-DK" >
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
       
        <title></title>
       
        <style>
            html {
    font-family:        "Lucida Sans", sans-serif;
    font-size:        12pt;
}

@font-face {
    font-family: serpentine;
    src: url(font/serpentine.ttf);
}

* {
    box-sizing:        border-box;
}

a.menu:link {
    color:            white;
}

a.menu:active {
    color:            white;
}

a.menu:visited {
    color:            white;
}

a.menu:hover {
    color:            white;
}

body {
    margin:            0px;
    background:        white;
}

input {
    display:            none;
}

[class*="col-"] {
    float:            left;
    padding:            10px;
 
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

/* For mobile phones */

[class*="col-"] {
    width:            100%;
}

header {
    position:            relative;
    font-size:        25pt;
    text-align:        center;
    color:            white;
    background-color:    #476699;
    border-bottom:        5px solid #97b0d8;
}

header img {
    width:            100%;
}

header div {
    font-size:        10pt;
}

.menuknap {
    position:            absolute;
    width:            35px;
    height:            35px;
   
    bottom:            10px;
    right:            10px;
   
    padding:            3px;
   
    cursor:            pointer;
}

.menuknap div {
    float:            left;
    height:            4px;
    width:            100%;
    margin:            2px 0px; 2px;
    background-color:    #97b0d8;
    border-radius:        2px;
   
}

nav {
    position:            relative;
    display:            block;
   
    background-color:    #657287;

    transition:        width 0.5s;       
}

#onoff:checked + nav {
    width:            0px;
    clear:            both;
   
}

nav label {
    display:            block;
    border:            0px solid black;
}


nav label ul {
    position:            relative; /*hvorfor kollapser hele menuen når position ændres til absolute?*/
    height:            30px;
    list-style-type:    none;
    padding:            0px;
    overflow:            hidden;
   
}

nav input:checked + label ul {
    height:            100%;
}

nav input:checked + label ul li:first-child  {
    background:            #476699;
    border-bottom:            1px solid #97b0d8;
    border-top:            1px solid #97b0d8;
   
}

nav label ul li:first-child {
    padding-left:        20px;
    font-size:        14pt;
    transition:        background-color 0.5s, border-top 0.5s, border-bottom 0.5s;
    padding-top:        5px;
    padding-bottom:    5px;
    cursor:            pointer;
   
}

nav label ul li {
    margin-bottom:        0px;
    color:            white;
}

nav label ul li a {
    display:            block;
    padding-top:        10px;
    padding-bottom:    10px;
}


.k1 {
    border-top:        1px solid #657287;
    border-bottom:        1px solid #657287;
}


.k2-1 {
    padding-left:        40px;
}

.k2-2 {
   
    padding-left:        40px;
}

.k3 {
    padding-left:        60px;
    font-size:        10pt;

}


/* for tablets */

@media only screen and (min-width: 600px) {
   
    .col-1m {width: 8.33%;}
    .col-2m {width: 16.66%;}
    .col-3m {width: 25%;}
    .col-4m {width: 33.33%;}
    .col-5m {width: 41.66%;}
    .col-6m {width: 50%;}
    .col-7m {width: 58.33%;}
    .col-8m {width: 66.66%;}
    .col-9m {width: 75%;}
    .col-10m {width: 83.33%;}
    .col-11m {width: 91.66%;}
    .col-12m {width: 100%;}
   
   
    header img {
        max-width:        350px;
    }
   
    nav {
        display:            block;
       
    }
   
    header .menuknap {
        display:            none;
    }
   
   
}

/*for PC */


@media only screen and (min-width: 780px) {
   
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
   
   
}

        </style>
    </head>
   
<body>

<div class="row" >
    <header class="col-12" >
        <label class="menuknap" for="onoff" >
            <div></div><div></div><div></div><div></div>
        </label>
    </header>
</div>

<div class="row">
   
    <input type="checkbox" id="onoff" >
    <nav class="col-4m col-3" id="navmenu" style="padding: 0px;" >
       
        <input type="checkbox" id="kid40" >
           
            <label for="kid40" >
               
                    <ul >
                        <li class="k1" >Hovedkategori</li>
                        <li class="k2-1" ><a href="#" class="menu" >Underkategori 1</a></li>
                        <li class="k2-1" ><a href="#" class="menu" >Underkategori 2</a></li>
                        <li class="k2-1" ><a href="#" class="menu" >Underkategori 3</a></li>
                    </ul>
               
            </label>
       
        <input type="checkbox" id="kid41" >
           
            <label for="kid41" >
               
                    <ul >
                        <li class="k1" >Hovedkategori 2</li>
                        <li class="k2-1" ><a href="#" class="menu" >Underkategori 1</a></li>
                        <li class="k2-1" ><a href="#" class="menu" >Underkategori 2</a></li>
                        <li class="k2-1" ><a href="#" class="menu" >Underkategori 3</a></li>
                    </ul>
               
            </label>
                   
    </nav>
   
    <div class="col-m8 col-9" >Forside</div>

</div>


</body>
</html>


Avatar billede Slater Ekspert
12. maj 2017 - 17:01 #2
Det gør den fordi position: absolute; fjerner elementet fra flowet, som er formålet med det.
Menuens højde er defineret af ul'ens højde, men når ul'en fjernes fra flowet, skubber den ikke længere til omkringliggende elementer, og kan altså ikke definere højden på sin forælder.

Eftersom du vil sætte en height på den, virker det som præcis den effekt du ønsker: at ul'en ikke er en del af flowet, og ikke har indflydelse på elementerne omkring den. Men samtidig klager du over at netop dette sker.

Det er lidt forvirrende, som du formulerer det. Hvis du vil justere højden på et element uden at fjerne det fra flowet, vil du normalt bruge margin-top (evt med negativ værdi). At bruge height er netop tegn på at man ønsker præcis hvad der nu sker.

Men hvis du absolut skal have position: absolute, så er du altså nødt til selv at styre højden på ul'ens parent-element. Eller lægge et andet element, som er i flow, ind til at gøre det i stedet. Ul'en kan ikke både blæse og have mel i munden.
Avatar billede htx98i17 Professor
12. maj 2017 - 18:21 #3
Du har ret. Jeg forstår.

Jeg har virkelig problemer med at gennemskue hvordan jeg skal få underkategorierne til at dukke frem med en transition.

jeg har forsøgt at lægge et andet element (UL) udenom som du skrev. Deri ligger på underkategorierne. Og den UL er så defineret som absolute for at få transition height til at fungere.
Men nu er den UL jo bare taget ud af flow og skubber derfor ikke til indholdet under. Når underkategorierne folder sig ud skal hovedkategorierne underneden jo skubbes med ned ad.

Giver det mening?
Avatar billede htx98i17 Professor
16. maj 2017 - 20:30 #4
Jeg er ikke nået længere efter nogle dages roden rundt.
Det jeg jo egentlig bare gerne vil er at have en hovedkategori med en undermenu som dropdown der følger flowet eller med andre ord som skubbe de underliggende hovedkategorier ned alt efter hvor meget undermenuen i dropdown fylder.

Jeg undrer mig over at jeg ikke er i stand til at finde en løsning på det. Kan du hjælpe med et eksempel?
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