Tech blogg

Bootstrap Dropdown - horizontal layout

Bootstrap sin dropdown meny er flott, men har også noen store begrensninger. Blant annet er det kun tilrettelagt for to nivåer for menyer, og det krever et lite "triks" for å få til ubegrenset antall undermenyer (det er mulig jeg skriver om dette i en annen artikkel - menysystemet til Lumino har dette "trikset" innebygd).

I denne artikkelen vil jeg ta for meg problemstillingen med horisontale undermenyer. Bootstrap menyene kommer ferdig med stiler for vertikale menyer, og disse fungere veldig fint i de fleste tilfeller. Jeg arbeidet nylig på et prosjekt hvor antall undermenyer var så vidt stort, at det ikke var praktisk - eller særlig brukervennlig - med vertikale undermenyer. Etter en del prøving og feiling, og noe Googleing kom jeg frem til løsningen som er forklart nedenfor. Kanskje har du et likende problem - så vær så god, her er løsningen :)

Nedenfor er vist en standard bootstrap meny. Jeg har lagt inn egne stiler for alle elementer basert på gammel vane - noe som gjør det enklere å overstyre stiler i en del tilfeller.

I tillegg til koden ovenfor, må du overstyre noen stiler i bootstrap stilarket. Trikset her ligger i å sette "position: fixed" for listen av undermenyer, noe som overstyrer bootstrap verdien som er "position: absolute". Videre må hvert element i listen få verdien "display: inline-block", og dermed vil elementene legges etter hverandre i stedet for under hverandre.

.dropdown-menu {
position: fixed;
top: 100px;
left: 0;
float: left;
min-width: 160px;
padding: 15px 0;
margin: 0 .5%;
width: 99%;
text-align: center;
}

.dropdown-menu li {
display: inline-block;
}

I tillegg til dette må du selvfølgelig inkludere bootstrap stiler og JavaScript, samt jQuery.

Lykke til!

Og - hvis du liker mine kodeeksempler, så husk også å "like" oss på Facebook, eller skriv en kommentar på denne siden.

André Vold

22.07.2014

Kommentar

Skriv kommentar

André Vold

Her er en rask liten BLOGGER BIO for å fortelle litt om min bakgrunn - og hvorfor jeg valgte programmering som fagfelt.

Jeg vokste opp i Norge, men gikk på universitet i USA. Jeg er sivilingeninør med grad innen "Computer Engineering" fra Arizona State University. Etter utdannelsen flyttet jeg tilbake til Norge, begynte å arbeide på Norsk Data og senere IBM, og tok videreutdannelse på BI innen Master of Management. Etter flere år som divisjonsdirektør i IBM Norge, valgte jeg å starte e-læringsfirmaet Apropos Internett AS . Senere startet jeg også ViroSafe Norge AS som importerer og distribuerer anti-malware og anti-virus software og hardware.

Det har alltid vært essensielt for meg å holde meg oppdatert innen teknologiske endringer og trender - ikke bare for å kunne holde programmeringskunnskaper på topp, men også for min suksess som gründer.

Lumino blogger omfatter en rekke temaer som har vært essensiell for min virksomhet, og som derfor kan være relevant for din.