Power Menu

[mightofnight]

ok i took the general page_menu() function and created a power_menu() function.  

the general purporse of this function is to not use the lu and li tages associated with menu's.  I loth this way of creating a menu.  I favor a css feature that lets you controll the direction of a series of links.  the "display: block;"  This allows a series of links to be displayed vertically instead of the normal horizontal.  so if you have 4 links written normall in html you would get this...

link link link link

now add the css command and it gets transforemd to this
link
link
link
link

ok so that i don't loose your attention here is a template that i am currently working on..

http://uptowninc.us/pages/test/pages2/test-sub3.php

if you did a view source you would notice the menu looks like this

Code:

              <a href="http://uptowninc.us" target="_top" class="main-menu"><div class="main-menu-div">test</div></a>

<a href="http://uptowninc.us/pages/test/pages2.php" target="_top" class="main-menu-sub"><div class="main-menu-sub-div">pages2</div></a>
<a href="http://uptowninc.us/pages/test/pages2/test-sub3.php" target="_top" class="main-menu-sub-sub-current"><div class="main-menu-sub-sub-div">test sub3</div></a>
<a href="http://uptowninc.us/pages/test/sub-page2.php" target="_top" class="main-menu-sub"><div class="main-menu-sub-div">sub page2</div></a>
<a href="http://uptowninc.us/pages/page2.php" target="_top" class="main-menu"><div class="main-menu-div">page2</div></a>

Css code as folows

Code:

.main-menu-current, .main-menu {
background-image: url(Left-nav-button.gif);
height: 28px;
display: block;
font: normal normal bold 16px sans-serif;
color: #283372;
text-decoration: none;
margin: 7px 5px 0px 11px;
}
.main-menu-current, .main-menu:hover {
color: #8A2524;
}
.main-menu-div {
padding: 5px 0px 0px 35px;
}





.main-menu-sub, .main-menu-sub-current {
background-color: #FED78A;
display: block;
 margin: 0px 0px 0px 33px;
 border-left: 1px solid #C68B37;
 border-bottom: 1px solid #C68B37;
 border-right: 1px solid #C68B37;
 width: 153px;
 color: #283372;
 font: normal normal normal 14px/normal Arial, sans-serif;
 text-decoration: none;
}
.main-menu-sub-current {
color: #8A2524;

}

.main-menu-sub:hover {
color: #8A2524;
text-decoration: underline;
}
.main-menu-sub-div {
padding: 1px 2px 2px 7px;
}






.main-menu-sub-sub, .main-menu-sub-sub-current {
background-color: #FDE4B2;
display: block;
 margin: 0px 0px 0px 33px;
 border-left: 1px solid #C68B37;
 border-bottom: 1px solid #C68B37;
 border-right: 1px solid #C68B37;
 width: 153px;
 color: #283372;
 font: normal normal normal 14px/normal Arial, sans-serif;
 text-decoration: none;
}
.main-menu-sub-sub-current {
color: #8A2524;

}

.main-menu-sub-sub:hover {
color: #8A2524;
text-decoration: underline;
}
.main-menu-sub-sub-div {
padding: 1px 2px 2px 18px;
}

ok basically the function plugs out every css option explicityly.  and each sub level gets output as such (1st sub level) .main-menu-sub, (2nd) .main-menu-sub-sub, and so on and so forth.  

if you notice the nested div main-menu-div.  this is to proviade cross borswer compabliity in adjusting the text spacing (top, right, bottom, left).

the css may look confusing because there is so much but in realiaty it's pretty basic.. just note the

Code:

display: block;

this element is extremly critical

the function i used was as follows

Code:

