How to get a custom menu to cooporate with CMSMS
Posted: Wed Mar 01, 2006 6:32 pm
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
CSS
Hope someone could give me some pointers. I have searched and searched but haven't found what I'm looking for.
Cheers
Jon
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>
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;
}
Cheers
Jon