Dhtmlmenu problems - need help...

[damian]

Hello,

i tried to figure it out on my own, but i did not solve the task. Perhaps a CSS pro can help me:
I used a dhtml menu of "rtilghman" on the site, that i´m working on an my customer wants some changes, that i don´t know how to realize.

Here is a picture of my work.



(1.) I have to change the back-color in area (1.), when i rollOver it and(!!!) for example, when i click on "REGALE" from the main Category "Glasmöbel", the rollOver-backcolor has to stay durably and show the user the active first Level Category.

(2.) How to remove the links from the first level? There is no content page behind the first level categories. My customer does not want a redir to the first content page.

You can reach the real site here:
http://www.trienes.de/site/index.php?regale


Meanwhile i´m a bit despaired, because my CSS skills are not good enough to solve it on my own. I would be very glad and gratefully, if someone could help me.
Thank you for your time.

I forgot, here is the css:

Code: Select all

#primaryNav {
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   }

/* here we set the default display for the lists/nested lists */
#primaryNav ul {
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   list-style: none;
   display: block;
   width: auto;
   }
   
#primaryNav ul ul {
   display: none;
   position: absolute;
   width: auto;
   border-bottom: 1px solid #ffffff;
   top: 33px;
   left: -1px;
text-align:left;
   }

   /* Fix IE. Hide from IE Mac \*/
   * html #primaryNav ul ul { top: 33px; left: -1px; width: 144px;}
   /* End */
   
   
#primaryNav ul ul ul {
   display: none;
   position: absolute;
   left: 142px;
   top: -1px;
   }

   /* Fix IE. Hide from IE Mac \*/
   * html #primaryNav ul ul ul { left: 141px; top: -1px; }
   /* End */

/* here we set the default display for the list items/nested list items */
#primaryNav ul li {
   margin: 0px 0px 0px 0px;
   padding: 10px 0px 10px 0px;
border-left: 1px solid #ffffff;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
   float: left;
   position: relative;
   font-weight: normal;
width:142px;
   }

#primaryNav ul li li {
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   border: 1px solid #ffffff;
   border-bottom: 0px;
   float: none;
   display: block;
   font-weight: normal;
width:142px;
   }

/*ä here we set the default display state for the links */
#primaryNav ul li a {
   padding: 0px 0px 0px 0px;
   display: inline;
   text-decoration: none;
   }
   
#primaryNav ul li li a {
   padding: 5px 0px 5px 10px;
   display: block;
   width: 140px;
   }

   /* Fix IE. Hide from IE Mac \*/
   * html #primaryNav ul li { float: left; height: 1%; width: 143px; }
   * html #primaryNav ul li a { height: 1%; }
   /* End */
   

/* here we set the ACTIVE class for ON menus, first for cascade */
#primaryNav ul.itemOff { color: #1860AB;text-align: center; background-color: #A3BCE5;}/*hier color: #1860AB;*/ 

/* DEFINE DEFAULT LI/A APPEARANCE */
/* here we set the standard LI states - controls bg color */
#primaryNav ul li { background-color: #C1D8FF; color: #1860AB; }

#primaryNav ul li li { background-color: #e5f1ff; color: #1860AB; }
#primaryNav ul li li li { background-color: #5f1ff; color: #1860AB; }
#primaryNav ul li li li li { background-color: #5f1ff; color: #1860AB; }

/* here we set the standard A states - controls text color */
#primaryNav ul li a { color: inherit; }

   /* Fix IE. Hide from IE Mac \*/
   * html #primaryNav ul li a {color: #1860AB; }
   * html #primaryNav ul li li a { color: #1860AB; }
   /* End */

/* DEFINE DEFAULT LI/A HOVER/ON APPEARANCE */
/* here we set the hover and "in" styles for elements */
   /* L1 on states */
#primaryNav li:hover, #primaryNav li.sfhover a { color: #1860AB; }

#primaryNav li:hover li, #primaryNav li.sfhover li a { color: #1860AB; }

   /* L2 on states */
#primaryNav li li:hover, #primaryNav li li.sfhover a { color: #1860AB; }
   /* L2 off states - for children */
#primaryNav li li:hover li, #primaryNav li li.sfhover li a { color: #1860AB; }

   /* L3 on states */
#primaryNav li li li:hover, #primaryNav li li li.sfhover a { color: #1860AB; }
   /* L3 off states - for children */
#primaryNav li li li:hover li, #primaryNav li li li.sfhover li a { color: #1860AB; }

   /* global states - bg colors */
#primaryNav li li:hover, #primaryNav li li.sfhover, #primaryNav li li li:hover, #primaryNav li li li.sfhover {
   background-color: #d8eaff;
   }

/* DEFINE MENU APPEARANCE BEHAVIORS */
/* here we set the reveal/hide chains for the fly-out */
#primaryNav li:hover ul ul, #primaryNav li:hover ul ul ul {
   display: none;
   }
   
#primaryNav li:hover ul, #primaryNav li li:hover ul, #primaryNav li li li:hover ul {
   display: block;
background:#efefef;
   }

#primaryNav li.sfhover ul ul, #primaryNav li.sfhover ul ul ul, #primaryNav li li.sfhover ul ul {
   display: none;
   }
   
#primaryNav li.sfhover ul, #primaryNav li.sfhover ul, #primaryNav li li.sfhover ul, #primaryNav li li li.sfhover ul {
   display: block;
   }

greetings
damian

[rtilghman]

The answer to your first question doesn't have to do with the menu CSS script... you need to implement one of the many add-ons for PHPwcms that allows you to have a class defined for the "IN" pathway of the current page.

For example, if you have 4 primary areas and you're in subsection 2 of area 2 (2.2) you would want area 2 to be in the "IN" state (highlighted) while that page is shown. To do this you need to know where you are, and the only way to do that is to have the CMS write a specific class or variable into the LI that should be highlighted.

If you go to the Hacks and Enhancements section you should find a number of add-ons that do this kind of thing.

With regard to teh second question, again, that's a CMS/programmatic question. You need to tell PHPwcms not to render the link for that level. However, because the menu actually uses the "A" tag's style attributes this will undermine the menu's appearance. My recommendation would be to set-up a page for that location that is essentially just a summary page with brief descriptions of the areas available in that pathway. This is actually standard navigational behavior from an Information Architecture perspective as well (you shouldn't have menu entries without locations).

Best,
Rick

[Klappstuhl28]

Maybe there´s another point.
You call it the "Lotus Effekt". I don´t know if you really mean "L O T U S" like the car or the plant LOTOS e.g. it´s leaf from which the nano-technicians were be inspirated? And another logical-hook is "Den Blättern der Lotus-Blüte
nachempfunden, ist ein Effekt" - Es sind die Blätter der Pflanze und nicht der Blüte. By the way, i think it doesn´t really matter. Site looks great. Clear design nice colors fitting to that what the text says.

kind regards

(Haarspalter) lars