function power_menu($parent = 0, $menu_number = 1, $menu_header = '', $menu_footer = '', $class = 'main-menu', $recurse = LEVEL) {
global $database, $admin, $page_id, $page_trail, $default_link, $extra_sql, $extra_where_sql;
// Check if we should add menu number check to query
if($parent == 0) {
$menu_number = "menu = '$menu_number'";
} else {
$menu_number = '1';
}
// Query pages
$query_menu = $database->query("SELECT page_id,menu_title,page_title,link,target,level,visibility$extra_sql FROM ".TABLE_PREFIX."pages WHERE parent = '$parent' AND $menu_number AND $extra_where_sql ORDER BY position ASC");

// Check if there are any pages to show
if($query_menu->numRows() > 0) {
// Print menu header
echo $menu_header;
// Loop through pages
while($page = $query_menu->fetchRow()) {

// Work-out class
if($page['page_id'] == PAGE_ID) {
$tempclass = $class.'-current';
} else {
$tempclass = $class;
}

// Check if link is same as first page link, and if so change to WB URL
if($page['link'] == $default_link AND !INTRO_PAGE) {
$link = WB_URL;
} else {
$link = page_link($page['link']);
}
// Generate menu links
echo '<a href="'.$link.'" target="'.$page['target'].'" class="'.$tempclass.'"><div class="'.$class.'-div">'.stripslashes($page['menu_title']).'</div></a>'."\n";

// Generate sub-menu each level will have and anditional -sub at hte end of the class so for a second lever menu it would be menuclass-sub, 2nd level menuclass-sub-sub adn so on and so forth.
if(isset($page_trail[$page['page_id']])) {
power_menu($page['page_id'], $menu_number, $menu_header, $menu_footer, $class.'-sub', $recurse-1);
}
}
// Print menu footer
echo $menu_footer;
}
}

and i used it as follows

Code:

power_menu(0, 1, '','');

if you don't like the name of the base css class "main-menu" a different class can be input when you call the function example

Code:

power_menu(0,1,'','','new-clss');

Menu's created with this function are very powerfull since you can simply define every element.

[mightofnight]

actually this line here

Code:

power_menu(0, 1, '','');

could even be just the function since all methods are defined example

Code:

power_menu();

[mightofnight]

Just curious if anyone has used this? i was kinda surprised that no one posted with any comments?

[ruebenwurzel]

sorry,
I've read this and thought great , because for a while i had the problem, that i want every submenu with its own css, but every browser displays it in a other way. I don't understand much css so i give it up. I think the problem has to to with "ul" and "li". So your way to do the menu and submenu with its own "div" seems the better way and solve this problem. I've decided to test your powermenu, when i have a little bit more time than yet. Thats also the reason why i forgot to answer to your post, sorry

I admit to you that it's curious, there is a real very good code-snippet and no one seems to recognize this

[mightofnight]

I will create some basic directions on how to setup the CSS..

[pcwacht]

Please do

I am new to all css styling, still need to get rid of the <td> thinking

John

[mightofnight]

PowerMenu Documentation:

1.   in you template include the PowerMenu() function which is a rebuild of the included website baker page_menu().  Make sure you stick this within the PHP section example <?php {function code here} ?>I like to include it at the bottom of the page template.
2.   Next call the function where you want your menu to be generated in you HTML code by simply using <?php PowerMenu() ?>
3.   Set Css Code for menu in Css file
4.   
I am going to first explain the first menu level of the css code.  A main menu link that is generated by this looks like this

Code:

<a href="http://uptowninc.us" target="_top" class="main-menu"><div class="main-menu-div">test</div></a>

Now if this is the current page then it will appear as so

Code:

<a href="http://uptowninc.us" target="_top" class="main-menu-current"><div class="main-menu-div">test</div></a>

Basically all we have here is a link with an embedded div.  Well the only point of the embedded div is to accurately control the spacing of the text within the link.  

Code:

.main-menu-div {
   padding: 5px 0px 0px 35px;
}

This effectively pushes the text 5px from the lot and 35px from the left to give it the centered look

Here is the formatting for the link it self
.

Code:

