Avatar billede dalis Praktikant
20. april 2016 - 06:44 Der er 8 kommentarer

Samme menu altid i toppen

Jeg har brug for hjælp til at få en menu til altid at vøre synlig øverst på alle sider.
Jeg vil gerne i samarbejde med en anden bruger og betale for en løsning som fungerer perfekt :-)
Nedenfor er html og CSS som det er nu og som skal forbedres:
<!DOCTYPE html>
<html>
<head>
    <title>forbedret men</title>
    <meta name="viewport" content="width=device-width" />   
<style>

#menu, #menu ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
   
    #menu {
        width: 900px;
        margin: 10px auto;
        border: 1px #222222;
        background-color: #004a87;
        border-radius: 6px;
        box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
    }
   
    #menu:before,
    #menu:after {
        content: "";
        display: table;
    }
   
    #menu:after {
        clear: both;
    }
   
    #menu {
        zoom:1;
    }
   
    #menu li {
        float: left;
    /*    border-right: 1px solid #222; */
    /*    border-right: 1px #222; */
        box-shadow: 1px 0 0 #444;
        position: relative;
    }
   
    #menu a {
        float: left;
        padding: 12px 30px;
        color: #fff;
        text-transform: uppercase;
        font: 10px Verdana, Arial, Helvetica;
        text-decoration: none;
        text-shadow: 0 1px 0 #000;
    }
   
    #menu li:hover > a {
        color: #fafafa;
    }
   
    *html #menu li a:hover { /* IE6 only */
        color: #fafafa;
    }
   
    #menu ul {
        margin: 20px 0 0 0;
        _margin: 0; /*IE6 only*/
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 38px;
        left: 0;
        z-index: 1;   
        background: #444;
        box-shadow: 0 -1px 0 rgba(255,255,255,.3);   
        border-radius: 3px;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out; 
    }

    #menu li:hover > ul {
        opacity: 1;
        visibility: visible;
        margin: 0;
    }
   
    #menu ul ul {
        top: 0;
        left: 150px;
        margin: 0 0 0 20px;
        _margin: 0; /*IE6 only*/
    /*    -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
        -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
        box-shadow: -1px 0 0 rgba(255,255,255,.3);        */
    }
   
    #menu ul li {
        float: none;
        display: block;
        border: 0;
        _line-height: 0; /*IE6 only*/
        -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
        -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
        box-shadow: 0 1px 0 #111, 0 2px 0 #666;
    }
   
    #menu ul li:last-child { 
    /*    -moz-box-shadow: none; */
        -webkit-box-shadow: none;
        box-shadow: none;   
    }
   
    #menu ul a {   
        padding: 10px;
        width: 130px;
        _height: 10px; /*IE6 only*/
        display: block;
        white-space: nowrap;
        float: none;
        text-transform: none;
    }
   
    #menu ul a:hover {
        background-color: #0186ba;
    /*    background-image: -moz-linear-gradient(#04acec,  #0186ba);   
        background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
        background-image: -webkit-linear-gradient(#04acec, #0186ba);
        background-image: -o-linear-gradient(#04acec, #0186ba);
        background-image: -ms-linear-gradient(#04acec, #0186ba);
        background-image: linear-gradient(#04acec, #0186ba); */
    }
   
    #menu ul li:first-child > a {
        -moz-border-radius: 3px 3px 0 0;
        -webkit-border-radius: 3px 3px 0 0;
        border-radius: 3px 3px 0 0;
    }
   
    #menu ul li:first-child > a:after {
        content: '';
        position: absolute;
        left: 40px;
        top: -6px;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #444;
    }
   
    #menu ul ul li:first-child a:after {
        left: -6px;
        top: 50%;
        margin-top: -6px;
        border-left: 0;   
        border-bottom: 6px solid transparent;
        border-top: 6px solid transparent;
        border-right: 6px solid #3b3b3b;
    }
   
    #menu ul li:first-child a:hover:after {
        border-bottom-color: #04acec;
    }
   
    #menu ul ul li:first-child a:hover:after {
        border-right-color: #0299d3;
        border-bottom-color: transparent;    
    }
   
    #menu ul li:last-child > a {
        -moz-border-radius: 0 0 3px 3px;
        -webkit-border-radius: 0 0 3px 3px;
        border-radius: 0 0 3px 3px;
    }
   
</style>
</head>
<body>

