Subpagina's uit navigatie ergens anders tonen

Buur

Is het mogelijk om de subnavigatie ergens anders te tonen?

Omdat de subitems altijd genest staan in de [li] van de parent, lijkt het mij niet mogelijk om de subitems in de sidebar, of ergens onderaan de pagina te laten verschijnen?

Voorbeeld, dit is wat % toolbar % heeft gegenereerd (ingekorte schrijfwijze uiteraard):

[ul]
  [li][a href]Pagina 1[/a][/li]
  [li][a href]Pagina 2[/a]
    [ul]
      [li][a href]Subpagina 1[/a][/li]
      [li][a href]Subpagina 2[/a][/li]
      [li][a href]Subpagina 3[/a][/li]
    [/ul]
  [/li]
  [li][a href]Pagina 3[/a][/li]
[/ul]

Stel, ik heb op 'Pagina 2' geklikt, en ik wil dat de navigatie (dus de links) naar de 3 subpagina's in de Sidebar, of in een kolom die ik in het thema daarvoor beschikbaar stel laten verschijnen. Is dat mogelijk?

Of is het mogelijk om enkel de navigatie naar de subpagina's te laten zien? Dan zou ik ergens anders in mijn thema nog een andere % toolbar % kunnen plaatsen...

JonasThemes

Dat is heel goed mogelijk en wordt ook al door verschillende theme developers toegepast.

De truc is om de unsorted list te wrappen in een div. Geef dit div een eigen naam (id). Door nu met CSS telkens vanaf die div id het menu te stijlen zal dit enkel effect hebben op dit 2e navigatie gedeelte.

Succes

Buur

on 1274301395:

Dat is heel goed mogelijk en wordt ook al door verschillende theme developers toegepast.

De truc is om de unsorted list te wrappen in een div. Geef dit div een eigen naam (id). Door nu met CSS telkens vanaf die div id het menu te stijlen zal dit enkel effect hebben op dit 2e navigatie gedeelte.

Succes

Het stylen lukt me misschien wel, mits ik de afzonderlijke subnavigaties van een ID kan voorzien, en dat lukt me niet. Zou je me misschien een theme kunnen laten zien waarin het gebeurt, of zou je me kunnen laten zien wat het resultaat van % toolbar % zou moeten zijn in mijn voorbeeld hierboven?

JonasThemes

Je kan niet de afzonderlijke subnavigatie van een aparte id voorzien. Je zal de hele navigatie in de index.html file moeten wrappen in een div.

SeyDoggy is zo'n beetje de uitvinder van split navigation en veel van zijn thema's maken hier gebruik van.

Buur

Eh, bedoel je dit?

[div id="navigation"]
  [ul]
    [li][a href]Pagina 1[/a][/li]
    [li][a href]Pagina 2[/a]
      [ul]
        [li][a href]Subpagina 1[/a][/li]
        [li][a href]Subpagina 2[/a][/li]
        [li][a href]Subpagina 3[/a][/li]
      [/ul]
    [/li]
    [li][a href]Pagina 3[/a][/li]
  [/ul]
[/div]

Heel leuk, maar als ik dan bijvoorbeeld dit doe:

div#navigation li {
  display: none;
}

div#navigation li li {
  display: block;
}

dan kan ik lang zoeken naar mijn subnavigatie, maar dan vind ik het echt niet!

Iemand een idee?

Oh ik zal morgenochtend eens naar seyDesign kijken. Wellicht dat ik daar mijn antwoord kan vinden! In elk geval zeer bedankt voor de snelle antwoorden, steeds!

JonasThemes

#toolbar_vertical ul li { /*hides the top level*/
    position: relative;
    display: inline;
    margin: 0;
    padding: 0;
    height: 0;
}
 
#toolbar_vertical ul li a { /*hides the top level*/
    display: none;
}

Stukje code van Seydoggy waarin je kunt zien hoe hij het top level onzichtbaar maakt.

Henk Vrieselaar

Hoe Adam het doet heb ik niet gezien, maar zoals Jonas schrijft moet je twee verschillende div's maken, dus bijvoorbeeld een

[div id="navcontainer1"]

en een

[div id="navcontainer2"]

Bij die tweede moet je dan de eerste level op display:none; zetten *
En bij de eerste (navcontainer1) de navigatie voor de tweede en volgende levels op display:none; *

Die tweede div (voor de subitems dus) kun je dan in de index.html op een andere plaats in je website zetten, bv in de sidebar, in de footer of waar dan ook.
Heel veel theme-developers maken gebruik van dit trucje. Ondergetekende ook, bijvoorbeeld hier en hier en hier en hier en (Sttt, die moet ik nog uitbrengen, maar is nog niet klaar) deze. Maar ook veel themes van Elixer, zoals zijn gisteren uitgekomen Flame.

* In de bijlage zie je hoe de css van zo'n split-navigatie kan worden opgebouwd (is maar een voorbeeld, er zijn meer mogelijkheden).

Succes,
Henk

Buur

Tja, ik snap het. Ik vind het nogal een behoorlijk omslachtige workaround. Zo van, laten we twee keer de complete navigatie in de code zetten, maar laten we daar maar minder dan de helft van zien... Niet echt handig, en ik vraag me ook af wat zoekmachines van zoiets vinden.

