We have a small but annoying issue. Using the built in sitemap xslt for
umbraco I setup our site navigation with hover drop down menu for sub-pages.
Works great, but...
Problem:
I do not want the sub-navigation to use the same css class as main navigation. Matter of fact, I don't want the sub-navigation to use any
css. I only want the main navigation to use id="nav"
class="c". I tried a few variations, but it seems to create errors
during validation.
If you look at the way this works it is calling drawNodes and then drawNodes is recursively calling itself, so having the ID on the UI is actually not a good idea as you will have multiple UI elements with the same ID, hence your problem.
The best way to address this is to write you CSS addressing the top level DIV with the ID "sitemap"
I.e.
div#sitemap ul { background-color:#f00; } div#sitemap ul li ul { background-color:#0f0; }
So in the above example, your top level navigation would have a red background and the second level would have a green background.
As I pointed out above, don't try and address the navigation using your #nav ID, I suggest you actually remove that completely and I would suggest you change your CSS to:
#sitemap ul li a:hover span.c { height:27px; background:url('/images/bg-nav-hover.gif'); }
I am also not sure why you have the nested span elements, to me it looks like you are over complicating things a bit when they probably don't need to be so complex :)
Sitemap, subnav css XSLT
We have a small but annoying issue. Using the built in sitemap xslt for umbraco I setup our site navigation with hover drop down menu for sub-pages. Works great, but...
Problem:
I do not want the sub-navigation to use the same css class as main navigation. Matter of fact, I don't want the sub-navigation to use any css. I only want the main navigation to use id="nav" class="c". I tried a few variations, but it seems to create errors during validation.
Thank you for your insight and help.
Hi Carl,
If you look at the way this works it is calling drawNodes and then drawNodes is recursively calling itself, so having the ID on the UI is actually not a good idea as you will have multiple UI elements with the same ID, hence your problem.
The best way to address this is to write you CSS addressing the top level DIV with the ID "sitemap"
I.e.
So in the above example, your top level navigation would have a red background and the second level would have a green background.
Cheers,
Chris
Thanks Chis,
I reviewed the css file and found the following is whats causing the unwanted presentation when hovering over the sub-nav
Is there any way to rewrite the XSLT to under which drawnodes should be called?
Thanks again
Hi Carl,
As I pointed out above, don't try and address the navigation using your #nav ID, I suggest you actually remove that completely and I would suggest you change your CSS to:
I am also not sure why you have the nested span elements, to me it looks like you are over complicating things a bit when they probably don't need to be so complex :)
Cheers,
Chris
is working on a reply...