Avatar billede nanders Nybegynder
18. december 2010 - 17:52 Der er 13 kommentarer og
1 løsning

Simpel CSS dropdown menu

Kære eksperter,

På siden www.fre2011.dk/test.htm ønsker jeg at lave en dropdown menu så når man trykker på competition, kommer der en dropdown menu så at brugeren kan vælge mellem flere øvrige links.

Kan det overhovedet lade sig gøre og hvordan skulle det indsættes i nedenstående CSS?

body {
    margin: 20px 0;
    font-family: verdana, "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 0.75em;
  background: #D9D98C;
  color: #000000;
}

h1 {
}

h2, h3, h4, h5, h6 {
    color: #2582A4;
}

p, ol, ul {
    text-align: justify;
}

strong {
    font-weight: bold;
    color: #808080;
}

a {
    color: #4D4D4D;
}

a:hover {
    text-decoration: none;
    color: #2582A4;
}

.box {
    margin-bottom: 0;
    padding-bottom: 0;
  background: url(images/img07x.gif) repeat-x left bottom;

}

.bottom {
    display: block;
    margin-bottom: 0;
    padding-bottom: 10px;
  background: #669966;
    background: url(images/img08x.gif) no-repeat left bottom;
}

.bottom2 {
    display: block;
    margin-bottom: 0;
    padding-bottom: 0px;
    background: url(images/img08x.gif) no-repeat left bottom;
}

.image {
    float: left;
    margin: 3px 0 0 0;
    padding: 0;
}


.image2 {
    float: left;
    margin: 0px 0 0 0;
    padding: 0;
}


.indent {
    margin-left: 125px;
}

/* Header */

#header {
    width: 928px;
    height: 37px;
    margin: 0 auto;
    background: #BECF74 url(images/img01.gif) repeat-x;
/* border-bottom: 3px solid #FFFFFF;*/
}

/* Menu */

#menu {
    float: left;
    width: 600px;
    height: 37px;
    margin: 0;
    padding: 0 0 0 10px;
    list-style: none;
    background: url(images/img02x.gif) no-repeat;
}

#menu li {
    display: inline;
}

#menu a {
    display: block;
    float: left;
    height: 27px;
    padding: 10px 15px 0px 15px;
    text-transform: lowercase;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
}

#menu a:hover {
    background: #0000CC url(images/img04x.gif) repeat-x;
}

/* Search */

#search {
    float: right;
    height: 28px;
    margin: 0;
    padding: 9px 25px 0 0;
    background: url(images/img03x.gif) no-repeat right top;
}

#search fieldset {
    display: inline;
    margin: 0;
    padding: 0;
    border: none;
}

#input1 {
    width: 164px;
    padding: 2px 5px;
    background: #FFFFFF;
    border: none;
}

#input2 {
    height: 20px;
    background: #87C4DB;
    border: none;
    text-transform: lowercase;
    font-size: 10px;
    font-weight: bold;
    color: #FFFFFF;
}

/* Content */

#content {
    width: 928px;
    margin: 0 auto;
}

#colOne {
    float: left;
    width: 238px;
  background: url(images/logoverysmall.jpg) repeat-x;
   
}

#colOne h3 {
    padding: 0 20px;
}

#colOne ul {
    margin-left: 0;
    padding-left: 20px;
    padding-right: 20px;
    list-style: none;
}

#colOne li {
    padding: 5px 0;
    border-top: 1px solid #EFEFEF;
}

#colOne li.first {
    border: none;
}

#colTwo {
    float: right;
    width: 617px;
    padding: 30px 40px 0 30px;
    background: url(images/img09x.gif) repeat-x;
}
#colFive {
    float: right;
    width: 617px;
    padding: 10px 10px 0 10px;
  background: #D9D98C;
    }

#colTwo h2 {
    margin-top: 0;
    font-size: 26px;
}

#colTwo h3 {
    margin-bottom: 0;
    font-size: 18px;
}

