Dropline menu

[sniek]

Beste, ik zoek een manier om dit menu om te zetten, in een menu module. Het is me nog niet gelukt. De opbouw is als volgt

[HOOFDPAGINA] [HOOFDPAGINA 2] [HOOFDPAGINA 3]
[2e rij met subpagina's van hoofdpagina 1]

indien er op hoofdpagina 2 word geklikt veranderd de 2e rij, naar subpagina's van hoofdpagina 2, dit ook bij 3 ect.

Ik hoop dat jullie mij kunnen helpen, hieronder mijn menu.

Code: Select all

<div class="nav">

<div class="table">

<ul class="select"><li><a href="#nogo"><span>Home</span>

</a></li></ul>

 

<ul class="select"><li><a href="#nogo"><span>Joseph Turner</span><!--[if IE 7]><!--></a><!--<![endif]-->

 

<div class="select_sub">

            <ul class="sub">

                        <li><a href="#nogo">Fishermen at Sea</a></li>

                        <li><a href="#nogo">The Shipwreck</a></li>

 

                        <li><a href="#nogo">The Vale of Ashburnham</a></li>

                        <li><a href="#nogo">Crossing the Brook</a></li>

            </ul>

</div>

 

</li>

</ul>

 

<ul class="current"><li><a href="#nogo"><span>John Constable</span><!--[if IE 7]><!--></a><!--<![endif]-->

 

<div class="select_sub show">

 

            <ul class="sub">

                        <li><a href="#nogo">The Hay Wain</a></li>

                        <li><a href="#nogo">Brighton Beach</a></li>

                        <li><a href="#nogo">Malvern Hall</a></li>

                        <li><a href="#nogo">Salisbury Cathedral</a></li>

                        <li><a href="#nogo">Weymouth Bay</a></li>

 

            </ul>

</div>

 

</li>

</ul>

 

 

<ul class="select"><li><a href="#nogo"><span>Henri Matisse</span><!--[if IE 7]><!--></a><!--<![endif]-->

 

<div class="select_sub">

            <ul class="sub">

                        <li><a href="#nogo">The Girl with Green Eyes</a></li>

 

                        <li><a href="#nogo">The Dream</a></li>

                        <li><a href="#nogo">Woman in Blue</a></li>

                        <li><a href="#nogo">The Yellow Dress</a></li>

                        <li><a href="#nogo">The Piano Lesson</a></li>

            </ul>

</div>

 

</li>

 

</ul>

 

 

<ul class="select"><li><a href="#nogo"><span>Paul Cezanne</span><!--[if IE 7]><!--></a><!--<![endif]-->

 

<div class="select_sub">

            <ul class="sub">

                        <li><a href="#nogo">The Large Bathers</a></li>

                        <li><a href="#nogo">Onions and Bottles</a></li>

                        <li><a href="#nogo">Mardi Gras</a></li>

 

                        <li><a href="#nogo">Still Life</a></li>

                        <li><a href="#nogo">Boy in a Red Waistcoat</a></li>

            </ul>

</div>

 

</li>

</ul>

</div>

</div>

CSS:

Code: Select all

.nav {
height:26px; 
position:relative; 
font-family:arial, verdana, sans-serif; 
font-size:11px; 
width:870px; 
z-index:500;
}

.nav .table {
display:table; 
margin:0 auto;
}

.nav .select,
.nav .current {
margin:0; 
padding:0; 
list-style:none; 
display:table-cell; 
white-space:nowrap;
}

.nav li {
margin:0; 
padding:0; 
height:auto; 
float:left;
}

.nav .select a {
display:block; 
height:26px; 
float:left; 

text-decoration:none; 
line-height:26px; 
white-space:nowrap; 
color:#511670;
font-size:14px;
font-weight:300;
margin:0 15px;
}

.nav .current a {
display:block; 
height:26px; 
float:left; 
background: url(images/left.png); 
text-decoration:none; 
line-height:26px; 
margin:0 15px;
white-space:nowrap; 
color:#fff;
font-size:14px;
}


.nav .current a span {
display:block; 
background:url(images/right.png) right top no-repeat;
padding:0 15px;
}

.nav .select a:hover, 
.nav .select li:hover a {
background: url('images/left.png') no-repeat;
color:#fff;
}

.nav .select a:hover span, 
.nav .select li:hover a span {
display:block; 
float:left; 
background:url(images/right.png) no-repeat right top !important; 
cursor:pointer;
padding:0 15px;
}

.nav .select_sub {
display:none;
}

/* IE6 only */
.nav table {
border-collapse:collapse; 
margin:-1px; 
font-size:1em; 
width:0; 
height:0;
}

.nav .sub {
display:table; 
margin:0 auto; 
padding:0; 
list-style:none;
}

.nav .sub_active .current_sub a, 
.nav .sub_active a:hover {
background:transparent; 
color:#f00;
}

.nav .select :hover .select_sub, 
.nav .current .show {
display:block; 
position:absolute; 
width:750px; 
top:26px; 
background-color:#763098; 
padding:0; 
z-index:100; 
left:0; 
text-align:center;
color:#e0a1ff;
}

.nav .current .show {
z-index:10;
}

.nav .select :hover .sub li a, 
.nav .current .show .sub li a {
display:block; 
float:left; 
background:transparent; 
padding:0 10px 0 10px; 
margin:0; 
white-space:nowrap; 
border:0; 
color:#e0a1ff;
font-size:11px;
}

.nav .current .sub li.sub_show a {
color:#088; 
cursor:default; 
background-color:#763098;

}

.nav .select :hover .sub li a:hover, 
.nav .current .sub li a:hover {
visibility:visible; 
color:#fff; 
background-color:#763098;
font-style:italic;
font-size:11px;
}

[M@rtijn]

Waar is überhaupt je CSS?

[sniek]

Ik heb gelijk even de css toegevoegd.
Overigens heb ik dit voorbeeld gebruikt.
http://www.cssplay.co.uk/menus/pro_dropline.html

[M@rtijn]

En heb je ook een voorbeeld van wat er mis gaat? (link naar de website)

[sniek]

In statische html gaat er eigenlijk niks mis, het probleem is dat ik niet weet hoe ik dit precies omzet naar een menu in cmsms. dus eigenlijk is mijn vraag of iemand dit zou kunnen omzetten

[M@rtijn]

Oftewel, je hebt nog helemaal niets en hoopt dat er nu iemand een compleet uitgewerkte casus aanreikt.

Kan je verklappen, dat dat hem niet wordt. (al kan je natuurlijk altijd iemand inhuren om het te doen)

Tip: Lees de CMSMS handleiding eens door, lees de Menu Manager-help door, bekijk de standaard template's en zie hoe het werkt. Pas dat toe op jou gewenste CSSplay template en klaar!

[Dr.CSS]

You need one like this...

http://dezertdesign.com/five/