We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Menu Help needed :: help me implementing simple menu from MuddyDogPaws.com

    • 9061
    • 9 Posts
    ersaurabh101 Reply #1, 16 years, 8 months ago
    http://www.muddydogpaws.com/development/wayfinder/examples/example-1.html


    I want to implement this menu
    http://www.muddydogpaws.com/development/wayfinder/examples/example-1.html


    Please guide me in steps. What knowlege i need is -

    where to copy what ? i mean i dont know what to do with

    &parentRowTpl=`cssplay_parentRow`

    Is this the name of chuck ?? and in this chuck do i have to copy the code ?

    but page is showing an odd result, see this
    http://cookasite.com/15j/modx/index.php?id=62


      • 26931
      • 2,314 Posts
      anonymized-26931 Reply #2, 16 years, 8 months ago
      please don’t double post http://modxcms.com/forums/index.php/topic,45075
        • 9061
        • 9 Posts
        ersaurabh101 Reply #3, 16 years, 8 months ago
        i am so sorry, by mistake i did.
          • 26931
          • 2,314 Posts
          anonymized-26931 Reply #4, 16 years, 8 months ago
          no worries smiley
            • 9061
            • 9 Posts
            ersaurabh101 Reply #5, 16 years, 8 months ago
            can you spare a minute to help me on my issue, Sir ?
              • 26931
              • 2,314 Posts
              anonymized-26931 Reply #6, 16 years, 8 months ago
              where to copy what ? i mean i dont know what to do with
              &parentRowTpl=`cssplay_parentRow`
              Is this the name of chuck ?? and in this chuck do i have to copy the code ?
              exactly. in your manager go to "Elements" -> "Manage Elements" -> "Chunks" -> "New Chunks" -> call your chunk e.g. "cssplay_parentRow" and copy and paste the code in the text area -> save

              then place the Wayfinder Snippet call in your template
                • 9061
                • 9 Posts
                ersaurabh101 Reply #7, 16 years, 8 months ago
                I have 2 questions

                Q1> Do i have to write anywhere this statement ?

                &parentRowTpl=`cssplay_parentRow`


                Q2> For next, i will create another new chunk naming cssplay_outer

                and rest will do the same for all..

                am i right huh

                  • 26931
                  • 2,314 Posts
                  anonymized-26931 Reply #8, 16 years, 8 months ago
                  A1> this will then be referenced in your wayfinder call:
                  [[Wayfinder? &startId=`0` &level=`3` &parentClass=`hide` &parentRowTpl=`cssplay_parentRow` &outerTpl=`cssplay_outer` &innerTpl=`cssplay_inner` &rowTpl=`cssplay_row` &outerClass=`menu` &cssTpl=`cssplay_dropdown`]]

                  A2> yes smiley
                    • 9061
                    • 9 Posts
                    ersaurabh101 Reply #9, 16 years, 8 months ago
                    not working, check this

                    http://cookasite.com/15j/modx/index.php?id=62

                    i have placed the snippet call in the template and did what was required for chucks..

                    if u want i can give you my login/password
                      • 26931
                      • 2,314 Posts
                      anonymized-26931 Reply #10, 16 years, 8 months ago
                      okay, here you go (no styling other than for the menu):
                      http://cookasite.com/15j/modx/index.php?id=63

                      1) i created a new template, called it "newTemplate" ( just copy and pasted the minimal template and deleted its own css reference and wayfinder call )

                      2) placed your wayfinder call in the template:
                      [[Wayfinder? &startId=`0` &level=`3` &parentClass=`hide` &parentRowTpl=`cssplay_parentRow` &outerTpl=`cssplay_outer` &innerTpl=`cssplay_inner` &rowTpl=`cssplay_row` &outerClass=`menu` &cssTpl=`cssplay_dropdown`]]


                      3) copied the dropdown css code in the header ( a quick fix because i can’t upload the css files on your server -> your files should be here: http://cookasite.com/15j/modx/assets/templates/wayfinder/dropdown.css ):
                      /* common styling */
.menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:2px 0 100px 0; z-index:100;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}

                      for IE:
                      .menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}

.menu ul li a:hover {color:#fff; background:#36f;}
.menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}
.menu ul li a:hover ul li a:hover ul.left {left:-105px;}


                      but they should actually be placed as css files in assets/templates/wayfinder/dropdown.css & assets/templates/wayfinder/dropdown_ie.css

                      4) created a new ressource "MenuTest" and assigned the template "newTemplate" to it

                      hope i could help to understand the issue smiley