Maar in elk geval bedankt voor de tips! Er zit helaas niets anders op dan het dan maar op deze manier op te lossen.

JonasThemes

on 1274383064:

Zo van, laten we twee keer de complete navigatie in de code zetten.

Ik heb al meerdere keren gevraagd om een extra navigatie tag waarmee je bepaalde levels kunt tonen. Maar helaas gaat het niet zo rap met nieuwe features

Henk Vrieselaar

on 1274386636:

Maar helaas gaat het niet zo rap met nieuwe features

Inderdaad. Het aanstaande RW 5.0 is er ook niet mee uitgerust en naar mijn gevoel heeft het ook geen prioriteit bij RMS. Maar met de bovenstaande methode werkt het prima, hoor
We weten al bijna niet beter meer...

Henk Vrieselaar

on 1274386636:

Maar helaas gaat het niet zo rap met nieuwe features

... vervolg. Datzelfde geldt natuurlijk voor meer dingen, zoals een vorm van ExtraContent en eventueel Stacks ingebouwd. Zit er voorlopig ook niet in. Het kan best zijn dat RMS met teveel features een bepaald publiek denkt af te stoten omdat het anders te ingewikkeld wordt. En die gebruiker is veelal de beginnende website maker.
Dat soort leuke extra's laten ze dan weer aan de plugin- en themamakers over

Henk Vrieselaar

seyDoggy heeft vandaag een nieuw thema gelanceerd met een nieuwe vorm van split-navigatie: http://www.realmacsoftware.com/forums/index.php/forums/viewthread/35195/

Buur

Voor de mensen die hier ook mee bezig zijn zou ik graag nog even laten zien hoe het werkt. De code die hierboven is verstuurd bevat heel veel regels die naar mijn idee niet nodig zijn? Klopt dat?

Uitgaande van het volgende voorbeeld:

[div id="nav1"]
   &#xto;olbar%
[/div]
[div id="nav2"]
   &#xto;olbar%
[/div]

Stel nu dat je in de eerste navigatie diepere niveaus niet wil laten zien, dan is het natuurlijk voldoende om vanaf dat niveau de [UL] niet meer te tonen, en dat kan met 1 css-regel. In dit voorbeeld blokkeren we alles vanaf het subsub-niveau:

#nav1 ul ul ul {
   display: none;
}

Stel dat we in de tweede navigatie alles onder en inclusief het subsub-niveau willen laten zien:

#nav2 ul {
   list-style: none;
   margin: 0;
   padding: 0;
}
#nav2 li {
   display: inline;
}
#nav2 a {
   display: none;
}
#nav2 ul ul ul a {
   display: block; /* of inline, dat hangt er vanaf of je het naast elkaar of onder elkaar wilt hebben */
}

Omdat CSS de eigenschappen doorgeeft aan de elementen die er onder liggen (vandaar Cascading), zullen de navigatie niveaus dieper dan dit niveau ook weer getoond worden. Wil je dit niet, dan zul je vanaf dat niveau weer de boel moeten blokkeren. In het volgende voorbeeld worden alleen de links uit het subsub-niveau getoond, en niet hun parents, en ook niet hun subpagina's. Aan de regels hierboven voeg je het volgende toe:

#nav2 ul ul ul ul {
   display: none;
}

De truc is dus om alle list elementen geen plaats in te laten nemen, door hun margin en padding op 0 te zetten, en door het inline elementen te maken ipv block elementen. Door de [a]-tags op de door jou gekozen niveau al dan niet aan of uit te zetten, kun je bepalen welk niveau moet worden getoond. Het niveau wordt bepaald door hoe diep de A in de UL structuur zit.

In de voorbeelden die hiervoor naar deze thread zijn gestuurd wordt steeds expliciet voor elk niveau en voor elk element op dat niveau aangegeven of het al dan niet getoond moet worden. Dit maakt het stylesheet overbodig lang (en onoverzichtelijk). Door de 'cascading' eigenschappen van CSS te gebruiken kan het vele malen korter.

Ik hoop dat iemand hier nog wat aan heeft... Zonder jullie hulp was ik er zelf niet uitgekomen, dus bij deze mijn bijdrage. Mocht het niet werken, dan hoor ik het graag.

Henk Vrieselaar

Bedankt.

Nog niet uitgetest, maar ik zie wel dat we zullen 'm toch weer iets langer moeten maken i.v.m. bijvoorbeeld de

#nav2 a:hover

(je wilt toch laten zien waar je met je muis overheen gaat) en eventueel de

#nav2 a:active

En in je code ga je maar tot en met de eerste sublevel. De volgende sublevels ontbreken nu...

Heb je het splitmenu al op deze manier uitgeprobeerd? Ben heel benieuwd, want ik zou het ook graag korter willen maken. In het verleden heb ik dat al eens stap voor stap geprobeerd, maar telkens mislukte dat.

Als je me een PM stuurt met je emailadres wil ik je wel een thema sturen met een split-navigatie. Mag je eens proberen om zoveel mogelijk weg te laten.