Hello

I am in the process of trying to convert my website to use couch but I've run into a problem with the menu.

I don't know how to output the menu as follows:

Code: Select all

<div id="nav" class="menu">
   <ul>
      <li class="dropdown"><a href="Page URL" title="Page Title">Page Title</a>
         <ul class="dropdown-menu" role="menu">
            <li class="sm"><a href="Page URL" title="Page Title">Page Title</a></li>
         </ul>
      </li>
   </ul>
</div>

[KK]

Hi Nick,

I assume you are using nested-pages for the menu. Is that correct?

Yes that's right

[KK]

Ok, thanks.
Can you please expand the desired HTML markup for the menu you posted above to include a couple of more items? (e.g. at least two top level menu-items and two in their dropdowns).

Please post the revised markup and I'll get you the Couch code that'd output it dynamically.

Thanks.

Code: Select all

<div id="nav" class="menu">
   <ul>
      <li class="dropdown"><a href="/home" title="Home">Home</a>
         <ul class="dropdown-menu" role="menu">
            <li class="sm"><a href="/tiny-tots-disco-party" title="Tiny Tots Disco Party">Tiny Tots Disco Party</a></li>
            <li class="sm"><a href="/games-prizes-party" title="Children’s Disco Party">Children’s Disco Party</a></li>
            <li class="sm"><a href="/non-stop-disco-party" title="Tweens and Teens">Tweens and Teens</a></li>
            <li class="sm"><a href="/primary-school-discos" title="Primary Schools">Primary Schools</a></li>
            <li class="sm"><a href="/secondary-school-discos" title="Secondary Schools">Secondary Schools</a></li>
            <li class="sm"><a href="/karaoke-parties" title="Karaoke Parties">Karaoke Parties</a></li>
            <li class="sm"><a href="/fun-days-fetes" title="Fun Days & Fetes">Fun Days & Fetes</a></li>
            <li class="sm"><a href="/holiday-resorts" title="Holiday Resorts">Holiday Resorts</a></li>
         </ul>
      </li>
      <li class="dropdown"><a href="/party-checklist" title="Checklist">Checklist</a> </li>
      <li class="dropdown"><a href="/photo-gallery" title="Gallery">Gallery</a> </li>
      <li class="dropdown"><a href="/coverage-area" title="Coverage">Coverage</a>
         <ul class="dropdown-menu" role="menu">
            <li class="sm"><a href="/kids-disco-party-bridgwater" title="Bridgwater">Bridgwater</a></li>
            <li class="sm"><a href="/kids-disco-party-burnham-on-sea" title="Burnham-on-Sea">Burnham-on-Sea</a></li>
            <li class="sm"><a href="/kids-disco-party-castle-cary" title="Castle Cary">Castle Cary</a></li>
            <li><a href="/kids-disco-party-chard" title="Chard">Chard</a></li>
            <li><a href="/kids-disco-party-cheddar" title="Cheddar">Cheddar</a></li>
            <li class="sm"><a href="/kids-disco-party-cullompton" title="Cullompton">Cullompton</a></li>
            <li class="sm"><a href="/kids-disco-party-glastonbury" title="Glastonbury">Glastonbury</a></li>
            <li><a href="/kids-disco-party-minehead" title="Minehead">Minehead</a></li>
            <li class="sm"><a href="/kids-disco-party-north-petherton" title="North Petherton">North Petherton</a></li>
            <li><a href="/kids-disco-party-taunton" title="Taunton">Taunton</a></li>
            <li><a href="/kids-disco-party-tiverton" title="Tiverton">Tiverton</a></li>
            <li><a href="/kids-disco-party-watchet" title="Watchet">Watchet</a></li>
            <li><a href="/kids-disco-party-wedmore" title="Wedmore">Wedmore</a></li>
            <li class="sm"><a href="/kids-disco-party-wellington" title="Wellington">Wellington</a></li>
            <li><a href="/kids-disco-party-wells" title="Wells">Wells</a></li>
            <li class="sm"><a href="/kids-disco-party-weston-super-mare" title="Weston-super-Mare">Weston-super-Mare</a></li>
            <li><a href="/kids-disco-party-yeovil" title="Yeovil">Yeovil</a></li>
         </ul>
      </li>
      <li class="dropdown"><a href="/blog" title="Blog">Blog</a> </li>
      <li class="dropdown"><a href="/pricing" title="Pricing">Pricing</a> </li>
      <li class="dropdown"><a href="/contact-us" title="Contact">Contact</a> </li>
   </ul>
</div>

[KK]

Haven't tested it out but, I think, the following code should do it (set the 'masterpage' to your nestedpages template)-

Code: Select all

<cms:nested_pages masterpage='index.php' extended_info='1' >
   <cms:if k_level_start >
      <cms:if k_level='0'>
          <ul>
      <cms:else />
          <ul class="dropdown-menu" role="menu">
      </cms:if>
   </cms:if>
   
   <cms:if k_element_start >
      <cms:if k_level='0'>
          <li class="dropdown">
      <cms:else />
          <li class="sm">
      </cms:if>
      <a href="<cms:show k_menu_link />" title="<cms:show k_menu_title />"><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>

For reference, you can see the docs that shows how to create such a menu at
http://www.couchcms.com/docs/tags-refer ... pages.html

Hope it helps.