/ Forside / Teknologi / Udvikling / Java Scripts / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
Java Scripts
#NavnPoint
molokyle 5410
Klaudi 2799
smorch 2439
kim 1360
Harlekin 1134
bentjuul 984
gibson 800
severino 695
Random 675
10  konsulent.. 626
Menu collapse - ikke drop down
Fra : Paul S


Dato : 24-05-09 10:42

Hej
Jeg har uden held ledt efter et eksempel på en fast menu, der
vises i siden og som lukker op for undermenuen når en rod-punkt
klikkes.

Struktur:
Item 1
Item 2
- Item 2.1
- Item 2.2
Item 3
- Item 3.1
- Item 3.2
Item 4

Start udseende:
Item 1
Item 2
Item 3
Item 4

klik på Item 2
Item 1
Item 2
- Item 2.1
- Item 2.2
Item 3
Item 4

klik på Item 3
Item 1
Item 2
Item 3
- Item 3.1
- Item 3.2
Item 4

Er der nogen, der har et eksempel eller kan fortælle hvordan man
gør det ?

mvh Paul S

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

 
 
Birger Sørensen (24-05-2009)
Kommentar
Fra : Birger Sørensen


Dato : 24-05-09 11:03

Efter mange tanker skrev Paul S:
> Hej
> Jeg har uden held ledt efter et eksempel på en fast menu, der
> vises i siden og som lukker op for undermenuen når en rod-punkt
> klikkes.
>
> Struktur:
> Item 1
> Item 2
> - Item 2.1
> - Item 2.2
> Item 3
> - Item 3.1
> - Item 3.2
> Item 4
>
> Start udseende:
> Item 1
> Item 2
> Item 3
> Item 4
>
> klik på Item 2
> Item 1
> Item 2
> - Item 2.1
> - Item 2.2
> Item 3
> Item 4
>
> klik på Item 3
> Item 1
> Item 2
> Item 3
> - Item 3.1
> - Item 3.2
> Item 4
>
> Er der nogen, der har et eksempel eller kan fortælle hvordan man
> gør det ?
>
> mvh Paul S

Drop down, popup, collapse, foldeud...
Jeg er ikke lige sikker på, at der er den helt store forskel.
Prøv at se på Jørgen Farum Jensens udmærkede sider
http://webdesign101.dk/
http://webdesign101.dk/navigation/

Du kan få unde-menuer til at gemme sig og vise sig ved enten hover
eller klik.
Hvis man vil bruge hover, kan det konstrueres med css.
Hvis man vil have at den besøgende skal klikke for at se undermenuen,
skal man bruge en eller anden form for clientside scripting - aka
javascript.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Jørgen Farum Jensen (24-05-2009)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 24-05-09 15:35

Birger Sørensen skrev:
> Efter mange tanker skrev Paul S:
>> Hej
>> Jeg har uden held ledt efter et eksempel på en fast menu, der
>> vises i siden og som lukker op for undermenuen når en rod-punkt
>> klikkes.
>>
>> Struktur:
>> Item 1
>> Item 2
>> - Item 2.1
>> - Item 2.2
>> Item 3
>> - Item 3.1
>> - Item 3.2
>> Item 4
>>
>> Start udseende:
>> Item 1
>> Item 2
>> Item 3
>> Item 4
>>
>> klik på Item 2
>> Item 1
>> Item 2
>> - Item 2.1
>> - Item 2.2
>> Item 3
>> Item 4
>>
>> klik på Item 3
>> Item 1
>> Item 2
>> Item 3
>> - Item 3.1
>> - Item 3.2
>> Item 4
>>
>> Er der nogen, der har et eksempel eller kan fortælle hvordan man
>> gør det ?
>>
>> mvh Paul S
>
> Drop down, popup, collapse, foldeud...
> Jeg er ikke lige sikker på, at der er den helt store forskel.
> Prøv at se på Jørgen Farum Jensens udmærkede sider
> http://webdesign101.dk/
> http://webdesign101.dk/navigation/

Eller mere præcist
http://webdesign101.dk/xhtml/navigation/listemenuer/

Det er godt nok en oldgammel sag, men den kan vel
bruges som proof of concept.


--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

Martin (24-05-2009)
Kommentar
Fra : Martin


Dato : 24-05-09 20:02

Paul S wrote:
> Hej
> Jeg har uden held ledt efter et eksempel på en fast menu, der
> vises i siden og som lukker op for undermenuen når en rod-punkt
> klikkes.

[SNIP menu]

> Er der nogen, der har et eksempel eller kan fortælle hvordan man
> gør det ?

Hvis du kalder dem for fx.

<div id="menu">
<ul class="level1">
<li>Punkt 1
<ul class="level2">
<li>Punkt 1.1</li>
<li>Punkt 1.2</li>
</ul>
</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
<ul class="level2">
<li>Punkt 3.1</li>
<li>Punkt 3.2</li>
</ul>
</li>
</ul>
</div>

Så kan denne måske bruges

$(function() {
var menu = 'div#menu';
$(menu + ' ul.level2').addClass('hideme');
$(menu + ' ul.level2 li.selected')
    .parent()
    .show()
    .parent()
    .addClass('selected');

$(menu + ' ul.level1 li:has(ul)')
.mouseover(function() {
    $(menu + ' ul.level2')
       .hide();
       $(this)
       .mouseover(function() {
          return ;
       })
       .children()
       .show();
})
});

Kræver jquery
http://jquery.com/


1: Dog så fjerner undermenuen sig ikke når musen er væk
2: Ovenstående er med mouseover, men hvis du ændrer "mouseover" til
"click" istedet, så virker det med klik
3: Et eksempel kan ses her
<http://aarhof.eu/newsgroup/clientside/levelmenu/>

Søg
Reklame
Statistik
Spørgsmål : 177558
Tips : 31968
Nyheder : 719565
Indlæg : 6408914
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste