The menu problem is real not that complex, it’s simply a CSS issue, it can all be fixed in your CSS...
this is the original menu’s markup:
I’ve only copied what’s important
<div id="menu">
<div id="menutop"><a title="home"href="index.html"><img alt="home" src="menu-top.gif" width="200" height="200" /></a></div>
<div class="navcontainer">
<ul class="navlist">
<li><a title="link one" href="index.html">home</a></li>
<li><a title="link two" href="index.html">link two</a></li>
<li><a title="link three" href="index.html">link three</a></li>
<li><a title="link four" href="index.html">link four</a></li>
<li><a title="link five" href="index.html">link five</a></li>
<li><a title="link six" href="index.html">link six</a></li>
</ul>
</div>
<br />
<div class="navcontainer">
<ul class="navlist">
<li><a id="topmenu" title="valid xhtml strict" href="index.html">valid xhtml strict</a></li>
<li><a title="valid css" href="index.html">valid css</a></li>
<li><a title="derby web design" href="http://www.tristarwebdesign.co.uk">webdesign by tri-star</a></li>
</ul>
</div>
</div>
here is the converted version’s
Markup:
I’ve only copied what’s important
<div id="menu">
<div id="menutop"><a title="home"href="index.html"><img alt="home" src="/amdbuilder/assets/templates/progress/menu-top.gif"/></a>
</div>
<div class="navcontainer">
<ul class="topnav">
<li class="here">Home</li>
<li><a href="index.php?id=2" title="">Progress</a></li>
<li class="last"><a href="index.php?id=3" title="">Andreas</a></li>
</ul>
</div>
</div>
If you’ll compare the two version you’ll notice they differ minutely. The original has a
selector of the name of
navlist, the converted version has a
.Selector by the name of
topnav... I’ll explain why this is important.
.navcontainer a:link, .navlist a:visited
{
color: #EEE;
text-decoration: none;
}
above your telling the
navlist class to handle
a:visited link with no underline. the problem is... In your converted version there is no class called
navlist in your
Markup it’s been changed to
topnav. there is a simple solution to this, change your
.Selector from
navlist to
topnav...
The next problem your facing is the
here class which is how [[dropMenu]] shows the current page... what happens is the text within the current page’s navigation entry is left without a wrapping
<a>, which means none of your
.Selectors within menu.css will effect it. In order for you to use the Here option in [[dropMenu]] you’ll need to add a
Class .Selector of
.here and modify your css to match or accent your menu entries.
if you’d rather not use the [[dropMenu]]’s Here option, simply set it to false in your template I believe it’s like the following
I really hope this helps, I’ve tried to make it as clear as possible, if there is any part of this you don’t understand, or that I’ve less than adequately explained, let me know, but please be specific and I’ll try to clear it up.
☆ A M B ☆
MODX Staff