<nav id="menu-wrap">
    <ul id="menu">
        <li><a href="/">FRAMSÍÐA</a></li>


                <li>
                    <a href="">SÁTTMÁLAR</a>

                    <ul>
                        <li><a href="">FISKISKIP</a></li>
                        <li><a href="">FARMASKIP</a></li>
                        <li><a href="">FÍGGJARMÁLARÁÐIÐ</a></li>
                        <li><a href="">KOMMUNUR</a></li>
                        <li><a href="">AÐRIR SÁTTMALAR</a></li>
                    </ul>               
                </li>

                <li>
                    <a href="">LØNARTALVUR</a>
                    <ul>
                        <li><a href="">FISKISKIP</a></li>
                        <li><a href="">FARMASKIP</a></li>
                        <li><a href="">FÍGGJARMÁLARÁÐIÐ</a></li>
                        <li><a href="">KOMMUNUR</a></li>
                        <li><a href="">AÐRIR SÁTTMALAR</a></li>

                    </ul>               
                </li>
                <li>
                    <a href="">UMSITING</a>               
                    <ul>
                        <li><a href="">BÚSTAÐUR</a></li>
                        <li><a href="">SKRIVSTOVAN</a></li>
                        <li><a href="">STARVSFÓLKV</a></li>
                        <li><a href="">AVGREIÐSLA</a></li>
   
                    </ul>   
                </li>

                <li>
                    <a href="">FELAGIÐ</a>               
                    <ul>
                        <li><a href="">FORMAÐURIN</a></li>
                        <li><a href="">VIÐTØKUR</a></li>
                        <li><a href="">NEVNDARLIMIR</a></li>
                        <li><a href="">SAMSTARV</a></li>
                    </ul>   
                </li>


                <li>
                    <a href="">KUNNING</a>               
                    <ul>
                        <li><a href="">LIMASKAPUR</a></li>
                        <li><a href="">SPYR FELAGIÐ</a></li>
                        <li><a href="">ÁHEITAN</a></li>
                        <li><a href="">EFTIRLØN</a></li>
                        <li><a href="">SAMLAGSTRYGGING</a></li>
                        <li><a href="">SLÓÐIR</a></li>
                    </ul>   
                </li>

                <li>
                    <a href="">INNIHALDSYVIRLIT</a>               
                </li>   


   
                    </ul>   
                </li>
</nav>


</body>
<html>
Avatar billede dalis Praktikant
20. april 2016 - 10:47 #2
Lad mig tilføje, at i øjeblikket kører sitet med asp og ACCESS, og at det ikke endnu er aktuelt at modernisere til responsive lay out.

Da jeg skrev "Menu'en skal altid være øverst på alle sider" så skal det forstås således at når man skroller ned på en side så skal menu'en ikke skrolle væk. Det vil sige at den altid skal ses øverst.

Jeg har tænkt mig at lægges menuen i en "include fil" så den kommer ind på alle sider.

Men det er deværre bare ikke nok :-)
Avatar billede keysersoze Guru
21. april 2016 - 18:26 #3
sæt din menu til position: fixed; så ligger den altid øverst.
Avatar billede dalis Praktikant
23. april 2016 - 05:29 #4
Skal det være med <div> og så noget med øverste venstre ?
Hvordan gør jeg det helt korekt med div ?
Avatar billede olsensweb.dk Ekspert
23. april 2016 - 08:15 #5
se mit svar på
http://www.udvikleren.dk/forum/46917/menuen-skal-altid-vaere-oeverst-paa-alle-sider/
indlæg 20.04.16 12:00

når man opretter spm flere steder, må man følge med flere steder.
Avatar billede keysersoze Guru
23. april 2016 - 11:06 #6
Du kan bare gøre det på de elementer du allerede har, dvs din menu-wrap. sæt top, left og right til 0 - og så for at sætte en passende margin på dit øvrige indhold så intet skjules bag din menu. Hvis du kigger på bootstrap - fx http://getbootstrap.com/examples/navbar-fixed-top/ - så kan du få serveret løsninger til mange af disse typiske udfordringer.
Avatar billede olsensweb.dk Ekspert
23. april 2016 - 11:37 #7
>Hvis du kigger på bootstrap - fx http://getbootstrap.com/examples/navbar-fixed-top/ - så kan du få serveret løsninger til mange af disse typiske udfordringer.
dette vil også være min klare anbefaling, bruger den iøvrigt selv på min egen hjemmeside
Avatar billede dalis Praktikant
27. april 2016 - 11:04 #8
tak for hjælpen
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