Hoe kan je je keuzemenu van 2 lagen naar 3 lagen krijgen

hulpvragertje · 4 apr 2013

Hallo,

Ik heb een website met keuzemenu waar 2 lagen in zitten, maar nu wil ik graag er nog een laag achter zetten. Ik heb voor het maken van dit menu hulp van iemand gehad, dus ik weet niet goed hoe ik dat nu in 3 lagen kan krijgen.
Dus wat wil ik: bv ik heb het keuzemenu en dan kunnen ze kiezen voor bv massages. (1e laag), dan komen de verschillende soorten massages (2e laag) en dan wil ik achter die massages nog een pagina hebben met extra informatie over die massages (3e laag).

Wat staat er nu in mijn css

<script language="JavaScript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" ie_does_hover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" ie_does_hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

En dan in html

<div class="left">
<ul id="nav">
<li><a href="index.html">De naam praktijk</a></li>
<li><a href="nieuws.html">Nieuws</a></li>
<li><a href="voorstellen.html">Even voorstellen</a></li>
<li><a href="winkeltje.html">Mijn winkeltje</a></li>
<li><a href="soorten%20massages.html">Soorten massages</a>
<ul>
<li><a href="energetische%20massage.html">Energetische massage</a></li>
<li><a href="kindermassage.html">Kinder massage</a></li>
<li><a href="voetmassage.html">Voetmassage</a></li>
<li><a href="massage%20met%20olie.html">Massage met olie</a></li>
<li><a href="hotstonemassage.html">Hotstonemassage</a></li>
</ul></li>

Ik zou het héél fijn vinden als jullie me kunnen helpen.

csshunter · 5 apr 2013

Hoi hulpvragertje,
Ik denk niet dat het stuk <script language="JavaScript">...</script> in de css staat, want dat is javascript dat waarschijnlijk in de <head> van de pagina staat.

Dit script is een aanvulling op de css, maar is niet de css zelf. Die zal in een afzonderlijk .css-stylesheet staan.
Maar ... dit script is alleen als aanvulling nodig voor de browser Internet Explorer, en dan voor de versie IE6 en eerder.
Intussen wordt Internet Explorer 6 door niemand meer gebruikt, en met ingang van IE7 is het niet meer nodig; en ook IE7 komt intussen niet meer in de browser-statistieken voor.
Kortom: dit hele script is overbodig en kan gewoon weggelaten worden.

De html voor 2 lagen is nu als principe, ingesprongen weergegeven:

HTML:

<div class="left">
    <ul id="nav"><!-- blok met hoofdmenu (1e laag) -->
        <li><a href="index.html">Home</a></li>
        <li><a href="nieuws.html">Nieuws</a></li>
        <li><a href="soorten.html">Soorten</a>
            <ul><!-- blok met submenu (2e laag) -->
                <li><a href="voetmassage.html">Voetmassage</a></li>
                <li><a href="hand.html">Handmassage</a></li>
                <li><a href="soort3.html">Soort 3</a></li>
            </ul>
        </li>
        <li><a href="nogiets">Nog iets</a></li>
    </ul>
</div>

De html voor 3 lagen volgt hetzelfde principe, alleen komt er nu een trappetje bij: een nieuw <ul>-blok binnen een list-item <li> van de tweede laag.
Bijvoorbeeld:

HTML:

<div class="left">
    <ul id="nav"><!-- blok met hoofdmenu (1e laag) -->
        <li><a href="index.html">Home</a></li>
        <li><a href="nieuws.html">Nieuws</a></li>
        <li><a href="soorten.html">Soorten</a>
            <ul><!-- blok met submenu (2e laag) -->
                <li><a href="voetmassage.html">Voetmassage</a>
                    <ul><!-- blok met sub-submenu (3e laag) -->
                        <li><a href="lvoet.html">Linkervoet</a></li>
                        <li><a href="rvoet.html">Rechtervoet</a></li>
                        <li><a href="bvoet.html">Beide voeten</a></li>
                    </ul>
                 </li>
                <li><a href="hand.html">Handmassage</a></li>
                <li><a href="soort3.html">Soort 3</a></li>
            </ul>
        </li>
        <li><a href="nogiets">Nog iets</a></li>
    </ul>
</div>

Vervolgens zal in de css een aanvulling moeten komen voor de <ul>'s en <li>'s van de derde laag.
De manier waarop hangt ervan af hoe de andere lagen zijn opgebouwd (bv. of het een horizontaal of verticaal uitklappend menu is), en hoe de derde laag moet uitklappen (als de 1e laag horizontaal is en de 2e laag naar beneden gaat, kan bv. de 3e laag er rechts naast komen, enz.).

Met vriendelijke groet,
CSShunter

hulpvragertje · 5 apr 2013

Aanvullende info

Het menu staat nu aan de linkerkant van de pagina en het "uitklapgedeelte" komt dan naast de eerste kolom rechts, dus ik denk dat de 3e laag daar dan weer naast moet komen.

Ik ga nu het stukje vervangen wat ik had door het stukje wat jij mij gegeven hebt en hoop dat het dan goed komt. Zo niet, dan kom ik nog even vragen hoor, want ik ben wat dat betreft een leek.

Dank je wel voor de hulp zover en ik zou het fijn vinden als je nog die aanvulling zou kunnen geven. Of heb je dan nog meer info nodig??

Groetjes en een fijne dag

hulpvragertje · 5 apr 2013

Css

Ik denk dat dit dan de info is die je ook nog nodig hebt

