En god guide til. Horisontal menu med + 2 sub menuer?

Her kan du stille og svare på spørgsmål omkring CSS
Besvar
cristian
Moderator
Moderator
Indlæg: 882
Tilmeldt: 26. sep 2011, 21:31
Kontakt:

En god guide til. Horisontal menu med + 2 sub menuer?

Indlæg af cristian » 2. nov 2013, 21:16

Nogle der har en god guide til at lave en horisontal menu med en vertikal submenu?

Samtidig skal denne submenu (på den vertikale led), kunne kobles til endnu en horisontal submenu ,)

Jeg har ledt på nettet efter nogle gode guides. Men der er zero forklaring, og jeg bryder mig ikke om copy paste and hope it works princippet.
Det lader lidt til at være det ingen rigtig snakker om i detaljer, og kortene bliver holdt for sig selv.

Tak på forhånd.

MrLundholm
Rutineret
Rutineret
Indlæg: 50
Tilmeldt: 20. sep 2013, 15:33
Kontakt:

Re: En god guide til. Horisontal menu med + 2 sub menuer?

Indlæg af MrLundholm » 2. nov 2013, 21:58

brug css hover effekt på din menu som du har lavet med ul og li :)


cristian
Moderator
Moderator
Indlæg: 882
Tilmeldt: 26. sep 2011, 21:31
Kontakt:

Re: En god guide til. Horisontal menu med + 2 sub menuer?

Indlæg af cristian » 3. nov 2013, 10:58

Det er ikke rigtig en guide :) Men det virker da. Når du hover li elementet, så viser den ul elementet.
Dog bliver det ikke vist rigtigt, da det ikke bliver vist under det aktive li element. Og her tænker jeg at der er nogle CSS3 fif
for at menuerne viser sig under hinanden. Og at tingene ser godt ud, hvilket mere en den guide jeg ser ind til.
For at se hvordan andre bruger positions kommandoerne(andet) i en måde der er til at forstå.

Edit
I første omgang har jeg piv stjålet (fra en lov side med gratis menuer) en anden menu og rettet den til så den passer til mit eget site.
Hvor jeg også ud og in kommenterer for at se hvordan de forskellige værdier ændre menuen for at gennemskue hvordan det virker med undermenuer.
Som kan ses på http://www.mnrb.dk

Men når man hover linksne, så er der en 1px padding på toppen af hover effekten hvilket irriterer mig gevaldigt.
Er der nogle af jer der kan gennemskue hvor den padding kommer fra??

For mig virker det som om at li elementet som indeholder a elementet, ikke har den helt rigtige højde.
Men her kan jeg heller ikke helt gennemskue hvor den skal sættes.

Kode: Vælg alt

ul#css3menu1 ul{
    display: none;

    position: absolute;
    left: 1px;
    top: 100%;

    background-color: black;

    border-color: black;
    
    height: 18px;
}

ul#css3menu1 li:hover > *{
    display: block;
}

ul#css3menu1 li{
    position: relative;

    display: block;

    white-space: nowrap;

    font-size: 0;

    float: left;
}

ul#css3menu1 li:hover{
    z-index:1;
}

ul#css3menu1{
    font-size: 0;

    z-index: 999;

    position: relative;

    display: inline-block;

    zoom: 1;

    padding: 0;

    *display: inline;
}

* html ul#css3menu1 li a{
    display: inline-block;
}

ul#css3menu1 > li{
    margin: 0;
}

ul#css3menu1 a:active, ul#css3menu1 a:focus{
    outline-style: none;
}

/*  #########################################################*/
/*  #Options to the main menu such as color, text with more #*/
/*  #########################################################*/
ul#css3menu1 a{
    display: block;

    vertical-align: middle;

    text-align: left;
    text-decoration: none;

    font: bold 14px Verdana;

    color: black;

    text-shadow: #FFF 0 0 1px;

    cursor: pointer;

/*    padding: 8px;*/
    padding: 9px 8px;

    background-color: rgba(220, 75, 3, 1);

    border-width: 0 0 0 1px;
    border-style: solid;
    border-color: black;
}

ul#css3menu1 ul li{
    float:none;

    border-bottom:1px solid black;
}

ul#css3menu1 ul a{
    text-align:left;

    padding: 10px 10px;

    background-color: rgba(220, 75, 3, 1);

    border-width:0;

    font: 14px Verdana;

    color: black;

    text-decoration:none;
}

/*  #########################################################*/
/*  #The main menu hover effects                            #*/
/*  #########################################################*/
ul#css3menu1 li:hover > a,ul#css3menu1 li a.pressed{
    background-color:#f8ac00;

    color: black;

    text-decoration:none;
}

/*  #########################################################*/
/*  #The sub menu hover effects                             #*/
/*  #########################################################*/
ul#css3menu1 ul li:hover > a, ul#css3menu1 ul li a.pressed{
    background-color:#f8ac00;

    color: black;

    text-decoration:none;
}

MrLundholm
Rutineret
Rutineret
Indlæg: 50
Tilmeldt: 20. sep 2013, 15:33
Kontakt:

