En god guide til. Horisontal menu med + 2 sub menuer?
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.
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.
-
- Rutineret
- Indlæg:50
- Tilmeldt:20. sep 2013, 15:33
- Kontakt:
Re: En god guide til. Horisontal menu med + 2 sub menuer?
brug css hover effekt på din menu som du har lavet med ul og li
- scootergrisen
- Moderator
- Indlæg:709
- Tilmeldt:21. jun 2012, 23:40
- Kontakt:
Re: En god guide til. Horisontal menu med + 2 sub menuer?
Det er ikke rigtig en guide Men det virker da. Når du hover li elementet, så viser den ul elementet.scootergrisen skrev:https://developer.mozilla.org/en-US/docs/Web/CSS/:hover
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;
}
-
- Rutineret
- Indlæg:50
- Tilmeldt:20. sep 2013, 15:33
- Kontakt:
Re: En god guide til. Horisontal menu med + 2 sub menuer?
Din padding er en boder du har sat på din class navigationSiteWrapper - det eneste du skal er at skrive border:none;
Re: En god guide til. Horisontal menu med + 2 sub menuer?
Ja jeg har en border, men man kan ikke se den da den er opacity="0";MrLundholm skrev:Din padding er en boder du har sat på din class navigationSiteWrapper - det eneste du skal er at skrive border:none;
Kode: Vælg alt
div {
border: 1px dashed rgba(255, 255, 255, 0);
}
Dog er det ikke denne border der laver problemer med paddingen over min navigations menu
-
- Rutineret
- Indlæg:50
- Tilmeldt:20. sep 2013, 15:33
- Kontakt:
Re: En god guide til. Horisontal menu med + 2 sub menuer?
Da jeg fjernede denne border forsvandt den padding du snakkede omcristian skrev:Dog er det ikke denne border der laver problemer med paddingen over min navigations menu
Re: En god guide til. Horisontal menu med + 2 sub menuer?
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" problemMrLundholm skrev:Da jeg fjernede denne border forsvandt den padding du snakkede omcristian skrev:Dog er det ikke denne border der laver problemer med paddingen over min navigations menu
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.
-
- Rutineret
- Indlæg:50
- Tilmeldt:20. sep 2013, 15:33
- Kontakt:
Re: En god guide til. Horisontal menu med + 2 sub menuer?
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 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.
Re: En god guide til. Horisontal menu med + 2 sub menuer?
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.
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
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);
}
så når du skriver
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.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.
-
- Rutineret
- Indlæg:50
- Tilmeldt:20. sep 2013, 15:33
- Kontakt:
Re: En god guide til. Horisontal menu med + 2 sub menuer?
Kan du evt tage et billede af det problem du har for kan ikke selv se det