BOONEX: The Top Menu Is Eating My Brain

I have never seen such a complex way of generating a navigation menu in my life.  What I am trying to do, is generate the html code for a standalone D7 top menu, without any styling.... nothing but all the menu items enclosed appropriately in <ul> and <li> tags.

All of the top menu items are stored in database table sys_menu_top.  They are in no particular order, and it is impossible to simply retrieve them from the DB and order them appropriately.  You can get all the main menu items and order them appropriately, but there is no way to directly associate the sub menu items with the correct main menu item since the 'parent' field is a '0' for every item.  To complicate things, the permalinks are stored in a separate table, 'sys_permalinks'.

So... I can't just grab the menu items from the db and construct a menu... can't be done.  Had the sub menus items been assigned a main menu item as a parent, it could be done. 

Instead, somewhere along the line, the cache/sys_menu_top.inc file is written... by some function of the menu builder I presume.  Then you got the php class in inc/classes/BxDolMenu.php   You got a javascript class in in/js/classes/BxDolMenu.js     You got a file in templates/base/scripts/BxBaseMenu.php


Holy F@&%!!  S@#%!    All I want to do is generate a stupid menu.  Surely, with all these database tables, php and javascipt classes flying around, there's got to be some incredibly easy way to do this. 



WILL SOMEONE AT BOONEX PLEASE SHOW ME HOW TO DO THIS BEFORE I KILL MYSELF!!



Why do I want to do this?  .... because if this is done, it gives everyone on the planet an easy way to add a dolphin top menu to any third party application and style it for that application.

I'll even get it started:

<?

Need the rest of the code here

?>

Actually....

<?php

?>

Shorthand version:

<?

?>

http://www.w3schools.com/php/php_syntax.asp

So... I can't just grab the menu items from the db and construct a menu... can't be done.  Had the sub menus items been assigned a main menu item as a parent, it could be done.

What are you talking about? Of course they have a parent, and a order too.

			ID	Parent	Name	Caption	Link	Order	Visible	Target	Onclick	Check	Editable	Deletable	Active	Type	Picture	Icon	BQuickLink	Statistics
			4	0	My Profile	{memberNick}	{memberLink}|{memberNick}|change_status.php	3	memb				0	0	1	top	bx_profile.png	user.png	0
			5	0	Home	_Home	index.php	0	non,memb				1	1	1	top	bx_home.png	bx_home.png	0
			6	0	People	_People	browse.php|search.php|calendar.php|tags.php?tags_m...	5	non,memb				1	1	1	top	bx_people.png		0
			7	6	All members	_All Members	browse.php	0	non,memb				1	1	1	custom	bx_people.png		0
			8	6	Search Members	_Search	search.php	8	non,memb				1	1	1	custom			0
			9	0	Profile View	{profileNick}	{profileNick}|pedit.php?ID={profileID}	0	non,memb				1	0	1	system			0
			11	4	View My Profile	_Profile	{memberLink}|{memberNick}|profile.php?ID={memberID...	0	memb				1	1	1	custom			0
			12	179	Compose	_Compose	mail.php?mode=compose	0	memb				1	1	1	custom			1
			14	179	Mail Outbox	_Outbox	mail.php?mode=outbox	1	memb				1	1	1	custom	bx_mymail.png		1
			17	179	Mail Inbox	_Inbox	mail.php?mode=inbox	2	memb				1	1	1	custom	bx_mymail.png		1	mma
			18	179	Mail Trash	_Trash	mail.php?mode=trash	3	memb				1	1	1	custom	bx_mymail.png		1
			20	0	Edit My Profile	_Customize	pedit.php?ID={memberID}	0	memb				1	1	0	custom	bx_n_pedit.png		1
			25	6	Online Members	_Online	search.php? alt=1	2	non,memb				1	1	1	custom	bx_people.png		0
			60	9	View Profile	_Profile	{profileLink}|{profileNick}|profile.php?ID={profil...	0	non,memb				1	1	1	custom			0
			80	4	My Friends	_Friends	viewFriends.php?iUser={memberID}	2	memb

great post, i have been looking for this solution from day one.

I am currently using the iframe for the 3rd part header. not good at all

Take a closer look Deano.  All of the top menu main items have a parent number of '0'.  There's no way to tell which submenu items belong to which main item just buy looking at this table.  If the main items all had a 'Type' of 'Top", and the had a different parent number.... and the submenu items used the individual parent numbers..... THEN you could sort things out.....but that's not the way it is.

So.... it is impossible to use only this table to construct the top menu.  You can determine the main menu item because the type is 'Top', but there is no way to directly associate the submenu items directly with the main menu item, just by looking at this table

Here's what i've coded for you. This will generate the Menu in <ul> n <li> tag

Save it as any php file, upload n run

<?php

require_once( 'inc/header.inc.php' );
require_once( BX_DIRECTORY_PATH_INC . 'membership_levels.inc.php' );
require_once( BX_DIRECTORY_PATH_ROOT . "templates/tmpl_{$tmpl}/scripts/BxTemplMenu.php" );

class SimpleMenu extends BxTemplMenu
{
function getCode()
{
$this->iElementsCntInLine = 100;
$this->getMenuInfo();
$this->genTopItems();
return $this->sCode;
}

function genTopItem($sText, $sLink, $sTarget, $sOnclick, $bActive, $iItemID, $isBold = false, $sPicture = '')
{
$sActiveStyle = ($bActive) ? ' id="tm_active"' : '';

if (!$bActive) {
$s alt= $sOnclick ? ( ' alt="' . $sOnclick . '"' ) : '';
$sTarget  = $sTarget  ? ( ' target="'  . $sTarget  . '"' ) : '';
}

$sLink = (strpos($sLink, 'http://') === false && !strlen($sOnclick)) ? $this->sSiteUrl . $sLink : $sLink;

$sSubMenu = $this->getAllSubMenus($iItemID);

$sImgTabStyle = $sPictureRep = '';
if ($isBold && $sPicture != '') {
$sPicturePath = getTemplateIcon($sPicture);
$sPictureRep = "<img src='{$sPicturePath}' style='vertical-align:middle;width:16px;height:16px;' />";
$sText = '&nbsp;';
$sImgTabStyle = 'style="width:38px;"';
}

$sMainSubs = ($sSubMenu=='') ? '' : " {$sSubMenu} </a>";
$this->sCode .= "<ul> <a href='{$sLink}' {$sOnclick} {$sTarget}>{$sPictureRep}{$sText}</a>{$sMainSubs} </ul>";
}


}

$objMenu = new SimpleMenu();

echo $objMenu->getCode();

?>
Hope this is what you are trying to achieve

Kevin

Parse error: syntax error, unexpected T_STRING in /home/houstonl/public_html/SimpleMenu.php on line 22

YES!  Thank you!    ....just had to remove the inadvertent space on line 22.   This makes you me new best friend :)

Glad i can help :)

