Graphical Navigation Links - Linking to CMSMS pages??

[slimboyfatz33]

Hi ,

Pretty new to CMSMS, and was wondering if it is possible to create a link to a CMSMS page from a graphical nav link??

I have created a template in XHTML/CSS and have navigation links set up, basically items in an list, they are image rollovers! I was wondering if i can link from them to CMSMS pages? The only reason i ask this is because there is a CMSMS module (menu-manager, i think) which adds its own navigation items on the fly, i do not really want this, but to code if possbile a hard link to my pages...i hope that kinda made sense?!?

much appreciated!!!

[Dr.CSS]

I've used the menu manager to make all kinds of image rollover navigation, you really should use it...

The main reason I looked for a CMS was so I wouldn't have to keep updating every pages menu items just to add a page...

http://www.joshmillerblues.com/  was made with the menu manager...

[marlowmusic]

That is exactly what I'm trying to do, too. Can you please give a little more detail about how you used the menu manager to get roll-over and active states with images?

Thanks!

[Dr.CSS]

Basically all you have to do is put a   around each instance of {menutext} in a menu template, {$node->menutext}, then the CSS is...

#primary-nav li a {
padding: 0px 0px 0px 5px;    This is the width of the left images round corner, just enuf to show it
display: block;                            I left out the rest of the styling, it's up to you
background: url(path to your left image) left top no-repeat    This is the image for your normal state
}
#primary-nav span {  This is all the styling you need for this as the a is inside this...
padding: 5px 10px 5px 5px;  first 5px is top, 10px is right,twice what you put in the a above, 5px bottom, 5px half of the right to get even padding...
background: url(path to your right image) right top no-repeat    Normal state image
}
These are the hover image calls...

#primary-nav a:hover {
background: url(path to your left image) left top no-repeat   
}
#primary-nav a:hover span {
background: url(path to your right image) right top no-repeat
}

These are the active state calls...

#primary-nav a.menuactive, #primary-nav a.menuactiveh {  These are for IE6
background: url(path to your left image) left top no-repeat
}
#primary-nav a.menuactive span,#primary-nav a.menuactiveh span {
background: url(path to your right image) right top no-repeat
}

You can have three diff. image states, 1 set for normal, 1 set for hover, and 1 more for active, most times it's the same set for hover and active...

Same principles used here...

http://multiintech.com/cmsmsdemo/default_templates.html

[marlowmusic]

Thank you! That was very helpful.

I'm curious though if that is strictly for images used as a menu item itself or it is for an image that has dynamic-generated text (of the menu name) laying over that image?

[Dr.CSS]

I don't use images with text on them unless the client is extremely adamant about it...

All my menus are created to be some what future proof, as in adding or removing a page shouldn't involve additional images with text on image and the reason I use a left and right image is so the length of the word determines the width of the button, most of the images are 150 > 200px wide so together they can cover up to 375px of text...