menu with different colors per section

[E.A.Murphy]

Hi,
I searched the forum for a solution (I thought I saw that some time ago) but can't find it anymore.
By now I tried to use: {NAV_HORIZ_DD:ID,Level depth} and read the thread of course.
So the problem is, what I need is this:


But what I got is far from that.
The biggest problem are the colors but I also don't get the spacing between the buttons.
btw. the drobdown-section will be only some grayish blocks maybe whith a colored line above. but I think I can achieve that.

The CSS is almost the same as the original

Code: Select all

#menu_container {
   margin: 0 0 0 0;  /* 100px only for testing - default = 0 */
   position: relative;
   width: 735px;
   height: 21px;      /* ORG 20px */
   z-index: 1000;
}
/* Get rid of the margin, padding and bullets in the unordered lists */
/* margin und padding auf 0, Aufzählungszeichen der unsortierten Liste unterdruecken */
#pmenu, #pmenu ul {
   padding: 0;
   margin: 0;
   list-style-type: none;
}
/* Set up the link size, color and borders */
/* Einstellen der Groeszen, Farben und Rahmen fuer die Links */
#pmenu a, #pmenu a:visited {
   display: block;
/*   width: 120px;
*/   font-size: 13px;
   font-weight:bold;
   color: #fff;
   height: 21px;      /* ORG 25px */
   line-height: 20px; /* ORG 24px */
   text-decoration: none;
   text-indent: 0px;
   border: #3b3bcc solid;
   border-width: 3px 0px 0px 0px;
}

Maby someone can show me where I have to look (I think I use the wrong key-words)
Do I have to use frontend_render? (well, I'm not so into code)

Thanks
Murphy

[E.A.Murphy]

or in other words: how do I get different CSS-IDs for the first level of the menu like:

Code: Select all

a.marketing:hover, a.marketing:active
{
color: #ffffff;
background: etc.

???
Wrapped in an div-element

[Jensensen]

somewhere documented by flip-flop:
[x]

ah, it was here:
[x]

[E.A.Murphy]

Thank you, its not quite what i want (but I'll read it throught and take it as backup)

flip-flop wrote in his NAV_HORIZ_DD

- Every li has it´s own class (optional)

but I can't find a workaround - think I have to search some more...

Maybe someone has tried such a menu with phpwcms already

[flip-flop]

Mhh, I haven´t do it with this navigation but there is an commented part:

// IDs for every li ======= If you need the ID class, please uncomment/comment
// IDs fuer jedes li ======= Wenn sie die ID Klassen benoetigen, bitte dekommentieren/kommentieren
// $l = str_repeat(' ', $counter+1) . '<li'. $class . ' id="cat-id_' . $value['acat_id'] . '">';

If you uncomment this, every li becomes his own ID.

Knut

[E.A.Murphy]

didn't see the forrest for the trees
So I'll give that a try. Thank you! (Think I'll be here again soon enough)

cheers
Sven

[Jensensen]

Hi flip-flop,

Code: Select all

{NAV_LIST_UL:F,ID,,act_path,active,id}

works perfect!

but how to get it with the famous --> Level Lift??

[flip-flop]

I don´t understand your question:

[PHP]
if(isset($GLOBALS['LEVEL_ID'][1])) {
$level_id = $GLOBALS['LEVEL_ID'][1];
echo '<div class="nlu_navi1">'.LF;
echo '{NAV_LIST_UL:F,'.$level_id.',,act_path,active,id}';
echo '</div>';
}
[/PHP]

[Jensensen]

Thank you very much. I thought it was NAV_LIST_UL:F,ID,... that makes the navi handle with ID's.
So, it's rather the last part of the RT: ,id}

[E.A.Murphy]

So, I uncommented the code in PHP as flip-flop sugested.
And the CSS is unchanged.

But it seams that there is no ID rendered (in FF). What I don't understand is that the "kontakt" is rendered with -class="horiz_enclose"- but It's part of the first menu-level.

FF-render:

Code: Select all

<ul id="pmenu">
   <li class="sub_no act_path"><a href="index.php?home">home</a></li>
   <li class="drop_ul "><a href="index.php?mana">mana<!--[if IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->

   <ul>
      <li class="sub_no"><a href="index.php?langer-seitentitel" class="horiz_enclose">langer seitentitel</a></li>
   </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li class="sub_no"><a href="index.php?marketing">marketing</a></li>
   <li class="sub_no"><a href="index.php?personal-planning">personal planning</a></li>

   <li class="sub_no"><a href="index.php?seminare">seminare</a></li>
   <li class="sub_no"><a href="index.php?kontakt" class="horiz_enclose">kontakt</a></li>
</ul>

So everithing is as seen in flip-flops thread, beside that the code for IDs is uncomented.
Is there something that I don't see?

[flip-flop]

Oh God, please:

Code: Select all

      $l  = str_repeat('   ', $counter+1) . '<li'. $class . ' id="cat-id_' . $value['acat_id'] . '">';
//      $l  = str_repeat('   ', $counter+1) . '<li'. $class . '>';

// IDs for every li ======= If you need the ID class, please uncomment/comment

[E.A.Murphy]

Sorry, I'm a bit absent-minded.

That's much better

Code: Select all

<ul id="pmenu">
   <li class="sub_no act_path" id="cat-id_1"><a href="index.php?home">home</a></li>
   <li class="drop_ul " id="cat-id_2"><a href="index.php?mana">mana<!--[if IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->

   <ul>
      <li class="sub_no" id="cat-id_7"><a href="index.php?langer-seitentitel" class="horiz_enclose">langer seitentitel</a></li>
   </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li class="sub_no" id="cat-id_3"><a href="index.php?marketing">marketing</a></li>
   <li class="sub_no" id="cat-id_4"><a href="index.php?personal-planning">personal planning</a></li>

   <li class="sub_no" id="cat-id_5"><a href="index.php?seminare">seminare</a></li>
   <li class="sub_no" id="cat-id_6"><a href="index.php?kontakt" class="horiz_enclose">kontakt</a></li>
</ul>