Re: En god guide til. Horisontal menu med + 2 sub menuer?

Indlæg af MrLundholm » 3. nov 2013, 16:02

Din padding er en boder du har sat på din class navigationSiteWrapper - det eneste du skal er at skrive border:none;

cristian
Moderator
Moderator
Indlæg: 882
Tilmeldt: 26. sep 2011, 21:31
Kontakt:

Re: En god guide til. Horisontal menu med + 2 sub menuer?

Indlæg af cristian » 3. nov 2013, 16:17

MrLundholm skrev:Din padding er en boder du har sat på din class navigationSiteWrapper - det eneste du skal er at skrive border:none;
Ja jeg har en border, men man kan ikke se den da den er opacity="0";

Kode: Vælg alt

div {
    border: 1px dashed rgba(255, 255, 255, 0);
}
Det er med vilje så jeg kan skifte imellem og se hvordan mine divs reagerer i diverse situationer.
Dog er det ikke denne border der laver problemer med paddingen over min navigations menu :( :)

MrLundholm
Rutineret
Rutineret
Indlæg: 50
Tilmeldt: 20. sep 2013, 15:33
Kontakt:

Re: En god guide til. Horisontal menu med + 2 sub menuer?

Indlæg af MrLundholm » 3. nov 2013, 19:50

cristian skrev:Dog er det ikke denne border der laver problemer med paddingen over min navigations menu :( :)
Da jeg fjernede denne border forsvandt den padding du snakkede om :)

cristian
Moderator
Moderator
Indlæg: 882
Tilmeldt: 26. sep 2011, 21:31
Kontakt:

Re: En god guide til. Horisontal menu med + 2 sub menuer?

Indlæg af cristian » 3. nov 2013, 20:26

MrLundholm skrev:
cristian skrev:Dog er det ikke denne border der laver problemer med paddingen over min navigations menu :( :)
Da jeg fjernede denne border forsvandt den padding du snakkede om :)
True det testede jeg også selv direkte i firefox, men det er lidt at "springe over hvor gærdet er lavest" da det ikke er det "rigtige" problem :)

Har en anden menu, hvor jeg også har borderen. Og her virker hover effekten fint helt op og ned til kanterne.
Dog kan jeg i denne menu ikke lige (endnu) gennemskue hvor paddingen går gal.

MrLundholm
Rutineret
Rutineret
Indlæg: 50
Tilmeldt: 20. sep 2013, 15:33
Kontakt:

Re: En god guide til. Horisontal menu med + 2 sub menuer?

Indlæg af MrLundholm » 3. nov 2013, 21:28

cristian skrev: True det testede jeg også selv direkte i firefox, men det er lidt at "springe over hvor gærdet er lavest" da det ikke er det "rigtige" problem :)

Har en anden menu, hvor jeg også har borderen. Og her virker hover effekten fint helt op og ned til kanterne.
Dog kan jeg i denne menu ikke lige (endnu) gennemskue hvor paddingen går gal.
Jeg kan med Chrome Dev. Tools, se at det der skaber paddingen er denne border, så det er ikke at "springe over hvor gærdet er lavest" da det er dette der er fejlen.

cristian
Moderator
Moderator
Indlæg: 882
Tilmeldt: 26. sep 2011, 21:31
Kontakt:

Re: En god guide til. Horisontal menu med + 2 sub menuer?

Indlæg af cristian » 4. nov 2013, 00:21

Jeg kan godt accepterer at du mener det er problemet, men hvorfor virker overstående div med understående menu?
I begge tilfælde er der en gennemsigtig border omkring diven.

Forskellen på menuerne(rent funktions mæssigt) er at den ene har en sub-menu det har den anden ikke.

Kode: Vælg alt

/*nav {

}

nav ul {
    height: 18px;
    
    padding: 9px 0px;
    
    margin: 0px;
}

nav ul li {
    display: inline;
    padding: 8px 0px;
}

nav ul li a {
    text-decoration: none;
    padding: 8px 8px;
    
    font-size: 16px;
    font-weight: bold;
    color: black;
    
    transition: background .25s ease-in-out;
   -moz-transition: background .25s ease-in-out;
   -webkit-transition: background .25s ease-in-out;
}

nav ul li a:hover {
    color: white;
    background-color: rgba(180, 62, 0, 1);
}
Samtidig så ligger borderen sig på ydersiden af paddingen, og hverken hverken ul li eller a elementet har en top eller bottom border der kunne skabe mellem rummet.

så når du skriver
Jeg kan med Chrome Dev. Tools, se at det der skaber paddingen er denne border, så det er ikke at "springe over hvor gærdet er lavest" da det er dette der er fejlen.
Så er det en border der er på ydersiden af et element som indeholder child elementer. Og det er child elementerne der har padding problemet.

MrLundholm
Rutineret
Rutineret
Indlæg: 50
Tilmeldt: 20. sep 2013, 15:33
Kontakt:

Re: En god guide til. Horisontal menu med + 2 sub menuer?

Indlæg af MrLundholm » 4. nov 2013, 21:04

Kan du evt tage et billede af det problem du har for kan ikke selv se det :)

Besvar