CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede 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
Avatar billede 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.
Avatar billede 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;
}
Avatar billede 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
Avatar billede Morten Professor
16. april 2017 - 08:06 #4
#3
ok så der er ikke lige en fix løsning på det :)
Tak for svar
Avatar billede 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>
Avatar billede 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 :)
Avatar billede 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
Avatar billede 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
Avatar billede 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
Avatar billede 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');
    }
);
Avatar billede 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.
Avatar billede 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
Avatar billede 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.
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
Programmeringssprog kurser
Kurser inden for grundlæggende programmering
Se alle Programmeringssprog kurser

Flere spørgsmål fra Andet programmering kategorien

Titel Indlæg Oprettet Seneste aktivitet
Echo virker ikke i php Af KurtG i Andet programmering 3 I dag 11:57 44 minutter siden
Rewrite i .htaccess til Joomla 5 Af andrew i Andet programmering 5 15/01/202520:23 16/01/202522:59
Kodning af element i custom css Af Jacob Hedelund i Andet programmering 3 14/10/202410:35 14/10/202419:46
Delphi 11 - converter webp til jpg fil Af juzas i Andet programmering 5 12/10/202413:28 14/10/202403:54
Trim tekst i batch script Af Dan Elgaard i Andet programmering 5 05/09/202411:08 10/09/202415:29
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
10 min siden Hvorfor virker Skype ikke på Lenovo YOGA TAB3 Plus Af eksmojo i Apps til Android
I dag 17:19 YouSee App går i sort ved opstart på Tizen styresystem Af Blød trafikant i Fjernsyn & projektorer
I dag 11:57 Echo virker ikke i php Af KurtG i Andet programmering
I dag 11:37 Installere Norlys App på ældre TV via Chromecast / Netværkskabel Af Uvanga i Fjernsyn & projektorer
I dag 09:22 Punktopstilling af tekst i celler Af Balar Seir i Excel
White papers
Flere white papers »


Premium
Teaser billede
Alt om den prisvenlige iPhone 16E: Så god er den i forhold iPhone 16 og 16 Pro
Læs mere »
Derfor ender dine AI-projekter ofte med at blive for dyre: Tre store udfordringer, som det er svært at tackle
Regeringen har sendt brev til den danske it-branche som svar på bekymringer: Og svaret er "stærkt, klart og meget kærkomment," siger branchen
En lille håndfuld cloud-leverandører sidder på 64 procent af det globale marked: Omsætter for flere hundrede milliarder kroner
Se alle »
Computerworld
Teaser billede
Test: Verdens vildeste trådløse højttaler trodser naturlovene og udløser et sjældent seks-tal
Læs mere »
Test: En af de bedste elbiler, som du overhovedet kan købe, er fransk
Selv pc’er fra 2020 efterlades i kulden: Her er de processorer som mister Microsoft Windows-support
Ny Windows-opdatering skaber store problemer for brugerne: Alvorlige fejl
Se alle »
CIO
Teaser billede
Microsoft gør klar til at lukke for WSUS efter 20 år - alle it-admins bør forberede sig
Læs mere »
Tre ud af fire it-projekter løber af sporet og går over budgettet - og det er der en særlig forklaring på
Regioner klar med licens-aftale med Microsoft: Priserne stiger markant
SAP-kunder tøver med at flytte over på S/4 Hana - foretrækker at bliver hængende på det gamle ECC
Se alle »
Job & Karriere
Teaser billede
40 år gammelt dansk it-selskab fusionerer med hollandsk firma og skifter navn
Læs mere »
Her er deres månedsløn: Så meget tjener CIO'erne i de danske regioner - den bedst lønnede får mere end digitaliseringsministeren
Lønninger i den danske it-branche fortsætter med at stige - så meget tjener de danske it-folk i gennemsnit
Nørgaard: I de gode gamle dage havde jeg for vane at fyre alle mine medarbejdere jævnligt
Se alle »
White paper
Teaser billede
Sådan: Opgradér din printerløsning uden store investeringer
Læs mere »
Sikkerhed gjort enkelt: Beskyt din virksomhed direkte i browseren
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »