How to get a custom menu to cooporate with CMSMS

[volcanoboy]

Hi,

So I just started to play around with cmsms and it is by FAR the best cms system I have encountered...and I've tried alot of them. I've been experimenting with it for a few days and think I finally understand the basics.
However, I don't see how I can use my custom css menu (unumberd nested list) to cooporate with cmsms so that it controls the menu links and such. I don't want to hardcode the menu/links in to a template.
What do I need to do/change to get it to work? Here is the code for the menu:


HTML

Code: Select all

	<div id="menu"><ul>
  <li><h2><a href="#">ITEM ONE</a></h2>
  </li>
</ul>

<ul>
  <li><h2><a href="#">ITEM TWO</a></h2>
  
</ul>

<ul>
  <li><h2><a href="#">ITEM THREE</a></h2>
    <ul>
      <li><a href="#">subitem one</a></li>
      <li><a href="#">subitem two</a>
      </li>
    </ul>
  </li>
</ul>

<ul>
  <li><h2><a href="#">ITEM FOUR</a></h2>
    <ul>
      <li><a href="#">subitem one</a></li>
      <li><a href="#">subitem two</a></li>
      <li><a href="#">subitem three</a></li>
      <li><a href="#">subitem four</a>
      </li>
    </ul>
  </li>
</ul>

<ul>
  <li><h2><a href="#">ITEM FIVE</a></h2>
    <ul>
      <li><a href="#">subitem one</a></li>
      <li><a href="#">subitem two</a></li>
      <li><a href="#">subitem three</a>
      </li>
    </ul>
  </li>
</ul>	

<ul>
  <li><h2><a href="#">ITEM SIX</a></h2>
    <ul>
      <li><a href="#">subitem one</a>
      </li>
    </ul>
  </li>
</ul></div>

CSS

Code: Select all

#menu {
width: 540px; position: relative; top: 85px; left: 250px; float: left;
}

#menu ul{
list-style: none;
margin: 0;
padding: 0;
width: 90px;
float: left;
}

#menu a {
color: #737373; text-decoration: none; padding-left: 15px;
}

#menu a:visited {
color: #737373;
}

#menu a:active {
color: #000;
}

#menu a:hover {
color: #ff0060;
}

#menu h2 {
font-size: 9px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold;
background-image: none; background-repeat: repeat; background-attachment: scroll;
background-position: 0 0; text-transform: uppercase; text-align: left;
}

#menu h2 a:hover {
background-image: url(http://www.volcano.no/etc/nyvolcano/bilder/layout/volcano-arrow.gif);
background-repeat: no-repeat; background-attachment: scroll; background-position: 0 3px;
}

#menu li {
font-size: 9px; font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 14px; text-align: left; position: relative;
}

#menu li a:hover {
background-image: url(http://www.volcano.no/etc/nyvolcano/bilder/layout/volcano-arrow.gif);
background-repeat: no-repeat; background-attachment: scroll; background-position: 0 3px;
}

Hope someone could give me some pointers. I have searched and searched but haven't found what I'm looking for.

Cheers

Jon

[Ted]

The menu manager in 0.12 will make this a lot easier.  Really, it's only a slight modification to the bulletmenu template to add the h2 around the page names on level 1...

[volcanoboy]

i see..is that in the Beta releaseas as well? I'm running 0.11.2. Should I wait for the stable version or try upgrading to the beta version? Is there no way to do this as of now?

Also..im having another problm with my menu. The other stylesheets will override my menu css file and ruin the whole apperance of the menu. Increasing the font size, colours etc. It seems the a:links overide the ones for my menu. Any tips.

Cheers

Jon

[Dr.CSS]

Try giving each its own link, hover, ative, style.
hth  mark