Drop-Down Menus, Horizontal Style

isac · Post by **isac** » Wed 30. Jun 2004, 18:16

Maybe this, http://www.alistapart.com/articles/horizdropdowns/
could be used with PHPWCMS, but i cant find the right replacent tag to do it. anyone interested solving this?

I think would be easy...

Pappnase · Post by **Pappnase** » Wed 30. Jun 2004, 20:48

hello

i think oliver also work on such solution! as far as i remember that was ask earlier.

frold · Post by **frold** » Thu 1. Jul 2004, 13:20

Pappnase wrote:hello

i think oliver also work on such solution! as far as i remember that was ask earlier.

This one is based css (as I understand) I think the one O.G have planed is based on DHTML (http://www.phpwcms.de/index.php?id=21,0,0,1,0,0)- but this one looks very powerfull... Maybe he will see this post?

isac · Post by **isac** » Thu 1. Jul 2004, 15:53

Maybe I talked to soon, because this menu only support one level down, cant get it to work. I hope someone could

Code: Select all

+ cat1
   |.......sub.cat
   |         |....... sub.sub.cat > link :(
   |
   |.......sub.cat

+ cat2

Reo-X · Post by **Reo-X** » Sun 5. Sep 2004, 01:12

I might be coming up with a solution for this, since it IS simple css, and the css menu that phpwcms is already using has been made from stuff read on alistapart.com.

I will reply here if i get it done and working.

brans · Post by **brans** » Sun 5. Sep 2004, 13:58

ok mate:

put this code into any file in your render folder (only available in the latest release, for more information have a look at the changelog.txt)

Code: Select all

function build_dhtmlmenu($start=0, $class, $counter=0) {
   
   $s = '';
   $g = '';
   foreach($GLOBALS['content']['struct'] as $key => $value) {
      if ($start == $GLOBALS['content']['struct'][$key]['acat_struct'] &&
         !$GLOBALS['content']['struct'][$key]['acat_hidden'] && $key)
      {
         $s .= '<li>';
			
         if(!$GLOBALS['content']['struct'][$key]["acat_redirect"]) {
			$s .= '<a href="index.php?';
            if($GLOBALS['content']['struct'][$key]['acat_alias']) {
               $s .= $GLOBALS['content']['struct'][$key]['acat_alias'];
            } else {
               $s .= 'id='.$key.',0,0,1,0,0';
            }
            $s .= '">';
         } else {
            $redirect = get_redirect_link($GLOBALS['content']['struct'][$key]["acat_redirect"], ' ', '');
            $s .= '<a href="'.$redirect['link'].'"'.$redirect['target'].'>';
         }

         $s .= html_specialchars($GLOBALS['content']['struct'][$key]['acat_name']);
         $s .= '</a>';

         $s .= build_dhtmlmenu($key, $class, $counter+1);

         $s .= "</li>\n";
      }
   }

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

and this code into any file in your init folder:

Code: Select all

// -------------------------------------------------------------

//list menu replacement
if( ! ( strpos($content["all"],'{DROPDOWN}')===false ) ) {
   $content["all"] = preg_replace('/{DROPDOWN}/',build_dhtmlmenu(0,'id="nav"',0);, $content["all"]);
//you gotta change the ...dhmlmenu(0,... to your levelid to start the menu from
}
// -------------------------------------------------------------

not tested out yet, but should work also:
{DROPDOWN:level} like {NAV_TABLE_COLUMN:level}
(instead of setting the levelid hardcoded...)

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"]);
}
// -------------------------------------------------------------

now you gotta include the needed JS and CSS files from your a list apart example and you should have a working DROPDOWN-Menu whereever you put the replacement-tag:
{DROPDOWN}

jsw_nz · Post by **jsw_nz** » Mon 13. Sep 2004, 19:40

Hi Brans,
Would be most interested in seeing an online implementation of this within wcms. If you get one up and working, do post the link. Will watch this thread.

Cheers,
jsw_nz

(john)

brans · Post by **brans** » Tue 14. Sep 2004, 23:46

I got one using another Java-Script at

http://livedemo.ti-files.com

this one is realised using an alistapart tutorial too.. so it's almost the same.. the only thing was to exchange the JS (=> menu behaviour) and classnames the rest is exactly the same..

I already posted my solution some time ago:
http://www.phpwcms.de/forum/viewtopic.php?t=3387

*** edit ***
as I'm using an older wcms-release I can't use the init and render function but this doesn't matter at all because it's RC4 too

jsw_nz · Post by **jsw_nz** » Wed 15. Sep 2004, 00:29

Thanks Brans!
...apparently I missed that post...
Nice to see it working....works great in IE6, Firefox .8
Also supports three levels! Great!

And from your other post:

my solution is creating the menus by parsing a html nested list

So the extra code is next to minimal...I would suppose.
Been working on Flash menu for sometime, but this opens up other great possibilities.
Bookmarking that link to your mod.

cheers,
jsw_nz (john)

spirelli · Post by **spirelli** » Sat 29. Jan 2005, 15:17

also: http://www.phpwcms.de/forum/viewtopic.php?t=5361

jsw_nz · Post by **jsw_nz** » Sun 30. Jan 2005, 01:51

Hi spirelli...

thanks for the heads up...

toszter · Post by **toszter** » Wed 2. Mar 2005, 18:32

I am so close to getting a totally dynamic dropdown menu solution done for WCMS that uses no JavaScript, only CSS... I've posted in another thread:
http://www.phpwcms.de/forum/viewtopic.p ... sc&start=0

If anyone can help, I'll give you each a hi-5! and the code I'm using will go to everyone.

Very elegant,

toszter

Paal · Post by **Paal** » Wed 2. Mar 2005, 23:21

isac wrote:Maybe this, http://www.alistapart.com/articles/horizdropdowns/
could be used with PHPWCMS, but i cant find the right replacent tag to do it. anyone interested solving this?

I think would be easy...

Hello isac!

Try this (backup firs!):

Code: Select all

#########################################################################
# Drop-Down Menus, Horizontal Style
# Based on http://www.alistapart.com/articles/horizdropdowns/ and 
# Brans {DROPDOWN:integer} hack (http://dev-brenner-b-e/index.php/topic,68.0.html)
#
# Modified by Thifi (tnx!) for custom parameter if "menu has children":
# <a href="" class="submenu" name="submenu">
# 
# TODO LIST:
# - different 1st ans 2sd level menuitem
# - add custom parameter if "menu has children" (class="submenu" name="submenu")
#
# Paul Palocz 
# paal at mailbox dot hu
#########################################################################

---------------[OPEN]---------------
include/inc_front/front.func.inc.php
---------------[FIND (around 2498 line)]---------------
function build_dhtmlmenu($start=0, $class='', $activeclass='', $counter=0) {
.
.
.
}
---------------[CHANGE COMPLETE "function build_dhtmlmenu" for this]---------------
function build_dhtmlmenu($start=0, $class='', $activeclass='', $counter=0) {
	// builds a <ul><li> list based on structure
	// layout settings for $class = array(
	// 'count'	=> 0 (if the depth should be added to class/id name)
	// 'every'	=> 0 (if set 1 every sub-<ul> will get the class/id name
	// 'ul_i'	=> 'mydhtmlid'
	// 'ul_c'	=> 'mydhtmlclass'
	// 'ul_ia'	=> 'mydhtmlactiveid'
	// 'ul_c'	=> 'mydhtmlactiveclass'
	// 'li_ca'	=> 'myactiveclass' (for setting different class for active <li>)
	
	$s = ''; 
	$g = '';

	$thfs = $GLOBALS["content"]["struct"];
	foreach($thfs as $key => $value)
	{
		$x = &$GLOBALS["content"]["struct"][$value["acat_struct"]];
		if($value["acat_struct"] != 0)
			$x["acat_has_children"] = 1;
		else
			$x["acat_has_children"] = 0;
	}

	foreach($GLOBALS['content']['struct'] as $key => $value) { 
		if ($start == $GLOBALS['content']['struct'][$key]['acat_struct'] && 
			!$GLOBALS['content']['struct'][$key]['acat_hidden'] && $key) 
		{ 
			$s .= '<li';
			if($key == $GLOBALS['aktion'][0] && $activeclass) $s .= ' '.$activeclass;
			$s .= '>'; 

			if(!$GLOBALS['content']['struct'][$key]["acat_redirect"]) { 
				$s .= '<a href="index.php?'; 
				if($GLOBALS['content']['struct'][$key]['acat_alias']) { 
					$s .= $GLOBALS['content']['struct'][$key]['acat_alias']; 
				} else { 
					$s .= 'id='.$key.',0,0,1,0,0'; 
				}
				$s .= '"';
				if($GLOBALS['content']['struct'][$key]['acat_has_children'])
					$s .= ' class="submenu" name="submenu"';
				$s .= '>';
			} else { 
				$redirect = get_redirect_link($GLOBALS['content']['struct'][$key]["acat_redirect"], ' ', ''); 
				$s .= '<a href="'.$redirect['link'].'"'.$redirect['target'].'>'; 
			}

			$s .= html_specialchars($GLOBALS['content']['struct'][$key]['acat_name']); 
			$s .= '</a>'; 

			$s .= build_dhtmlmenu($key, $class, $counter+1); 

			$s .= "</li>\n"; 
		} 
	} 

	if($s) {
		$g  = "\n<ul";
		if(!$counter && $class) $g .= ' '.$class;
		$g .= ">\n".$s.'</ul>';
	}
	
	return $g; 
}
---------------[CLOSE]---------------

---------------[CREATE]---------------
phpwcms_template/inc_script/frontend_render/reptag_dropdown.php
---------------[ADD]---------------
<?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"]);
}
// -------------------------------------------------------------
?>
---------------[CLOSE]---------------

---------------[OPEN]---------------
Admin => standard css (or access frontend.css directly via ftp)
---------------[ADD, ANYWHERE]---------------
/* 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 */
---------------[CLOSE]---------------

---------------[OPEN]---------------
phpwcms_template/inc_js/frontend.js
---------------[FIND]---------------
last line, and 
---------------[AFTER ADD]---------------
startList = function() {

	// code for IE
	if(!document.body.currentStyle) return;
	var subs = document.getElementsByName('submenu');
	for(var i=0; i<subs.length; i++) {
		var li = subs[i].parentNode;
		if(li && li.lastChild.style) {
			li.onmouseover = function() {
				this.lastChild.style.visibility = 'visible';
			}
			li.onmouseout = function() {
				this.lastChild.style.visibility = 'hidden';
			}
		}
	}
}
window.onload=startList;
---------------[CLOSE]---------------

phpwcms-backend => html-block (for menu) of your template

---------------[ADD]-----------------
<div id="leftMenu">
{DROPDOWN:0}
</div>
---------------[END]-----------------

---------------[RESULTS, EG.]-----------------

<div id="leftMenu">
<ul id=nav>
  <li><a href="#" class="submenu" name="submenu">Menu 1</a>
    <ul id=nav>
      <li><a href="#">Menu 1,1</a></li>
      <li><a href="#" class="submenu" name="submenu">Menu 1,2</a>
        <ul id=nav>
          <li><a href="#">Menu 1,2,1</a></li>
          <li><a href="#">Menu 1,2,2</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
  <li><a href="#">Menu 4</a></li>
</ul>
</div>
-------------------[EOF]----------------------------

Results:

isac · Post by **isac** » Thu 3. Mar 2005, 12:24

Good job!

This look very good. I hope Oliver will consider this hack in future release.

Thanks Paal

Paal · Post by **Paal** » Thu 3. Mar 2005, 12:53

isac wrote:Good job!

This look very good. I hope Oliver will consider this hack in future release.

Thanks Paal

This hack made my coder friend, Thifi!

Tnx!

Ps.: I found 1 bug. When you fill "redirect to" field (in Admin section/site structure), then don't get submenu parameters (when "menu has shildren")

Like this (wrong result

):

Code: Select all

<div id="netNav">
<ul id="">
  <li><a href="xy.php">XY</a>
    <ul id="">
      <li><a href="#" class="submenu" name="submenu">Intranet</a>

That is the right:

Code: Select all

<div id="netNav">
<ul id="">
  <li><a href="xy.php" class="submenu" name="submenu">XY</a>
    <ul id="">
      <li><a href="#" class="submenu" name="submenu">Intranet</a>

Paul

Drop-Down Menus, Horizontal Style

Drop-Down Menus, Horizontal Style

Online Example

thanks

I have a no-JS only CSS solution to Dropdowns

Re: Drop-Down Menus, Horizontal Style