CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

Morten Professor

15. april 2017 - 22:18 Der er 11 kommentarer og
2 løsninger

CSS menu

Hej Eksperter

Jeg er ved at få det sidste på plads med min menu.
Har et problem med at få li ul til at stå lige ved siden af hinanden.
Hvis i forstiller jer, at mine li går ned af. men så de ul står så forskudt af hinanden. så det toppen af ul røre bunden af li.

Det jeg godt kunne tænke mig at få dem til at stå lige ved siden af hinanden.

Har prøvet med "display: inline-block;" virker lidt bedre, men den er ikke helt på plads endnu.

Har en kode her af in CSS:
#menu ul {
display: inline-block;
}
#menu li {
margin:0;
background-color:#333;
color:#FFF;
cursor:pointer;
list-style:none;
list-style-position:inherit;
border:solid thin;
width:200px;
padding:20px;
}
#menu li.fundet{
margin:0;
background:#ff6600;
width:200px;
list-style:none;
border:solid thin;
}
#menu ul ul {
position:fixed;
left:10000px;
}
#menu ul > li:hover > ul {
position:absolute;
left:250px;
}

Med venlig hilsen
Morten

Synes godt om

Morten Professor

15. april 2017 - 22:22 #1

og lige en ting mere hvordan får jeg mine <a href="#" til at fylde hele li.
Ved godt man kan gøre det på denne måde <a href="#"><li>Test</li></a> Men er der ikke en anden måde, en nemmere måske.

Synes godt om

olsensweb.dk Ekspert

15. april 2017 - 22:50 #2

#0
dette spm burde nok ligge i https://www.computerworld.dk/eksperten/spm/programmering/html
dit sidste spm burde ligge i https://www.computerworld.dk/eksperten/spm/programmering/javascript jquery er javascript

men til dit spm, erstat inline-block; med flex;
og så vil jeg anbefale du overskriver default padding på din ul

ul{
padding:0;
}

#menu ul {
/* display: inline-block; */
display: flex;
}

Synes godt om

olsensweb.dk Ekspert

15. april 2017 - 22:58 #3

#1
<a href="#"><li>Test</li></a> er ikke validt html
du skal lave det sådan <li><a href="#">Test</a></li> for at lave det validt

Synes godt om

Morten Professor

16. april 2017 - 08:06 #4

#3
ok så der er ikke lige en fix løsning på det :)
Tak for svar

Synes godt om

Morten Professor

16. april 2017 - 08:08 #5

#2

Den flex ligger dem ved siden af hinanden.
Ikke <li>Danmark
<ul>
<li><a href="#">Test land</a></li>
</li>
</ul>

Synes godt om

Morten Professor

16. april 2017 - 08:54 #6

Det jeg mener er at de li går ned igennem siden og så undermenuer kommer ved siden af. måske lidt bedre forklaret, kan godt se det andet er noget vrøvl :)

Synes godt om

olsensweb.dk Ekspert

16. april 2017 - 09:12 #7

er det en Nested Horizontal HTML Lists du vil have ??
kig på eks
Nested HTML Lists
Horizontal Lists
https://www.w3schools.com/html/html_lists.asp

http://stackoverflow.com/questions/6539945/horizontal-list-with-nested-lists-that-display-vertically
http://stackoverflow.com/questions/9268481/horizontal-inline-list-with-nested-child-lists

istedet for at bruge flex på din ul kan du jo bruge float på dine li elementer eller bedre
li {
display: inline;
}

kig på denne demo
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar
er det det du vil lave ??

prøv at google "dropdown menu html"

hvordan ser din HTML ud ??
er din html valid ?? jf https://validator.w3.org/
er din css valid ?? jf http://jigsaw.w3.org/css-validator/

lav evt en online demo og kom med et link

Synes godt om

olsensweb.dk Ekspert

16. april 2017 - 10:28 #8

du kunne også kigge på dette
https://webdesign.tutsplus.com/tutorials/big-menus-small-screens-responsive-multi-level-navigation--webdesign-8452

jeg ville dog kigge på twitter bootstrap menu
https://getbootstrap.com/examples/navbar/
https://getbootstrap.com/components/#navbar

Synes godt om

olsensweb.dk Ekspert

16. april 2017 - 13:40 #9

prøv at kigge på denne

<!DOCTYPE html>
<html lang="da">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>demo</title>

<style type="text/css">
*{
padding:0;
margin:0;
}