#colTwo h4 {
    margin-top: 0;
    font-size: 11px;
    font-weight: normal;
}

#colTwo .box {
    margin: 0 -30px 30px -20px;
    padding: 0 30px 0 20px;
}

#colTwo .bottom {
    margin: 0 0 20px -20px;
    padding: 0 0 20px 20px;
}

/* Logo */

#logo {
    height: 150px;
    background: url(images/img06xxx.gif) no-repeat;
}

#logo h1, #logo h2, #logo a {
    margin: 0;
    padding: 0;
    text-decoration: none;
    text-transform: lowercase;
    text-align: center;
    color: #FFFFFF;
}

#logo h1 {
    padding-top: 25px;
    font-size: 34px;
}

#logo h2 {
    margin-top: -5px;
    font-size: 12px;
}

/* Footer */

#footer {
    clear: both;
    width: 928px;
    margin: 0 auto;
    padding-top: 40px;
    background: url(images/img04.gif) repeat-x;
}

#footer p {
    margin: 0;
    text-align: center;
}
Avatar billede webweaver Praktikant
18. december 2010 - 20:33 #1
Kan det sagtens. Først og fremmest, må siden loade ved klik?
For så er det jo bare at lave en menu nedenunder den første, og så har du en dropdown.

Men ellers kan du lave en hover effekt (normalt på links), men kan også bruges på andre elementer. Så kan man få den til at vise en div eller en span fx, eller nogen liste punkter.
Avatar billede nanders Nybegynder
19. december 2010 - 10:02 #2
Løsningen med en ekstra undermenu der kommer frem ville være alletiders. Men hvordan gøres det i praksis - og hvordan med farver osv. - det skulle jo gerne se fornuftigt ud.
Avatar billede webweaver Praktikant
19. december 2010 - 11:56 #3
Altså det kan jo gøres helt ned til så simpelt som dette eksempel jeg har lavet her;

http://www.lasse-jensen.dk/eksperten/dropline.html

eller et andet og lidt mere "avanceret", men stadig simpelt eksempel;

http://lasse-jensen.dk/eksperten/drop.html

Der er selvfølgelig ikke vægtet på noget designmæssigt her, da det ikke er det væsentlige.
Avatar billede nanders Nybegynder
19. december 2010 - 15:53 #4
Men kan det implementeres i min CSS fil?

Den lidt mere avancerede passer bedre til mit.
Avatar billede webweaver Praktikant
19. december 2010 - 23:01 #5
Ja det kan det sagtens. Der er ikke nogen grænser for hvad for noget CSS du kan have i din style. Så det er bare at sætte det CSS ind iblandt det CSS du har nu.
Avatar billede nanders Nybegynder
04. januar 2011 - 21:51 #6
Jamen det jeg spørger til er konkrete anvisninger og ikke bare at det kan lade sig gøre
Avatar billede webweaver Praktikant
05. januar 2011 - 00:50 #7
Jeg har jo lagt et eksempel, hvor du frit kan se CSS koden og som du kan prøve dig frem med. Husk Eksperten er hjælp til selvhjælp :)

Hvis du ønsker at "dropdown" skal forekomme ved klik, vil jeg hvis det var mig, bare lave dropdown menuen fysisk inde på competition.htm (medmindre det skal være noget fancy hvor den "ruller ud eller lignende?

Du har nogle liste punkter <li> p.t.

Du klikker på du competition, og den skifter side til competition.htm som den skal. Herinde laver du så nogle underpunkter inde under listepunktet competition, så du får en submenu hertil.

Noget ala

<ul>
           
<li><a href="#">Home</a></li>   
<li>
                   
<a href="#">Competition</a>
                   
<ul>
               
<li><a href="#">Underpunkt</a></li>
<li><a" href="#">Underpunkt</a></li>
<li><a href="#" >Underpunkt</a></li>
<li><a  href="#">Underpunkt</a></li>
                   
</ul>
               
</li>
<li><a href="#">Visitors</a></li>
<li><a ...
               
</ul>


Du kan altid give lidt margin eller padding på din submenu, så den bliver indrykket lidt, hvis det skal være tilfældet.

Det er den helt simple måde du kan lave en "dropdown".
Avatar billede nanders Nybegynder
06. januar 2011 - 21:12 #8
Hej Lasse,

Tak for præciseringen. Og du har naturligvis ret.

Er kommet en del videre nu.

Har fået lavet det sådan at der er nogle indrykkede menupkt.'er under competition.

Jeg kan imidlertid ikke gennemskue hvor det går galt. Jeg ønsker de kun skal komme frem når man bevæger musen hen over competition.

Siden er på fre2011.dk/dropindex og den tilhørende CSS er css.txt

Kan du se hvad der er galt?
Avatar billede webweaver Praktikant
07. januar 2011 - 17:53 #9
Det ser ud til at du ikke har fået ændret navnet på den id du søger efter, fra det du har kopieret over.

Du kalder den "bottom" i din HTML, men i CSS'en hedder den stadig "menu" fra mit eksempel.

#menu ul {

display: none;

}
               
#menu li:hover ul {
               
display: inline;
float: left;
width: 0.5em;
                   
}


lav det om til

#bottom ul {

display: none;

}
               
#bottom li:hover ul {
               
display: inline;
float: left;
width: 0.5em;
                   
}


Gjorde det en forskel?
Avatar billede webweaver Praktikant
07. januar 2011 - 18:02 #10
Jeg kan se at du allerede har en style som hedder "bottom" længere oppe i din CSS. Du skal på et tidspunkt, nok lige bruge noget tid og rykket det hele sammen under den samme "bottom".

Jeg kan ydermere se at du benytter dig af <ul class="bottom">
og ikke <ul id="bottom"> Det vil sige at CSS'en jeg har givet dig, ikke virker, da det er skrevet til id metoden. Enten skal du ændre class til id (så vil dit nuværende CSS til bottom ikke virke, før du retter det til) eller gå op i CSS'en og fjerne # og skrive . istedet for ved dem som har navnet bottom. Det drejer sig om 2 steder. Dem som er vidst i forgående indlæg.
Avatar billede nanders Nybegynder
08. januar 2011 - 14:55 #11
Hej Lasse,

Det er sket fremskridt.

Har laget følgende ind i bunden af CSS arket (fre2001.dk/css.txt)

/* Lasse Jensen start */

#bottom ul {
                   
display: none;
}
               
#bottom li:hover ul {
                   
display: inline;
float: left;
width: 10em;
}
/* Lasse Jensen slut */

Og så har jeg ændret class til id der hvor der henvises til bottom.

Der sker dog absolut intet. Dog har jeg fået sat undermenuerne på. De skal dog kun komme frem når man kører musen over competition og de skal være klikbare.

Kan du se hvad der går galt?
Avatar billede webweaver Praktikant
08. januar 2011 - 16:32 #12
Jeps, det kan jeg godt. Det er fordi at du har lukket din </li> for hurtigt. Din ul submenu skal være inden for denne.

Har siddet og rodet lidt med det, og fået det til at virke.
Har ryddet lidt op i din CSS, så det er som det skal være.

Du finder din CSS her,
http://pastebin.com/cxzEzd1s

Og din HTML her,
http://pastebin.com/DBAEmrXF
Avatar billede nanders Nybegynder
08. januar 2011 - 17:26 #13
Hej Lasse

SUPER SUPER SUPER

TAK TAK TAK

Sender du mig ikke en PM (personlig meddelelse) så sender jeg dig en eller anden erkendelse med posten?

VH.

nanders
Avatar billede webweaver Praktikant
08. januar 2011 - 19:59 #14
Hej nanders.

Det var så lidt, og godt at det fungerer nu :)

Okay tak, jeg sender dig en PM så da :-)
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