My best friend also :)) I was looking for a solution on this menu for a long time!!!

I have a question tough, how can it be integrated into the template system? which is build only with .html? I mean I don't want any iframes.. but can't think of anything else to include a php file in html..

Cheers.

Yes, the top menu items have a parent of 0 which means its a top menu item. The ones that are not 0 is a submenu item and the parent id there is the id of the top menu item it belongs to.

The first item in my table is My Profile. Parent id is 0 so it's a top menu item. It's ID is 4. So to get all the sub menu items for that would be SELECT * from `sys_menu_top` where `Parent`= '4' order by `Order`;

So to construct the menu you would first need to obtain all the top menu items. then loop through each of those obtaining the sub menu items.

Anyhow. I see someone has given you code using built in dolphin functions.

But my point is it can be done from that table.

This is pretty usefull stuff! thank you alot for posting!

NickL

Use Jquery's load function to load the menu from php file into your html file

$('#menu').load('pathto/SimpleMenu.php');

Here's what I ended up with after a few minor changes:

Then, with some code from dynamicdrive.com, I created menu.php   Below is the code I used:

Demo: http://houstonlively.com/menu_test/menu.php

<html>
<head>

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 180px; /* Main Menu Item widths */
border-bottom: 1px solid #ccc;
}

.sidebarmenu ul li{
position: relative;
}

/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #012D58; /*background of tabs (default state)*/
}

.sidebarmenu ul li a:visited{
color: white;
}

.sidebarmenu ul li a:hover{
background-color: black;
}

/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
}

.sidebarmenu a.subfolderstyle{
background: url(right.gif) no-repeat 97% 50%;
}


/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */

</style>

<script type="text/
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode. alt=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode. alt=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}

if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)

</script>


</head>


<body>

<div class="sidebarmenu">
<ul id="sidebarmenu1">
<? require_once "SimpleMenu.php"; ?>
</ul>
</div>

</body>       

</html>

That looks really great my friend.. Really happy with the way it turned out. You got my vote :)

that menu look great HL. this is fantastic .

i might use that on my site later.

one question. when i tested it on my site it dees not show up the extended sub-menu on hovering. have i done something wrong ?

thanks

mchauhan

I can't thank you enough for this.  You've made my whole weekend.... maybe even whole year.  I'll be sure to write you a stellar review.  I did change these two lines:

FROM:


$sMainSubs = ($sSubMenu=='') ? '' : " {$sSubMenu} </a>";
$this->sCode .= "<ul> <a href='{$sLink}' {$sOnclick} {$sTarget}>{$sPictureRep}{$sText}</a>{$sMainSubs} </ul>";
TO:


