Drop-Down Menus, Horizontal Style
Drop-Down Menus, Horizontal Style
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...
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...
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?Pappnase wrote:hello
i think oliver also work on such solution! as far as i remember that was ask earlier.
http://www.studmed.dk Portal for doctors and medical students in Denmark
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
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)
and this code into any file in your init folder:
not tested out yet, but should work also:
{DROPDOWN:level} like {NAV_TABLE_COLUMN:level}
(instead of setting the levelid hardcoded...)
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}
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;
}
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
}
// -------------------------------------------------------------
{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}
Online Example
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)
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)
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
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
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:
Been working on Flash menu for sometime, but this opens up other great possibilities.
Bookmarking that link to your mod.
cheers,
jsw_nz (john)
...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:
So the extra code is next to minimal...I would suppose.my solution is creating the menus by parsing a html nested list
Been working on Flash menu for sometime, but this opens up other great possibilities.
Bookmarking that link to your mod.
cheers,
jsw_nz (john)
I have a no-JS only CSS solution to Dropdowns
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
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
- my humble contributions:
- [RepTag.1.2.1-DEV] CSS Driven Dropdown Menu {VERT_DROPDOWN} No JavaScript
- get phpwcms mods, tweaks, & hacks
- [RepTag.1.2.1-DEV] CSS Driven Dropdown Menu {VERT_DROPDOWN} No JavaScript
- get phpwcms mods, tweaks, & hacks
Re: Drop-Down Menus, Horizontal Style
Hello isac!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...
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]----------------------------
Last edited by Paal on Thu 3. Mar 2005, 12:59, edited 1 time in total.
This hack made my coder friend, Thifi!isac wrote:Good job!
This look very good. I hope Oliver will consider this hack in future release.
Thanks Paal
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>
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>