WebsiteBaker Community Forum
General Community => WebsiteBaker Website Showcase => Topic started by: CaptApollo on January 24, 2006, 08:49:21 PM
-
Phi Delta Phi International Legal Fraternity: http://www.phideltaphi.org/
Flyout menus, dynamic header graphics, page sections, bilingual template...
My second effort with WB! Please let me know what you think!
-
that is impressive,
but am I correct that you are unable to update the top menu, and the botom menu without hard code work right, if you were able to implement a fly out menu using websitebakers system, please let us know who you did it.
-
I agree, really impressive! :-o
But I suppose you ARE able to update the top and bottom menu.
Just by creating a second and third menu block, right ? :wink:
What I am more intressed in is:
a) How you integrated "News" and "Events" on the first page
b) What your "ninty features" consist in
c) If you would share your knowledge/template with the community
One of the (technical) most impressive WB-Sites.
Congrats again :-D
Virgil
-
Thanks for the compliments! :-D
Yes, you can add sections to the top menu--it took some hacking of the menu code, which I will post when I get home from work. It's actually entirely CSS-based, so no writing those pain-in-the-butt javascript files like some menu scripts require. I basically used a modified version of the setup in this tutorial: http://www.seoconsultants.com/css/menus/horizontal/
(http://www.seoconsultants.com/css/menus/horizontal/) ..I made it so that the menu items expand to fill the alotted space instead of wrapping.
The news and events and additional menu at the bottom are just mysql queries, which I will also post.
Sorry I can't share the template, as it was licensed from templatemonster.com .
-
Thanks for the compliments! :-D
Yes, you can add sections to the top menu--it took some hacking of the menu code, which I will post when I get home from work. ...
The news and events and additional menu at the bottom are just mysql queries, which I will also post.
You're welcome, :-) I'm looking forward to the detailes... : :|
Sorry I can't share the template, as it was licensed from templatemonster.com .
Maybe we missunderstand... :roll:
I mean not the template with all layout and grafic work, but rather the index.php and ".css files... in order to better understand your coding
Thx
Virgil
-
Very interesting. Keep going! :-)
Vincent
-
Excellent. Very professional.
-
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!
-
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.
-
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 :)
-
CaptApollo:
Dropdowns and bottom menus are just what I'm looking for. But, I'm not a coder, so could you please indulge me and tell me where to put the code you so generously shared to make this happen? I'm assuming not in the template.... :?
Thanks!
-
Great job on the site.
-
CaptApollo:
Dropdowns and bottom menus are just what I'm looking for. But, I'm not a coder, so could you please indulge me and tell me where to put the code you so generously shared to make this happen? I'm assuming not in the template.... :?
Thanks!
Hi ... check out css.maxdesign.com.au (http://css.maxdesign.com.au), there you find the "listamatic" lots of nice info about lists ... and in one of their resources they are talking about the drop-downs in menus ...
cheers
KLaus
-
CaptApollo:
Dropdowns and bottom menus are just what I'm looking for. But, I'm not a coder, so could you please indulge me and tell me where to put the code you so generously shared to make this happen? I'm assuming not in the template.... :?
Thanks!
Hi ... check out css.maxdesign.com.au (http://css.maxdesign.com.au), there you find the "listamatic" lots of nice info about lists ... and in one of their resources they are talking about the drop-downs in menus ...
Kweitzel and Capt. Apollo,
I visited the pixieline site http://www.pixeline.be/links/index.php am still questioning where to put the code. Do I need to change the template (it seems to call for javascript, so do I need to put that at the top of the template)? Sorry to be such a pest, but I really would like to have my menu show dropdowns rather than expand and also have a menu at the bottom. I am using reuben's css-simple template modified. Here is my site: http://elymn.org
I appreciate any help you can give. Again, not a coder, just an HTML person sort of guessing what to do.
-
OK ... the templates are actually the disign of your WB. Those kinds of menus do require you to update your template.
The CSS Stuff I suggested is straight forward, you just put it in the screen.css file and then you can call your standard menu embedded by the equired tags, css-divs or css-classes.
cheers
Klaus
-
@webgoddess
If i understand you right, you mean a menu like on this site
http://www.isafi.fr/
Here is what the developper wrote about he make this menu
http://forum.WebsiteBaker.org/index.php/topic,2838.msg17795.html#msg17795
Hope this helps
Matthias