Vertical Navigation Menu

[mtnmchgrl]

I had included the CSS for my navigation menu within my main page stylesheet, but upon viewing a few online tutorials by other users, I saw that other people made it a separate file. I wasn't wondering what the norm was for this? Mine currently works, with the exception of having the current page highlight (which works in my own editor but not in CMS ms).

When you click on the home button, it has a hover color AND another "current" color to show the visitor that they are on the "Home" page (plus about, contact, etc.). Here is my CSS for that:

Code: Select all

#navcontainer li a#current
{
border-bottom: 3px solid #DAD6B7;
background: #645A05;
} 

The issue is, there is nothing to reference this to in the main template because I took the navigation section out based on a video I watched, so instead of the menu with the links like so:

Code: Select all

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="index.html" id="current">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="#">SHOWROOM</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>

I instead added the smarty tags, per the CMS made simple video:

Code: Select all

<!--NAVIGATION--> 
<div id="navcontainer">
[glow]{menu} [/glow]
</div>

So how does the CSS know what to grab?

That question & the original, which is, should this be in a separate stylesheet? & if so where do the a href links go?

[Dr.CSS]

If your CSS is set to use #navcontainer as a starting point on all style for the menu you should be good to go, only problem is that {menu} will ask menu manager what menu template is set as default, which you can set in MeMa, then look in content > pages and create a ul li out of the pages found there...

Your problem is going to come from the menu template adding classes that you aren't set up for in CSS, so render the page and see what it uses, like menuactive instead of #current or make a new menu template with the classes you require, I find it easier to change the CSS than the menu template some times...

[mtnmchgrl]

Hmm.... Ok, will have to take a look & that and see if I follow what you are saying.

The next issue is, when i built the menu, I forgot I had to have sub menu's on one of links. I'm sure that is going to further complicate things. I have a vertical menu, which is apparently not the norm as it is.

Menu
Link 1
Link 2
Link 3
Link 4
Sub Link 1
Sub Link 2
Sub Link 3
Sub2 Link 1
Sub2 Link 2
Sub2 Link 3

I'm surprised there isn't an option for this already in the template/menus of CMSms. I'd prefer to have it where there were no images as the buttons either, so I could just code what I wanted in CSS.

Also, if you don't mind, could you please take a look at the other thread that you replied to me on regarding the logo in the header? I provided you a link.

[mtnmchgrl]

I'm greatly confused by the purpose of Menu Manager, at least in terms of it's use if you already have a pre-built navigation menu using CSS/HTML.

If I am supposed to take out the nav links(ex.<li class="home"><a href="index.html">Home</a></li> )in my template & substitute something like {menu}, how & where does CMSms know where to find the index.html, about.html, contact.html, etc.

[Dr.CSS]

Menu manager is there to create dynamic menus from the list of pages on Content > Pages, it looks there for pages then creates UL LI of those pages using classes and IDs set in the menu template chosen in the page template, {menu} uses whatever menu template is set to default, it also shows the tag used for other menu templates like {menu template='minimum_menu.tpl}...

So you can either use one of the defaults or import one and make some custom calls in it then call it in your menu tag, w/o the .tpl...

[mtnmchgrl]

I'm sorry, I'm still not understanding this....I don't know why. I have spent 3 weeks on/off researching this. When it comes to integrating this into CMSms, nothing I have found really properly explains it.

On my HTML pages I have the typical NAV code w/ the list <li><ul> items which correspond to styles I created in CSS. This creates a vertical nav menu with sub menu fly outs. Easy peezy to understand.

When converting it over to CMSms, I have tried using a simple nav code that I downloaded & edited but I get nothing buy smarty tag errors, in the side bar when I do this. It doesn't recognize it. When I "customize" one of CMSms templates & call it in the template (ex. {menu}) it won't get read.

At this point, I'd be willing to pay someone to help me do this. I found one example, possible on Dr. CSS's website of what i'm talking about but I don't understand where I'm supposed to load the XML & how it gets read. And where I customize it b/c I don't want white/blue cells.

Anyone want to help??