$sMainSubs = ($sSubMenu=='') ? '' : "<ul> {$sSubMenu} </a></ul>";
$this->sCode .= "<li> <a href='{$sLink}' {$sOnclick} {$sTarget}>{$sPictureRep}{$sText}</a>{$sMainSubs} </li>";
Then... when you instantiate the menu, you can give the main ul an ID.  All this makes the whole thing more standardized, and it worked out of the box with dynamicdrives css/javascript.  Then, you can place the menu in and sub directory, and all you have to change is the path to header.inc.php

<div class="sidebarmenu">
<ul id="sidebarmenu1">
<? require_once "SimpleMenu.php"; ?>
</ul>
</div>

Make sure you use the code I posted.  It has two minor changes.

Thank you HL.. You and i did some fantastic job. This will certainly help others

i have used the same code as u have posted here in green colour. but for some weird reason it doesnt work on my site. i have got exactly the same files in the same directory as you. i am sending you my my site link to see if u want.

for the link please check your mailbox.

HL and Kevin,

very nice job fellas, very nice indeed

Regards,

DosDawg

but the reason i came in here, to start with was to post, the menu couldnt have been "VERY HUNGRY"

Regards,

DosDawg

RE:

Nice hat ..... wish I had two like that.

oh no you didnt ----> :)

Sorry HL just sent u another mail.

check that when u get time.

regards

mchauhan

RE:

Your demo works on my computer.  Tested in IE7, FF Chrome, Opera, and Safari.   PEBKAC?

The best part of this, is that now you can add a dolphin menu to a third party application, without having to wrap the application in a dolphin page... which can be a real headache.  It opens up a lot of doors.

Just another demo....  http://houstonlively.com/menu_test/menu2.php

great post houston

can you post the php file for http://houstonlively.com/menu_test/menu5.php

thanks

looking for this great menu in a horizontal

I posted everything I have in the market.  http://www.boonex.com/unity/extensions/entry/Standalone_Dolphin_Menus

Much thanks Houston

any idea on how to center menu5 in a horizontal?

also is there a trick to make the drop down list go over the other item on the page. I have a banner script under the menu and the drop down list goes behind the banner and is unclickable.

again that for your help

Try setting wmode="transparent" for the flash banner.

what file is wmode in?

How would I know?.... it's your banner script.

smh

so your saying you dont know how to make the drop down list go over the other item on the page?

wmode is a parameter to add to flash scripts to push them to the background so it does not cover other items. So what he is saying, is, it is your banner script, so he can't tell you where it is located.

the banner is not a flash script

the script that produces the banner and all the other content is phpMyDirectory

http://www.phpmydirectory.com/

and there is none there that i can find.

so i was asking if there is a mod/fix/code that will make the menu go on top of the page content. if not that fine ill fine another menu.

thanks all

OK I GOT IT FIXED

Thanks for all your help on this issue

it was as simple as adding a z-index to the menu code :)

the credit goes to mark over on the PMD board

http://www.phpmydirectory.com/community/showthread.php?p=162262#post162262

:)

RE:

No.... I don't believe I said that.

Houston,

thank you for the great menu work. didnt mean to sound ungrateful

really appreciate it

CAn you please give the code here as i do not use phpm,ydirectory and want to implement the same for dolphin's main menu replacement.

Claudia

Morning all,

ive downloaded the stand alone file and uploaded it in a Sub dir in my olphin Root.

But the Script is not executed i just get a blank line

i Left the script as is becuase it should access the Directory just fine

<?php

require_once( '../inc/header.inc.php' );
require_once( BX_DIRECTORY_PATH_INC . 'membership_levels.inc.php' );
require_once( BX_DIRECTORY_PATH_ROOT . "templates/tmpl_{$tmpl}/scripts/BxTemplMenu.php" );

Do i need to change any permissions on the inc Folder? or the Subfolder?

Okay got the directory to work but now im getting this error

Fatal error: require_once(): Failed opening required '/srv/www/vhosts/street-stars.info/httpdocs/templates/tmpl_/scripts/BxTemplFormView.php' (include_path='.:/usr/share/php5:/usr/share/php5/PEAR') in /srv/www/vhosts/street-stars.info/httpdocs/inc/utils.inc.php on line 956

Site setúp:

ROOT/MENUS/menu5.php

Iam including this in

ROOT/GALLERY/INDEX.php via a integrated interface from Coppermine

After activating i get the above error.

Any suggestions?

 RE:

 You might try overriding the default include_path in php.ini so that there is  no default value

include_path = ".:"

I got some nice menu templates and want to add it to my dol site.

The structure of my menu :-)

 -images

-index.html

-jquery.js

-menu.css

-menu.js

 is there a way to add all those files to have the menu properly working within my Dolphin template?

I get 404's for HL links

http://www.boonex.com/m/Standalone_Dolphin_Menus

 RE

 You should have been a detective.