#menu li {
background-color:#333;
color:#FFF;
cursor:pointer;
list-style:none;
border:solid thin;
width:150px;
padding:10px;
float:left;
}
#menu li.fundet{
background:#ff6600;
font-weight: bold;
color:yellow;
}

#menu ul > li > ul {
display:none;
}
#menu ul > li:hover > ul {
display:inline;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// ligger classen fundet på li elementet når man har musen over elementet, og fjerer classen når markører fjernes
// lavet i https://www.computerworld.dk/eksperten/spm/1016769
$("li").hover(
function () {
$(this).addClass('fundet');
},
function () {
$(this).removeClass('fundet');
}
);

// gør at man kan klikke på hele menu punket, og ikke kun linket
$("li").click(
function (evt) {
evt.preventDefault();
url = ($(this).find('a').attr('href') );
// http://stackoverflow.com/questions/10653367/how-to-check-undefined-value-in-jquery
if (typeof url === "undefined"){
// console.log("udefineret");
}
else{
// console.log(url);
window.location.href = url;
}
}
);

});
</script>
</head>
<body>
<div id = "menu">
<ul>
<li><a href="#">Danmark</a></li>
<li><a href="##">Sverige</a></li>
<li>Norge
<ul>
<li><a href="#">3.0</a></li>
<li><a href="#">3.1</a></li>
<li>3.2</li>
<li>3.3</li>
<li>3.4</li>
</ul>
</li>
<li>Finland</li>
<li>Island</li>
</ul>
</div>
</body>
</html>

men jeg vil anbefale du laver den responsivt, feks inspiraret af nedenstående link
http://webdesigntutsplus.s3.amazonaws.com/tuts/378_tessa/tessa-lt-dropdowns-21c7868/index.html

eller bruger twitter bootstrap som er meget udbredt, som jeg linkede til i #8

Synes godt om

olsensweb.dk Ekspert

16. april 2017 - 14:02 #10

ref #9

hvis du erstatter

#menu li.fundet{
background:#ff6600;
font-weight: bold;
color:yellow;
}

med

#menu li:hover{
background:#ff6600;
font-weight: bold;
color:yellow;
}

kan du slette

// ligger classen fundet på li elementet når man har musen over elementet, og fjerer classen når markører fjernes
// lavet i https://www.computerworld.dk/eksperten/spm/1016769
$("li").hover(
function () {
$(this).addClass('fundet');
},
function () {
$(this).removeClass('fundet');
}
);

Synes godt om

Morten Professor

16. april 2017 - 20:16 #11

Så er jeg hjemme igen og er i fuld gang med at kigge på det du har lavet, det med <a href="#" virker perfekt.
Den menu jeg er ved at lave er for at lære mig noget om det med JQuery så det er perfekt du viser mig nogen metoder til at gøre det.

Den menu jeg er ved at lave er meget simpel dog med nogen effekter nu efter jeg har fundet ud af det med JQuery hvad det kan. Ved selvfølgelig godt det kan meget mere men må starte et sted :o)

Her er et link til det jeg er ved at teste og øve mig med. http://www.ankerstjerneweb.dk/find.html
Det som jeg ikke kan få til at virker er at få den der popper ud for li få den til at stå lige med så der ikke er det spring, imellem top og bund, men at de skal slå lige ud for hinanden.

Ved godt denne ikke er responsivt endnu, men det er næste projekt.
Og kan se du er kommet med nogen gode forslag så jeg har noget at gå efter.

Synes godt om

olsensweb.dk Ekspert

16. april 2017 - 20:52 #12

prøv at tilføje de 2 fremhævet linjer

#menu ul ul {
position: fixed;
left: 10000px;
margin-left: 0px;
margin-top: -20px;
}

kun løst tested med udviklings værktøjet (F12) i chrome

Synes godt om

Morten Professor

16. april 2017 - 21:53 #13

Perfekt det virkede testede det også lige i edge browseren.

Tak for hjælpen og dine gode svar jeg har noget at gå i gang med.

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Flere spørgsmål fra Andet programmering kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Delphi - Parser JSON Fil Af juzas i Andet programmering	4	25/02/202407:13	28/02/202420:56
Bat fil Af sjass i Andet programmering	5	15/01/202417:45	15/01/202420:35
RegEx i Autohotkey Af Bak i Andet programmering	2	01/01/202414:30	18/01/202413:20
Ryk "flag" til venstre på produktbilleder - CSS/Prestashop Af MasterCool2000 i Andet programmering	1	21/12/202302:54	21/12/202302:54
Powershell datagridview Af totalpc i Andet programmering	0	19/12/202315:09	-

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS