Rollover -> Ekstra meny linje

[alex100]

Hei.

 

Er veldig tidlig i å prøve å utvikle en side.

http://home.no.net/owlsonly/hardwareavatar/ahsite5.jpg

 

Det jeg lurer på er hvordan jeg kan få til at når noen holder over f.eks. "Computer", så kommer det en ekstra meny linje med "Projects", "Guides" osv på linjen under?

 

Takk på forhånd.

Endret 17. desember 2003 av alex100

[PT]

Søk

Søk

Søk

Søk

[alex100]

Søk

Søk

Søk

Søk

Har gjort det. Men alt jeg kommer frem til er vanlige roll-overs. Ikke slik som jeg vil ha.

[magikern]

hvis du har behov å få iebrukere på siden så ikke les videre for IE støtter ikke dette...

 

man kan bruke css2 til å lage det du beskriver over her,

 

det du da må lære deg litt om er bruken av :hover på andre elementer enn "a".

 

f.eks på lister kan du bruker

 

li ul {

display: none;

}

 

li:hover > ul {

display: block;

}

 

 

dette er bare en veldig enkel form, titt på f.eks denne siden for emr info:

http://www.meyerweb.com/eric/css/edge/menus/demo.html

[magikern]

og her:

http://css-discuss.incutio.com/?page=ListMenus

Endret 17. desember 2003 av magikern

[alex100]

Men det må funke i IE da.

[FuLu]

Finnes sikkert mange ferdige scripts der ute som omhandler om dette. Jeg har aldri kodet noe javascript innen sånne meny greier. Men egentlig trengs det ikke så mye avansert, hvis man bare skal ha en dropdown med 1 level menylinker, og ikke noe undermenyer i de linkene igjen. Løsning kan være kombinasjon av CSS og Javascript og litt DOM

 

Regner med at siden din blir litt fixed i bredden, pga designet, da ville jeg gått for at menyen som skal vises under dem være posisjonert med position: absolute; Så får du bruke litt JS onmouseover sak som trigger denne menyen frem med bruk av noe jeg kaller "class-switching". Dvs man bytter CSS klassen til menyen til å vise seg frem f.eks. Mens menyen skal forsvinne ved mouseout og man setter style classes tilbake til hidden eller noe.

 

Teoretisk og utestet kode:

 

Style snutt:
.showme
{
display: block;
}
.hideme
{
display: none;
}

JS snutt:
classSet(object, classname)
{
meny = document.getElementById(object);
meny.class = classname;
}

HTML snutt:
<a href="" onmouseover="classSet('menyobject', 'showme')">Viser menyen under seg</a>
<div class="hideme" id="menyobject" onmouseout="classSet('menyobject', 'hideme')">masse linker og sånt her</div>

 

Ble mest teori, se om jeg kanskje tar meg tid til dette

Endret 17. desember 2003 av FuLu

[FuLu]

Jeg kunne ikke dy meg endte opp med å lage en slags meny popup greie. Nå er vel denne ikke så avansert, og for øyeblikket egner den seg best til slik menyoppsett jeg har nå. Skal den fungere for horisontal meny, så må man skrive litt om, og nå er det passe seint, så orker ikke det før imorra

 

Uansett, første innlegg skrev jeg litt, og skal du finne ut av noe, så er script.js fila tilgjengelig der, så er det bare ta en titt på style.css fila og kildekoden på siden. Ellers kan jeg sikkert forklare imorra.

 

Link: http://home.chello.no/~alexholm/