Hi, I am building a site using Zurb Foundation and am making use of the inbuilt top-bar menu classes they provide.

Code: Select all

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
    </li>
  </ul>
  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li><a href="index.php">Home</a></li>
      <li><a href="about.php">About us</a></li>
      <li class="has-dropdown">
        <a href="#">Button Dropdown</a>
        <ul class="dropdown">
          <li><a href="#">First link in dropdown</a></li>
          <li class="active"><a href="#">Active link in dropdown</a></li>
        </ul>
      </li>
    </ul>
  </section>
</nav>

And I am trying to get CouchCMS to output code in a similar form in order for it to make use of these pre-existing classes. I know I can control most of the class names, however I am wondering about level (level0, level1, and so on for the dropdown.) Is there something I'm missing?

[KK]

Hi,

If the markup produced by cms:menu does not suit your purpose, you can use the cms:nested_pages tag to control every bit of HTML outputted (cms:menu internally actually makes use of cms:nested_pages).

As an example (taken form the docs http://www.couchcms.com/docs/tags-refer ... pages.html), please take a look at the following piece of code -

Code: Select all

<cms:nested_pages masterpage='index.php' extended_info='1' >
   <cms:if k_level_start >
      <cms:if k_level='0'>
          <ul class="my-menu-class-1 my-menu-class-2" id="my-menu-id">
      <cms:else />
          <ul>
      </cms:if>
   </cms:if>
   
   <cms:if k_element_start >
      <li id="item-<cms:show k_nestedpage_name />" class="level-<cms:show k_level/><cms:if k_total_children> has-submenu</cms:if><cms:if k_first_child> first</cms:if><cms:if k_last_child> last</cms:if><cms:if k_is_active> active</cms:if><cms:if k_is_current> current</cms:if>">
      <a href="<cms:show k_menu_link />"><cms:show k_menu_title /></a>
   </cms:if>
   
   <cms:if k_element_end ></li></cms:if>
   <cms:if k_level_end ></ul></cms:if>
</cms:nested_pages>

The code above produces the exact equivalent of what the following would produce using cms:menu tag -

Code: Select all

<cms:menu masterpage='index.php' menu_class='my-menu-class-1 my-menu-class-2' menu_id='my-menu-id' first_class='first' last_class='last' active_trail_class='active' selected_class='current'  />

Hope this helps.

Solved this finally, posting solution for others that are looking, this will make Couch output HTML that mostly works with the top-bar for foundation.

Code: Select all

            <cms:nested_pages masterpage='nestedpage.php' extended_info='1' >
               <cms:if k_level_start >
                  <cms:if k_level='0'>
                      <ul class="right">
                  <cms:else />
                      <ul class="dropdown">
                  </cms:if>
               </cms:if>
               
               <cms:if k_element_start >
                  <li id="item-<cms:show k_nestedpage_name />" class="<cms:if k_total_children> has-dropdown</cms:if><cms:if k_is_active> active</cms:if><cms:if k_is_current> current</cms:if>">
                  <a href="<cms:show k_menu_link />"><cms:show k_menu_title /></a>
               </cms:if>
               
               <cms:if k_element_end ></li></cms:if>
               <cms:if k_level_end ></ul></cms:if>
            </cms:nested_pages>

Thanks for the help, best license I've ever paid for!

[KK]

You are welcome
And thanks for sharing you solution.