Forum for discussing general topics related to Couch.
28 posts Page 1 of 3
Doing my first website with Couch.
I have most of the website coded in html/css
I have a slightly different menu structure.
Please see the uploaded image.

I am looking at the menu tag reference.
But want to know whether it would be possible.. sorry if I am missing something

The HTML is:
Code: Select all
<ul class="mainnav">
<li><a class="cl1" href="#"><span>Main1</span></a></li>
<li><a class="cl3" href="#"><span>Main2</span></a>
   <ul>
      <li><a href="#">Sub1</a></li>
      <li><a href="#">Sub2</a></li>
      <li><a href="#">Sub3</a></li>
   </ul>
</li>
<li><a class="cl2" href="#"><span>Main3</span></a></li>
.....etc..

etc..


The CSS is as follows:
Code: Select all
 .mainnav { list-style: none; list-style-type: none; text-align: left;  }
  .mainnav li { float: left; display: inline; list-style-type: none; }
  .mainnav li a { display: block; width: 100px; height: 50px; float: left; background-image: url("../images/mainnav.gif"); }
  .mainnav li ul li a {background-image: none;}
  .mainnav a span { display: none; }    
.mainnav li ul { position:absolute; visibility:hidden; width: 120px;}
.mainnav li ul li { display:inline;}
.mainnav li ul li a, .mainnav li ul li a:visited {width: 120px; height: 30px; background-color: #eee; color: #000; }
.mainnav li ul li a:hover { background-color: #ddd; color: #fff;}


The top menu list items are replaced with background-images (class cl1, cl2 etc)

Kindly help. Thanks a lot in advance.

Attachments

Hi,

If the markup generated by cms:menu tag does not suit us, we can always use the more powerful cms:nested_pages tag which gives absolute control over the markup.

Please take a look at cms:nested_pages documentation at http://www.couchcms.com/docs/tags-refer ... pages.html where we use to build a menu.

Does this help?
Please let us know.

Thanks
Thanks a lot for your quick reply, KK.
I will definitely look at the cms:nested_pages documentation.
But I forgot to include the full code of my header structure:
Code: Select all
<div id="header">
   <ul class="mainnav">
      <li><a class="cl1" href="#"><span>Main1</span></a></li>
      <li><a class="cl3" href="#"><span>Main2</span></a>
      <ul>
         <li><a href="#">Sub1</a></li>
         <li><a href="#">Sub2</a></li>
         <li><a href="#">Sub3</a></li>
      </ul>
      </li>
      <li><a class="cl2" href="#"><span>Main3</span></a></li>
   </ul>
   <div id="title">
       <a href="#"><h1>Hannah &amp; Varghese</h1></a>
    </div>
    <ul class="mainnav">
       <li><a class="cl4" href="#"><span>Main4</span></a>
       <ul>
           <li><a href="#">Sub1</a></li>
           <li><a href="#">Sub2</a></li>
           <li><a href="#">Sub3</a></li>
       </ul>
       </li>
       <li><a class="cl5" href="#"><span>Main5</span></a></li>
       <li><a class="cl6" href="#"><span>Main6</span></a></li>
      </ul>
</div>

ie., Navigation (menus) on either part of Title.
Please let me know if that is possible.
Thanks a lot.
Not a problem.

We'll use the cms:menu (or cms:nested_pages ) twice - one for each side and somehow show menu-items belonging only to the relevant side.
This can be done in several ways:
1. Use the 'exclude' parameter to hide top-level items belonging to the other side.
Code: Select all
<cms:menu masterpage='menu.php' exclude='main4, main5, main6' />
<cms:menu masterpage='menu.php' exclude='main1, main2, main3' />

2. Create two 'dummy' pages in the tree e.g. 'left-menu' and 'right-menu' and make 'main1', 'main2, 'main3' children of 'left-menu' while making 'main4', 'main5, 'main6' children of 'right-menu'
Now we can use the following -
Code: Select all
<cms:menu masterpage='menu.php' childof='left-menu' />
<cms:menu masterpage='menu.php' childof='right-menu' />


Hope this helps.
Do let us know if something is unclear.
Thanks a lot for your valuable help, KK.
Let me try it and come back.
Hi KK,
I've been looking at the Nested Page aka Menu maker page and have a couple doubts, though everything is a lot clearer now.

I created the menu structure (List) as:

Nav1 (dummy page)
-Index
-About
--sub1
--sub2
--sub3
-Services
Nav2 (dummy page)
-Gallery
--sub1
--sub2
--sub3
-Work
-Interests

1)Now I find it slightly confusing about the menu.php page in <cms:menu masterpage='menu.php' /> as in the example the masterpage is index.php and all pages are created as cloned pages of index.php
Do we create a menu.php page with menu list structure?
2)My title code comes in between the left and right menus - How do I include the code for that.
3)Almost all my top level pages do not share the same template.. so I have to use pointer pages, for all of them.
I apologize for the long post. Kindly help. Thanks a lot in advance.
The way I see it, we'll use menu.php only for the purpose of automatic creation of a menu.
For that we'll create cloned pages out of it but these pages will all be 'pointers' to the other templates (i.e. won't have data of their own).

As for the title that shows between the two menus, that is your code completely e.g.
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>

Hope this answers your queries.
Thanks a lot.
we'll use menu.php only for the purpose of automatic creation of a menu. For that we'll create cloned pages out of it

Here, first 3 main menu items are children of nav1 (dummy page) and last 3 are children of nav2.
Sorry for missing the obvious, but should nav1 and nav2 be children of the menu.php file.
Thanks again.
but should nav1 and nav2 be children of the menu.php file
Oh yes. They are cloned pages of menu.php but are 'dummy' only in the sense that they have no use other than giving us a 'parent' for the two branches.
Thank you.
This is the content of my menu.php file (from which the other files are cloned):
Code: Select all
<?php require_once ('couch/cms.php'); ?>
<cms:template clonable='1' nested_pages='1' >
    <cms:editable name='content' label='Page Content' type='richtext' />
</cms:template>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
</head>
<body>
   
</body>
</html>
<?php COUCH::invoke(); ?>

Hope this is quite normal.
Thanks again.
28 posts Page 1 of 3
cron