Edwin V.

  • Home
  • Over Edwin V.
    • Edit
    • Delete
    • Tags
    • Autopost

    CSS tree menu

    De laatste tijd heb ik regelmatig gebruik gemaakt van MygosuMenu voor het weergeven van een tree menu. Helaas mis ik enkele mogelijkheden in het menu en heb daarom zelf iets gemaakt. Om het simpel te houden is het compleet gebaseerd op een lijst structuur. De opmaak gebeurt via CSS en er is een minimale hoeveelheid JavaScript nodig voor het weergeven van het menu.

    De code en een voorbeeld van het menu is te vinden op deze pagina

    Tags » CSS xHTML
    • 19 February 2006
    • Views
    • Permalink
    • 2 responses
    • Like
    • Comment
    about 6 years ago Vincent responded:

    Complimenten voor je menu.

    Erg mooi en clean.

    Ik heb er even mee zitten experimenteren en liep tegen wat dingen op.

    Ik wil het zo maken dat bij een click op een item het item ‘selected’ wordt en er bijvoorbeeld in een hidden field de id van dat item gezet wordt.

    Het lijkt me dat de id=”treeMenuSelect” vervangen moet worden door class=”treeMenuSelect”. De id zal immers al de unieke id van de betreffende node bevatten.

    Wanneer je een node sluit, wordt ook de onclick afgevuurd, terwijl die node niet de ‘selected’ moet worden.

    Heb je misschien wat suggesties hoe ik dit makkelijk in kan bouwen?

    about 6 years ago Edwin V. responded:

    Als ik er vanuit ga dat je van elke a tag in de lijst een item wilt maken, dan kan je de a tags gebruiken voor het opslaan van de id’s.

    In de huidige situatie koppel ik een event handler aan de onclick functie van de a elementen op het moment dat de href hiervan gelijk is aan ‘#’. Zodra je dit if statement weglaat en in de event handler iets toevoegd waarbij de id van het element opgeslagen wordt in een formulier element, heb je denk ik wat je zoekt.

    Deze methode zal het echter niet meer mogelijk maken om de a tags als links te gebruiken. Dit zal je waarschijnlijk niet nodig hebben als je het geselecteerde item ook wilt opslaan in een formulier element. Meestal zal de gebruiker dan de pagina verlaten door het formulier te verzenden.

    Succes!

  • Edwin Vlieg's Space

    Co-founder at MoneyBird, Entrepreneur, Software Engineer.

  • About Edwin Vlieg

    Co-founder at MoneyBird, Entrepreneur, Software Engineer.

  • Subscribe via RSS

    Archive

    2006 (23)
    September (1)
    August (6)
    July (1)
    June (1)
    May (1)
    April (6)
    March (5)
    February (2)
    2005 (2)
    December (1)
    June (1)
    2004 (1)
    September (1)

  • Follow Me

Theme created for Posterous by Obox