Forum for discussing general topics related to Couch.
2 posts Page 1 of 1
Hi,

I am trying to make a dropdown in my navbar with a megamenu (from YetAnotherMegaMenu) but I can't seem to get it to work.

In plain HTML, this looks like:

Code: Select all
                                      <ul class="col-sm-4 list-unstyled">
                                        <li>
                                          <p><strong>Introductory Science</strong></p>
                                        </li>
                                        <li><a href="#"> Grade 9 Science</a></li>
                                        <li><a href="#"> Grade 10 Science</a></li>
                                      </ul>
                                      <ul class="col-sm-4 list-unstyled">
                                        <li>
                                          <p><strong>Biology</strong></p>
                                        </li>
                                        <li><a href="#"> Grade 11 Biology</a></li>
                                        <li><a href="#"> Grade 12 Biology</a></li>
                                      </ul>
                                      <ul class="col-sm-4 list-unstyled">
                                        <li>
                                          <p><strong>Chemistry</strong></p>
                                        </li>
                                        <li><a href="#"> Grade 11 Chemistry</a></li>
                                        <li><a href="#"> Grade 12 Chemistry</a></li>
                                      </ul>
                                    </div>
                                    <hr>
                                    <div class="row">
                                      <ul class="col-sm-4 list-unstyled">
                                        <li>
                                          <p><strong>Physics</strong></p>
                                        </li>
                                        <li><a href="#"> Grade 11 Physics</a></li>
                                        <li><a href="#"> Grade 12 Physics</a></li>
                                      </ul>
                                      <ul class="col-sm-4 list-unstyled">
                                        <li>
                                          <p><strong>Mathematics</strong></p>
                                        </li>
                                        <li><a href="#"> Grade 9 Mathematics</a></li>
                                        <li><a href="#"> Grade 10 Mathematics</a></li>
                                        <li><a href="#"> Grade 11 Functions</a></li>
                                        <li><a href="#"> Grade 12 Advanced Functions</a></li>
                                        <li><a href="#"> Grade 12 Calculus and Vectors</a></li>
                                        <li><a href="#"> Grade 12 Data Management</a></li>
                                      </ul>

and looks like this:

Image

translated into couch, the code basically looks like:

Code: Select all
                                    <cms:folders masterpage='learn.php' childof='lesson' hierarchical='1' extended_info='1'>
                                        <cms:if k_level_start ><UL class="col-sm-4 list-unstyled"></cms:if>
                                        <cms:if k_element_start ><LI>
                                            <cms:show k_folder_title />
                                        </cms:if>
                                        <cms:if k_element_end ></LI></cms:if>
                                        <cms:if k_level_end ><hr></UL></cms:if>
                                    </cms:folders>


but I can't get it to break into columns, and the result is:

Image

Any advice on how I can fix this?

Hi,

Going by your original markup, you also need to wrap three groups of folders in a "<hr><div class="row">...</div>" block to get the desired result. You can use a variable, say named 'my_count', to keep track of how many groups have been outputted and show the missing <div>s accordingly.

Hope this helps.
2 posts Page 1 of 1