Drop-Down Menus, Horizontal Style

[Mobius]

Is it possible to set the delay for the menu?

[brans]

This won't be possible without using JavaScript.

If you need a very powerful dropdown menu tool, then have a look at http://www.udm4.com

this can easily be implemented into phpwcms with the given dthml_menu function

[frold]

This CSS code doesnt work in Firefox

/* BEGIN Menu Definitions (LeftMenu CSS DROPDOWN menu with js hack for IE bug) */

#leftMenu ul {
margin: 0;
padding: 0;
list-style: none;
width: 124px; /* Width of Menu Items */
border-bottom: 1px solid #FFFFFF;
}

#leftMenu ul li {
position: relative;
}

#leftMenu li ul {
position: absolute; left: 123px; /* Set 1px less than menu width */
top: 0;
display: block;
}

#leftMenu li:hover ul {
display: block;
}

#leftMenu li:hover>ul {
visibility:visible;
}

#leftMenu ul ul {
visibility:hidden; } /* Fix IE. Hide from IE Mac \*/

* html #leftMenu ul li {
float: left;
height: 1%;
}

* html #leftMenu ul li a {
height: 1%;
}

/* End */ /* Make-up syles */
#leftMenu ul, li {
margin: 0 0 0 0;
}

/* Styles for Menu Items */
#leftMenu ul a {
display: block;
text-decoration: none;
color: #777;
background: #DADADA; /* IE6 Bug */
padding: 4px;
border: 1px solid #FFFFFF;
border-bottom: 0;
}

/* Hover Styles */
#leftMenu ul a:hover {
color: #FFFFFF;
background: #990000;
}

/* Sub Menu Styles */
#leftMenu li ul a {
text-decoration: none;
color: #FFFFFF;
background: #F21C0A; /* IE6 Bug */
padding: 4px;
border: 1px solid #FFFFFF;
border-bottom: 0;
}

/* Sub Menu Hover Styles */
#leftMenu li ul a:hover {
color: #FFFFFF;
background: #990000;
}

/* Icon Styles */
#leftMenu ul a.submenu {
background: #DADADA url("../../picture/r_arrow.gif") no-repeat right;
}

#leftMenu li ul a.submenu {
background: #F21C0A url("../../picture/r_arrow.gif") no-repeat right;
}

#leftMenu ul a.submenu:hover {
background:#990000 url("../../picture/r_arrow.gif") no-repeat right;
}
/* END Menu Definitions */

[Paal]

Code: Select all

// -------------------------------------------------------------
if( ! ( strpos($content["all"],'{DROPDOWN')===false ) ) {
	$content["all"] = str_replace('{DROPDOWN}', '{DROPDOWN:0}', $content["all"]);
	$replace = 'build_dhtmlmenu('$1','id="nav"',0);';
	$content["all"] = preg_replace('/\{DROPDOWN:(\d+)\}/e', $replace, $content["all"]);
}
// -------------------------------------------------------------

Result, when I use this RT:

Code: Select all

<ul id="nav">
  <li><a href="#">Level 1</a></li>
  <li><a href="#" class="submenu" name="submenu">Level 2</a>
    <ul id="nav">
      <li><a href="#">Level 2_1</a></li>
    </ul>
  </li>
  <li><a href="#" class="submenu" name="submenu">Level 3</a>
    <ul id="nav">
      <li><a href="#">Level 3_1</a></li>
      <li><a href="#">Level 3_2</a></li>
    </ul>
  </li>
  <li><a href="#">Level 4</a></li>
.
.
.
.

each new ul level add <ul id="nav">.

This not valid in HTML validator.

How to customize renderer file, when 1st level id==nav? and 2st, 3st, etc level simple <ul>?

Tnx, Paul

[rtilghman]

You use a nested style cascade, which is one of the basic selling points of CSS.

Say you have a certain style for:

UL { }

And you wanted a certain style to apply to the second level menus and another style for third level menus. You would add:

UL UL { }

UL UL UL { }

The first one basically says that "any UL inside a UL" gets this style, and the last one says "any UL inside a UL inside a UL" gets these styles.

You can use these kind of nested style assignments for all sorts of cascade applications. And yes, I agree, the use of a single value "nav" for every UL in the RT above is TOTALLY incorrect. I found this myself but just moved on as the RT didn't meet my needs anyway. The NAV id should at least be incrememnted so its unique.

Best,
rt

[Paal]

You use a nested style cascade, which is one of the basic selling points of CSS.

Say you have a certain style for:

UL { }

And you wanted a certain style to apply to the second level menus and another style for third level menus. You would add:

UL UL { }

UL UL UL { }

The first one basically says that "any UL inside a UL" gets this style, and the last one says "any UL inside a UL inside a UL" gets these styles.

You can use these kind of nested style assignments for all sorts of cascade applications. And yes, I agree, the use of a single value "nav" for every UL in the RT above is TOTALLY incorrect. I found this myself but just moved on as the RT didn't meet my needs anyway. The NAV id should at least be incrememnted so its unique.

Best,
rt

Thank you, I understand and know this. Nevertheless I have to modify the phpwcms_template/inc_script/frontend_render/reptag_dropdown.php so that only the top level UL gets
<ul id="nav">.

How can I modify it?

Code: Select all

// -------------------------------------------------------------
// file: phpwcms_template/inc_script/frontend_render/reptag_dropdown.php

if( ! ( strpos($content["all"],'{DROPDOWN')===false ) ) {
   $content["all"] = str_replace('{DROPDOWN}', '{DROPDOWN:0}', $content["all"]);
   $replace = 'build_dhtmlmenu('$1','id="nav"',0);';
   $content["all"] = preg_replace('/\{DROPDOWN:(\d+)\}/e', $replace, $content["all"]);
}
// -------------------------------------------------------------

Thx, Paul

[rtilghman]

Don't, bag it.

There is another RT that someone posted which I modified to get working and created a more "comprehensive" RT for, including the complex style sheet needed to make it work properly. You can find it here.

If you look at the PHP for that RT tag you'll see that there are two variables that get written to the list as its built; "active" and "inactive". Active is a class that is written to the LI element for the current page/area within the site's hierarchy. Inactive is basically a "bucket" written to the very top level UL... basically the class structure was the original authors attempt to set up a cascade; the primary "class" sets the menu off states, the isolated "activeclass" overrides that locally for the active element. Not very elegant, but it would work in a pinch.

What you can do is just add an identical "id" value where the "class=inactive" is written. In case you have zero programming knowledge and this is still unclear the variables are SET here:

Code: Select all

$class="class='".$class."'";
$classactive="class='".$activeclass."'";

along with their attribute names. The contained variable (attribute label plus value) for the "inactive" or off class (the one for the UL) is then written at the bottom of the script:

Code: Select all

if($s) {
      $g  = "\n<ul";
      if(!$counter && $class) $g .= ' '.$class;
      $g .= ">\n".$s.'</ul>';

You could also just change the "class=" name when the variables are set to "id=" and use the RT tags active/inactive class passes as id passes instead.

Best,
Rick