We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 20349 ☆ A M B ☆
    • 453 Posts
    Didn’t know where to put this post... BUT..

    Does anyone know where could I find (or how to css) thi kind of menu??!?!

    - menu item1
    - menu item2
    - menu item3
    - menu item4
    - etc...


    ...when a user clicks on "menu item1" he is redirected on "menu item1.html" page.
    On that page there should be menu item1 highlighted and below opened new submenu (something like subcategories)

    Similar menu can be looked here http://www.stunicholls.com/menu/pro_concertinaslide_2.html
    (this one don’t have the option to click the category... only shows the submenu beneath)



    P.S. I’m asking this here because of implementation in wayfinder
      BASE - Web Design Studio
      MODX Ambassador

      Website
      • 16183
      • 1,390 Posts
      The effects are definitely achieved using JavaScript - if not I’ll eat my hat! laugh. There’s lots of free JavaScript menus like this, e.g. using jQuery, which I’d personally use since it would make styling the menus using CSS a relatively simple task, (not to mention how easy it is to get great effects with jQuery with few lines of code). Try googling "javascript slide menu", or "jquery slide menu". I think I had some links...even to video tutorials...if I find any will post them here..but google is your best friend in this case wink

      Once you get the menu you want, you can point WF to your js script file

        • 33992 ☆ A M B ☆
        • 455 Posts
        Creating menu is very simple by wayfinder with &activeParentRowTpl and &hereTpl parameters.

        and about the menu effect, i tried Animated Collapsible DIV.

        It is a jquery plugin which uses COOKIES to show current page and category in menu. it means when visitor expands a category and click on a subcategory, this category will be expanded in new page.
        the demo show you a simple slide but i have seen a nice menu like your link by this plugin.

        The best solution is mixing wayfinder and a  js effect to have a javascript and dynamic menu.
          God loves me. 【ツ】


          MODX.ir (Persian Support)

          Boplo.ir/modx/ (Persian)
          • 20349 ☆ A M B ☆
          • 453 Posts
          Quote from: AHHP at Oct 29, 2008, 10:21 AM


          The best solution is mixing wayfinder and a js effect to have a javascript and dynamic menu.

          that is the final goal smiley

          Will give it a try... if you know any good links... feel free to post them wink
            BASE - Web Design Studio
            MODX Ambassador

            Website
            • 16183
            • 1,390 Posts
            Quote from: Mproject at Oct 29, 2008, 10:45 AM

            that is the final goal smiley

            if you know any good links... feel free to post them wink

            http://blog.evaria.com/2007/jquery-menu-example/
            http://www.vimeo.com/116991
              • 20349 ☆ A M B ☆
              • 453 Posts
              Perfect example of what I’m trying to get -> http://www.vikendplaner.info

              - All subcategories are hidden.
              - When user clicks on a category, it redirects him to that page simultaneously revealing subcategories (highlighting current page).



              I think this is possible with jquery huh rolleyes wink smiley
                BASE - Web Design Studio
                MODX Ambassador

                Website
                • 20349 ☆ A M B ☆
                • 453 Posts
                Quote from: AHHP at Oct 29, 2008, 10:21 AM

                Creating menu is very simple by wayfinder with &activeParentRowTpl and &hereTpl parameters.

                and about the menu effect, i tried Animated Collapsible DIV.

                It is a jquery plugin which uses COOKIES to show current page and category in menu. it means when visitor expands a category and click on a subcategory, this category will be expanded in new page.
                the demo show you a simple slide but i have seen a nice menu like your link by this plugin.

                The best solution is mixing wayfinder and a js effect to have a javascript and dynamic menu.

                UPDATE:
                I succesfully recreated the menu with this effects (found on http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm), but can you please write how to implement that in wayfinder?
                How to write these javascripts links in WF menu?

                <a href="javascript:animatedcollapse.toggle('MenuItem1')">

                vs.
                <a href="javascript:animatedcollapse.toggle('[+wf.link+]')">
                huh
                  BASE - Web Design Studio
                  MODX Ambassador

                  Website
                  • 16183
                  • 1,390 Posts
                  Would these two posts be helpful to show you how to implement in Wayfinder?

                  http://modxcms.com/forums/index.php/topic,26113.msg159505.html#msg159505
                  http://modxcms.com/forums/index.php/topic,27629.0.html

                  They are an implementation of this jquery menu:
                  http://www.i-marco.nl/weblog/jquery-accordion-menu-redux/

                  The effect is same as what you want - an accordion effect

                  cheers/k

                  ps: btw, this is really a wayfinder related question and should probably be moved to wayfinder’s forum?
                    • 20349 ☆ A M B ☆
                    • 453 Posts
                    Quote from: kongondo at Oct 30, 2008, 06:39 AM

                    Would these two posts be helpful to show you how to implement in Wayfinder?
                    Yeap... that helped me alot smiley

                    I still got one problem:
                    - when I click on category it shows me the subcategories (with effect).
                    Ok, at least I know this works smiley

                    The goal is to click on the category (menu item) which redirects me on another page!
                    - On that page the menu with that category should be "opened", thus every subcategory in that category should be revealed...

                    Hope you understand smiley

                    update:
                    explanation with pic’s how MENU should look smiley

                    Homepage



                    When I click on "Putovanja" it redirects me on "domain.com/putovanja". On that page, the menu should look like this:
                    Putovanja
                      BASE - Web Design Studio
                      MODX Ambassador

                      Website
                      • 33992 ☆ A M B ☆
                      • 455 Posts
                      use &parentRowHereTpl and &parentRowTpl parameters, create template like this:
                      <li[+wf.classes+]><span ...... >[+wf.linktext+]»</span>[+wf.wrapper+]</li>


                      all parameters with exapmples exist in wayfinder documentation (assets/snippets/wayfinder/wayfinder.documentation.html)

                      [attach your images here too please]
                        God loves me. 【ツ】


                        MODX.ir (Persian Support)

                        Boplo.ir/modx/ (Persian)