body, html
{
margin: 0 auto;
height: 100%;
text-align: left;
font-family: verdana;
font-size: 12px;
color: blue;
background: url(images/background.jpg);
background-attachment: fixed;
}

div.container
{
display: block;
position: absolute;
background-color: #F1F0FF;
width:900px;
margin: 0 auto;
margin-left: -450px;
margin-top: 10px;
left: 50%;
border:3px double blue;
}

div.header
{
background: url(images/header.jpg);
height: 120px;
padding:0.5em;
border-bottom: 1px solid blue;
clear:left;
}
div.footer
{
padding:0.5em;
font-size: 100%;
font-family: verdana;
color:white;
background-color:#B3B2FE;
border-top: 1px solid blue;
clear:left;
}
div.sitemeter
{
padding:0.5 em;
background-color:#B3B2FE;
border-top: 1px solid blue;
clear:left;
}

h1.header
{
padding:0;
margin:0;
}

div.left
{
background-color: #F1F0FF;
background-repeat: repeat-y;
float:left;
width:200px;
margin:0 auto;
min-height: 100%;
text-align: center;
}

div.inhoud
{
background-color: #F1F0FF;
margin-left:190px;
border-left: 1px solid blue;
padding:1em;
}
div.content
{
background-color: #F1F0FF;
margin-left:190px;
border-left: 1px solid blue;
padding:1em;
}

#nav, #nav ul, #nav ul ul{
padding: 0;
margin: 0;
list-style: none;
background: url(none.gif) repeat 0 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 85%;
}

#nav{
width: 160px;
margin-top: 60px;
margin-left: 15px;
}

#nav li{
width: 160px;
}

#nav ul{
position: absolute;
width: 135px;
left: -1000px;
margin: -23px 0 0 159px;
font-size: 100%;
}

* html #nav ul{
margin: -23px 0 160px;
}

#nav li li{
width: 190px;
}

#nav ul ul{
width: 140px;
margin: -23px 0 0 100px;
font-size: 100%;
}

* html #nav ul ul{
margin: -23px 0 0 100px;
}

#nav li li li{
width: 140px;
}

#nav li:hover ul, #nav li.ie_does_hover ul{
left: auto;
}

#nav li:hover ul ul, #nav li.ie_does_hover ul ul{
left: -1000px;
}

#nav ul li:hover ul, #nav ul li.ie_does_hover ul{
left: auto;
}

#nav a {
display: block;
text-decoration: none;
padding: 2px 4px 3px 4px;
margin: 2px;
}

#nav a:link, #nav a:visited{
background: url(images/knop_2.jpg);
border: 1px solid #B3B2FE;
color: #0000FF;
}

#nav a:hover, #nav a:active{
background: url(images/knop_3.jpg);
border: 1px solid #0000FF;
color: #FFFFFF;
}

table.one
{
border-collapse: separate;
border-spacing: 13px;
font-family: verdana;
font-size: 11px;
color: blue;
}

table.celzouten
{
border-collapse: seperate;
border-spacing: 10px;
width: 100%;
font-family: verdana;
color: blue;
font-size: 11px;
}

table.encaustic
{
border-spacing: 15px;
width: 99%;
font-family: verdana;
color: blue;
font-size: 11px;
}

table.winkeltje
{
width: 99%;
font-family: verdana;
color: blue;
font-size: 11px;
border-color: blue;
}
table.workshops
{
width: 100%;
font-family: verdana;
color: blue;
font-size: 11px;
border-color: blue;
}

#beeldcontainer
{
height: 225px;
width: 300px;
}

h2
{
font-family: verdana;
color: blue;
}

p.inhoud
{
font-family: verdana;
text-align: justify;
color: blue;
font-size: 12px;
}

p.text
{
font-family: verdana;
text-align: justify;
color: lightblue;
font-size: 12px;
}

ul.lijst
{
font-family: verdana;
color: blue;
font-size: 12px;
}

li.lijst
{
font-family: verdana;
font-size: 12px;
color: blue;
}

csshunter · 6 apr 2013

Aha, in deze css is al rekening gehouden met een 3e laag.

Bij in de html zetten van de nieuwe laag gaat het meeste al goed.
Het enige dat nu hoeft te gebeuren, is wat aanpassing van de linker-marge van de derde laag.
Daar staat:

Code:

#nav ul ul {
   width: 140px;
   margin: -23px 0 0 100px;
   font-size: 100%;
}

Dat kan worden:

Code:

#nav ul ul {
   width: 140px;
   margin: -23px 0 0 190px;
   font-size: 100%;
}

Toelichting
Bij 4 maten achter een bepaalde css-eigenschap gaan die met de klok mee (en beginnen bovenaan), bv. bij een margin:

1e getal: margin-top
2e getal: margin-right
3e getal: margin-bottom
4e getal: margin-left

Hier ging het om de margin-left van het blok, dus het 4e getal is aangepast.

Met vriendelijke groet,
CSShunter

hulpvragertje · 6 apr 2013

Oh fantastisch dank je wel voor je hulp. Ik ga het proberen.
Een héél fijn weekend.

Groetjes van mij :thumb:

hulpvragertje · 6 apr 2013

Hallo CSS hunter,

Het is gelukt :thumb: :thumb: geweldig, ik ben helemaal happy

Dus nogmaals dank je wel!!! :love:

Hoe kan je je keuzemenu van 2 lagen naar 3 lagen krijgen

hulpvragertje

Gebruiker

csshunter

Meubilair

hulpvragertje

Gebruiker

hulpvragertje

Gebruiker

csshunter

Meubilair

hulpvragertje

Gebruiker

hulpvragertje

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy