[KK]

None of the pages of menu.php will hold any content (i.e. will all be pointers) so, I think, even this would suffice -

Code: Select all

<?php require_once ('couch/cms.php'); ?>
<cms:template clonable='1' nested_pages='1' >
    
</cms:template>

<?php COUCH::invoke(); ?>

Oh..ok, thanks a lot.
And in the templates for each of the pointed files we would ideally place

Code: Select all

<div id="header">
    <cms:menu masterpage='menu.php' childof='nav1' />
   
    <div id="title">
        <a href="#"><h1>Hannah &amp; Varghese</h1></a>
    </div>
   
    <cms:menu masterpage='menu.php' childof='nav2' />
</div>

& the rest of the code.

Hope I am right.
Thanks again.

[KK]

Best way would be to keep the menu code in a snippet (say named menu.html) and then place the following in each template
<cms:embed 'menu.html' />

This way if you decide to change anything in the menu code, that change would have to be done only at one place (the snippet) and not on all templates.

I'll do that.
But in the case for this header structure, menu.html will also include the title (logo) markup.
One more thing, I have used this code for the drop down menu (with jQuery):

Code: Select all

<script>
$(document).ready(function() {
            $('.mainnav > li').bind('mouseover', openSubMenu);
            $('.mainnav > li').bind('mouseout', closeSubMenu);
            function openSubMenu() {
                $(this).find('ul').css('visibility', 'visible');    
            };
            function closeSubMenu() {
                $(this).find('ul').css('visibility', 'hidden'); 
            };
        });
</script>

Hope Couch won't have a problem with this code.
Thanks a lot.

[KK]

If the JS code works with your static HTML design, it should work the same after porting the design to Couch.

Thanks.

Thanks KK, got it working with your help..
Now, my top level menu items use background images without text using individual classes for each li.

The HTML is:

Code: Select all

<li><a class="hom" href="index.html"><span>Home</span></a></li>
<li><a class="abt" href="about.html"><span>About Us</span></a></li>
etc..

But I am not sure how to specify classes for li's , add extra tags (span) to the li etc., with the generated menu.
Please let me know.
Thanks a lot in advance.

[KK]

The cms:menu tag accepts a lot many parameters that can set classes for individual elements.
Please take a look at http://www.couchcms.com/docs/tags-reference/menu.html

The markup generated by cms:menu, however, remains fairly fixed (i.e. we cannot inject the 'span' tag you mentioned).

Usually this can be offsetted by our CSS styles.
But in case this does not cut ice, we can always fall back upon using cms:nested_pages tag to create the menu markup manually. This gives us 100% control over everything.

So please first try to modify your CSS to work with the HTM generated by cms:menu.
If that does not work, please take a look at http://www.couchcms.com/docs/tags-refer ... pages.html
where we show how to use cms:nested_pages tag to output exactly what cms:menu does. of course, the point is that we can now tweak anything we like.

Hope this helps.

Thank you.
Yes, I do agree that text can be offsetted by css. I will try it so the span tag can be avoided.

But I looked at the http://www.couchcms.com/docs/tags-reference/menu.html page- not sure if I found anything by which we can specify a custom class to each top level list item.
Sorry for missing this.

[KK]

Could you please post in a complete example of what the generated HTML for the menu should look like?
Thanks.

Thanks.
Yes, please find the HTML below.

Code: Select all

<div class="grid_4 alpha">
    <ul class="mainnav">
        <li><a class="hom" href="index.html"><span>Home</span></a></li>
        <li><a class="abt" href="about.html"><span>About Us</span></a></li>
        <li><a class="srv" href="services.html"><span>Services</span></a>
            <ul>
                <li><a href="#">sub1</a></li>
                <li><a href="#">sub2</a></li>
                <li><a href="#">sub3</a></li>
                <li><a href="#">sub4</a></li>
            </ul>
        </li>
    </ul>
</div>

<div class="grid_4">
    <div id="title">
        <a href="#"><h1>Site Title</h1></a>
    </div>
</div>

<div class="grid_4 omega">
    <ul class="mainnav">
        <li><a class="gal" href="gallery.html"><span>Gallery</span></a>
            <ul>
                <li><a href="#">sub1</a></li>
                <li><a href="#">sub2</a></li>
            </ul>
        </li>
        <li><a class="wrk" href="work.html"><span>Work</span></a></li>
        <li><a class="int" href="interests.html"><span>Interests</span></a>
            <ul>
                <li><a href="#">sub1</a></li>
                <li><a href="#">sub2</a></li>
            </ul>
        </li>         
    </ul>
</div>