Help to Understand Menu Manager

[ABU]

This is the first official time i'm trying to create my own menu within the Menu Manager module. I have always edited the default menu and worked off that, but now i'm working on a site that uses its own styles. I'm having issues understanding how to setup a new database menu correctly and inserting it within my page.

Here's what i've done:

• Clicked on the Menu Manager admin.
• Clicked on the File Templates tab, and clicked the Imported the simple_navigation.tpl. Template to Database button
• Gave the template  a name. "global_menu"
• Now I see the "global_menu" in my list of Database Templates.

Here's what I dont understand
The code for the menu i would like to add is here:

Code: Select all

<table align="left" border="0" cellpadding="0" cellspacing="0" width="778">
			  <tr>
				   <td><a href="" onmouseover="home.src='images/homeo.jpg'" onmouseout="home.src='images/home.jpg'"><img name="home" src="images/home.jpg" width="74" height="30" border="0" alt=""></a></td>
				   <td><a href="" onmouseover="atmosphere.src='images/atmosphereo.jpg'" onmouseout="atmosphere.src='images/atmosphere.jpg'"><img name="atmosphere" src="images/atmosphere.jpg" width="184" height="30" border="0" alt=""></a></td>
				   <td><a href="" onmouseover="menu.src='images/menuo.jpg'" onmouseout="menu.src='images/menu.jpg'"><img name="menu" src="images/menu.jpg" width="82" height="30" border="0" alt=""></a></td>
				   <td><a href="" onmouseover="reservations.src='images/reservationso.jpg'" onmouseout="reservations.src='images/reservations.jpg'"><img name="reservations" src="images/reservations.jpg" width="156" height="30" border="0" alt=""></a></td>
				   <td><a href="" onmouseover="entertainment.src='images/entertainmento.jpg'" onmouseout="entertainment.src='images/entertainment.jpg'"><img name="entertainment" src="images/entertainment.jpg" width="175" height="30" border="0" alt=""></a></td>
				   <td><a href="" onmouseover="contact.src='images/contacto.jpg'" onmouseout="contact.src='images/contact.jpg'"><img name="contact" src="images/contact.jpg" width="107" height="30" border="0" alt=""></a></td>
			  </tr>

		</table>

How would I insert the code above into my "global_menu" database template?

Any direction would be great! Thanks!

[duclet]

Just copy and paste that as the content of that menu.

[ABU]

duclet

Thanks for your help. Adding the code to the template works fine, but leaves the problem of the menu being hard coded. So for example, if you wanted to create a new menu item, you would need to change the code, upload new graphics for the buttons and whatever.

I found the solution I was looking for, just need to work through the process. Basically, I will need to do the following:

Convert the table menu item code above to CSS
Use the csstemplate.tpl within the Menu Manager
Style the menu the way I want
Add the to my page template where I want the menu to go

There is a lot more to it, of course, because I will need to dynamically create the new menu items with graphics, which will take some research. For example, if a new page is created along with a new menu item, we want the new menu item to be styled the same, with the same graphics, and actions.

Anyway, here is a good place to start for all that's interested.
http://wiki.cmsmadesimple.org/index.php ... nu_Manager

Cheers!

[tophers]

There is a (fairly) easy way to accomplish this. You need to alter the .tpl file to add a unique id to each menu item, them use css to style the item (the background tag will accomplish what you're looking for). To edit the .tpl look at this post:
http://forum.cmsmadesimple.org/index.ph ... 968.0.html

To style the output, use something like this:

Code: Select all

#home {left: 0px; width: 250px; background: transparent url(uploads/images/nav/home.jpg) 0 0 no-repeat;}
#home a:hover {background: transparent url(uploads/images/nav/homeo.jpg) 0 0 no-repeat;}
#home a.menuactive {background: transparent url(uploads/images/nav/homeo.jpg) 0 0 no-repeat;}

[ABU]

Yeah I started out by doing that, but then realized that I would need to style each new menu item that I create. The only way i've found to make it completely dynamic is to syle the list item within CSS so that it always uses the same background image and actions. Then just place the name of the menu item over the background image. Does that make sense?

[tophers]

It sounds like you're on the right track. If you want the menu to be dynamic, and not have to hard-code the styles, then using a common background image for off/over/on states is the best option. Assign the off image to the background of all , then the li a: hover to your over state, etc. The actual menu item text would then just be css-styled text placed over the background.

The method I described is best used for sites where the top-level nav is fixed, and you want to use a graphic for the actual menu item (all states).

[calguy1000]

From what I see.. everything can be done nicely in menumanager

assuming you name the images for each menu item consistently and put them in the same place.

The only concern I have is the width and height attributes for the images... those will be harder to customize.

Other than the width and height  simple smarty variables can handle it all.

i.e:

Code: Select all

 <td><a href="" onmouseover="home.src='images/{$node->pagetitle}.jpg'" onmouseout="home.src='images/{$node->pagetitle}.jpg'">
  <img name="{$node->pagetitle}" src="images/{$node->pagetitle}.jpg" {* don't know how you would do this: width="74" height="30" *} {* this could be done with css: border="0" *} alt="">
</a></td>

[ABU]

Sweet! Thanks guys. I will certainly put some time to this. I will leave this post open until I get a final result to post along with the [Solved] notes. Look back soon for the solution.