General Community > WebsiteBaker Website Showcase
New WB site with some nifty features
Vincent:
Very interesting. Keep going! :-)
Vincent
mysticcowboy:
Excellent. Very professional.
CaptApollo:
Hi folks - sorry I didn't get to post this last night. Here is the code for flyout menus and footer links as requested. I also had a function call all pages "in this section" meaning all children pages of the main section pages within the site, that would be shown on all pages within that branch of the site structure. I never got it to work very well, so I'd be interested if anybody has a good solution for that.
Here is the code for the footer menu. You'll note I'm explicitly suppressing some menu items that I moved to a toolbar. There must be a better way to do that than hard-coding them...
// Function to generate footer links
function page_footer_links($item_template = '[a][menu_title][/a]', $default_class = ' class="footer_default"', $current_class = ' class="footer_current"') {
global $database, $admin, $page_id, $page_trail, $default_link, $extra_sql, $extra_where_sql;
// Check just the top level
if (stristr($_SERVER['PHP_SELF'], "espanol")) {
$parent = 14;
} else {
$parent = 0;
}
$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) {
// Loop through pages
while($page = $query_menu->fetchRow()) {
// Create vars
$vars = array('[class]', '[a]', '[/a]', '[menu_title]', '[page_title]');
// Work-out class
if($page['page_id'] == PAGE_ID) {
$class = $current_class;
} else {
$class = $default_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']);
}
// Create values
$values = array($class, '<a href="'.$link.'" target="'.$page['target'].'">', '</a>', str_replace(" "," ",stripslashes($page['menu_title'])), stripslashes($page['page_title']));
// Replace vars with value and print
if ($page['menu_title'] != "Español") {
$mylinks[] = str_replace($vars, $values, $item_template);
}
// Generate sub-menu
}
// Print out links
$mylinks = implode(" . ", $mylinks);
echo $mylinks;
}
}[/color]
Here is the code for generating the flyout menu html:
// Function to generate main menu
function pdp_page_menu($parent = 0, $menu_number = 1, $item_template = '<li[class]>[a][menu_title][/a]', $menu_header = '<ul>', $menu_footer = '</ul>', $default_class = ' class="menu_default"', $current_class = ' class="menu_current"', $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 || $parent == 14) {
$menu_number = "menu = '$menu_number'";
$item_template = '<td><ul><li[class]><h2>[a][menu_title][/a]</h2>';
$menu_header = '';
$menu_footer = '';
} 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()) {
if ($page['menu_title'] != 'Contactar' && $page['menu_title'] != 'Home' && $page['menu_title'] != 'Links' && $page['menu_title'] != 'Español' && $page['menu_title'] != 'Contact' && $page['menu_title'] != 'Links' && $page['menu_title'] != 'Sitemap' && $page['menu_title'] != 'Mapa del Sitio') { //
// Create vars
$vars = array('[class]', '[a]', '[/a]', '[menu_title]', '[page_title]');
// Work-out class
if($page['page_id'] == PAGE_ID) {
$class = $current_class;
} else {
$class = $default_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']);
}
// Create values
$values = array($class, '<a href="'.$link.'" target="'.$page['target'].'">', '</a>', stripslashes($page['menu_title']), stripslashes($page['page_title']));
// Replace vars with value and print
echo str_replace($vars, $values, $item_template);
// Generate sub-menu
//if(isset($page_trail[$page['page_id']])) {
page_menu($page['page_id'], $menu_number, '<li[class]>[a][menu_title][/a]', '<ul>', '</ul>', $default_class, $current_class, $recurse-1);
//}
if ($parent == 0) {
echo "</li></ul></td>";
} else {
echo "</li>";
};
}
}
// Print menu footer
echo $menu_footer;
}
}[/color]
Call the above code like this:
<div id="menu"><table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<? pdp_page_menu(0, 1, '<li class="menu_main"[class]>[a][menu_title][/a]</li>', '', '', '', ' style="font-weight: bold;"'); ?>
</tr></table></div>[/color]
And finally, here is the CSS to make the menus do their thing (note you need csshover.htc to make IE work right):
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(/css/csshover.htc);
font-size: 11px;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
</style>
<![endif]-->
#menu {
width: 543px;
z-index: 50;
position: absolute;
top: 37px;
left: 221px;
}
#menu td {
margin: 0px;
padding: 0px;
}
th {
text-align: left;
}
#menu ul {
list-style: none;
margin: 0px;
padding: 0px;
float: left;
}
#menu a, #menu h2 {
font: 11px tahoma, verdana, arial, helvetica, sans-serif;
display: block;
border: none;
margin: 0;
padding: 2px 3px;
}
#menu h2 {
color: #DDC877;
background-image: url(/images/button_bg.gif);
background-repeat: no-repeat;
text-transform: uppercase;
font-weight: bold;
padding-left: 10px;
padding-right: 10px;
padding-top: 20px;
padding-bottom: 23px;
}
#menu h2:hover {
color: #FFFFFF;
}
#menu a {
color: #DDC877;
background: #182829;
text-decoration: none;
font-weight: normal;
padding-left: 10px;
padding-right: 0px;
margin-right: 0px;
border-left: solid 1px #576568;
}
#menu h2 a {
padding: 0px;
border: none;
}
#menu h2 a:hover {
padding: 0px;
border: none;
background-color: #18252B;
}
#menu a:hover {
color: #ffffff;
background: #A51C36;
border-left: solid 1px #576568;
}
#menu a:focus {
color: #ffffff;
background: #A51C36;
border-left: solid 1px #576568;
}
#menu li {position: relative;}
#menu ul ul {
position: absolute;
z-index: 500;
width: 150px;
}
#menu ul ul ul {
position: absolute;
top: 4px;
left: 145px;
border-left: solid 1px #576568;
}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
Hope this helps! Sorry this code has some extraneous junk in it!
Stefan:
You might be interested in looking into the multiple menu feature. You could assign some pages to the main menu and others to a special menu. Then, in one menu call, only display pages that are in the main menu, and in the other call display all pages that are in either main or special menu. That would be one of the first cases where using the multiple menu feature actually makes sense.
See this post for some quick instructions on how to use it: http://forum.WebsiteBaker.org/index.php/topic,1023.msg6183.html#msg6183
Hope you understand what I mean and can dig your way through it.
generic:
Thanks for the info, but I still see I will have to hard code something as you havd a few != for links like contact, etc.
I am looking for some easy to use drop down menu system I could apply to one specific menu, like menu (0,2) where the end client could just add pages in the "pages" area with a parent and have that item appear in the dropdown below the parent.
I would think that including the dropdown code using a snipet would be a simple answer, to apply it to a specific menu. Now all I need is someone who is able to write the code to generate dropdowns upon rollover of the parent menu item.
I pay well if anyone can figure it out :)
Navigation
[0] Message Index
[#] Next page
[*] Previous page
Go to full version