main-menu-current, .main-menu {
background-image: url(Left-nav-button.gif);
   height: 28px;
   display: block;
   font: normal normal bold 16px sans-serif;
   color: #283372;
   text-decoration: none;
   margin: 7px 5px 0px 11px;
}
.main-menu-current, .main-menu:hover {
   color: #8A2524;
}

The menus .main-menu-current and .main-menu are basically the same so I define them together.  In this case I set an image though this is not necessary.  I set the margin, which controls the spacing from the document to the edge of the link.  The order is top, right, bottom, left.  Notice the “display: block;â€?  this is the most crucial part as this is an css property that defines wether to place a series of links vertically or horizontally.  For the height I used the height as my image.  Color defines the text color you can use background-color: to define the background color.  Also this would be where you would add a border if you wanted.  Borders can be defined as  border: 1px solid #C68B37; or you could append the direction to the border to be more specific such as border-left:, border-right:, border-top:, border-bottom:.

Now I wanted to give the menu the same color when you hover as when it’s the active page so I defined .main-menu-current, .main-menu:hover together..  these two can be broken up into two separate id’s each with their own settings.  Also if I wanted a different background image when I hovered I could have defined that in this section also!



Notice that the only difference is that the class of the current page gets the –current added to it.  Notice that this isn’t the case for the embedded div.



Now for a second level menu

I will start out by posting the code

.

Code:

main-menu-sub, .main-menu-sub-current {
background-color: #FED78A;
display: block;
 margin: 0px 0px 0px 33px;
 border-left: 1px solid #C68B37;
 border-bottom: 1px solid #C68B37;
 border-right: 1px solid #C68B37;
 width: 153px;
 color: #283372;
 font: normal normal normal 14px/normal Arial, sans-serif;
 text-decoration: none;
}
.main-menu-sub-current {
    color: #8A2524;
   
}

.main-menu-sub:hover {
    color: #8A2524;
    text-decoration: underline;
}
.main-menu-sub-div {
   padding: 1px 2px 2px 7px;
}

Sub menus use the same name schema as the main menu only difference is that an –sub gets appended onto the end for every sub level.  Such as if you had a third level menu you would have .main-menu-sub-sub.  Most of the formatting here is similar to the first level menu with the exception that there is no image for the sub menu and that the menu is pushed over more from the left and that I chose a width for the menu.  I also made it so that hovering over non current pages underlines the links by adding the text-decoration: underline.

[pcwacht]

Thanks!

[mightofnight]

I pieced this together pretty quickly let me know of anything else that should be included

[fienieg]

Great addition to the normal menu! It really extense the use of our menu structure

[mightofnight]

And whats great is that it would work perfect for horizontal menu, though adding a sub menu ot that could prove a bit challanging.


on the to do list is making the function so you could start at a specefic top level page!  

example
[topmenu] <- this is a page but has no content and is never seen!
    -[sub menu] <- this is actually the first menu item that is displayed
    -[sub menu] <- second
    -[sub menu] <- third
    -[sub menu]

[leftmenu] <- another page that isn't seen
    -[sub menu] <-same as above

and you could go on in a bottom menu...

then when you call the PowerMenu() you could define a level to start with (topmenu, leftmenu, bottommenu).  it really shouln't be that hard to implement and you can use the current website baker page structure to create all the menu's on the site!

What your thoughts on this idea?

[Ryan]

@mightofnight: Nice work. However, I do not get the point. All of your work could be achieved without modifying any code, and just using good CSS. Also, it would provide much better accesability using the ul/li technique, as a site is much more usable with css disabled when menus are in a list.
I would suggest you try putting the effort into the css - making modifications to the core code could give you a bit of "upgrade hell".
However, if you really like using straight links, I cannot stop you.

[mightofnight]

true, but i wanted somethign simple.  and this css propority has been suported since netscape 6, ie4 so i feal pretty confrontable using it   I know how to handel ul/li i just prefer not to.