Solution 3: CSS DROPDOWN MENU - NO JavaScript
Friends, I put my own spin on the CSS dropdown. This is like nothing I have seen on this forum to date. I think many of you will enjoy it. A lightning fast dynamic CSS driven submenu system that uses no JavaScript and only CSS files.
Code: Select all
<----------------CREATE-------------->
inc_script/frontend_render/css_dropdown.php
<---------------------------------------->
<--------------OPEN------------------>
write file: inc_script/frontend_render/css_dropdown.php
<?php
$content['all'] = str_replace('{DROPDOWN}', build_dhtmlmenu(0, 'level', ''), $content['all']);
?>
<----------------CLOSE--------------->
<---------------OPEN------------------>
write file: include/inc_front/front.func.inc.php
starts @ ln 2498:
function build_dhtmlmenu( ... ) {
edit ln 2535:
$s .= build_dhtmlmenu($key, $class, $activeclass, $counter+1);
// comment: I added ', $activeclass,' to recursively pass active class name if needed and to properly nest the $counter+1 to correspond to the function declaration.
edit ln 2541 - 2545:
2541 if($s) {
2542 $g = "\n<ul";
2543 if($counter>=0 && $class) $g .= ' class="'.$class.$counter.'"';
2544 $g .= ">\n".$s."</ul>\n";
2545 }
// comment: I modified the nested if to check if the counter is 0 or higher and the class variable is not null (which it shouldn't if you are making this menu system work properly), then the <ul tag will get the class name passed to the function along with the level appended to it and the menu is built dinamically with levels declared as classes.
// comment: this resolves the issue I was having in the first place.
<----------------CLOSE--------------->
<-------------DOWNLOAD------------>
file: csshover.htc
from: http://www.xs4all.nl/~peterned/csshover.html
to: phpwcms_template/inc_css/csshover.htc
<---------------------------------------->
<----------------CREATE-------------->
phpwcms_template/inc_css/menyou_css.css
<---------------------------------------->
<---------------OPEN------------------>
write file: phpwcms_template/inc_css/menyou_css.css
/*------------------------ CSS DROPDOWN MENU REPLACEMENT TAG CSS -------------------- */
/* We must acknowledge the hard work of Peterned and Eric Meyer for setting the stage */
/* for this CSS driven, no-JavaScript menu system. Report bugs to toszter@yahoo.com. */
/* In order for this to work properly, please download csshover.htc from Peterned: */
/* http://www.xs4all.nl/~peterned/csshover.html */
/* Place csshover.htc into your inc_css directory with this and the primary CSS file. */
/* BE SURE to @import a one-tag CSS file before declaring the body tag for your pages */
/* with this inside: */
/* body { behavior: url(/phpwcms_template/inc_css/csshover.htc); } */
/* Good luck.. Post your coments on the PHPWCMS FORUM: http://www.phpwcms.de/forum/ */
/* BEGIN Menu Definitions */
div#pageMenu { /* PROPRIETARY: This is capital-B menu DIV tag */
font: 10px Verdana, Arial, Helvetica, sans-serif;
background: url(http://capital-b.com/picture/img_site/main_r2_c1.jpg) 0 0 no-repeat;
height: 21px;
margin: 0px;
padding: 0px 0px 0px 70px;
white-space: nowrap;
}
div#pageMenu ul { /* 1st Level UL in the DIV [Inh] */
margin: 0px;
padding: 0px;
background: white; /* UL entire background */
border: 1px solid #FF5809; /* UL outer border */
border-width: 0 1px; /* UL top/bottom = 0; UL left/right = 1 */
}
div#pageMenu li { /* 1st Level LI in the DIV **TOP ROW OF LINKS ONLY** [Inh] */
z-index: 50;
position: relative; /* Allows for absolutely positioned children */
list-style: none; /* Removes bullets */
margin: 0px; /* Removes all margins explicitly for Opera */
float: left; /* We want the list items to line up horizontally */
width: auto; /* List items need to be the same width */
line-height: 1em;
}
div#pageMenu li:hover { /* NO MISTAKE: apply hover effect to list items, not links */
background: url(http://capital-b.com/picture/img_site/menu_bg_hover.jpg) 0 0 repeat-x;
}
div#pageMenu ul ul { /* 2nd level UL in the DIV, child of 1st UL [Inh] */
position: absolute; /* Position nested UL at top of parent LI */
width: 125px; /* CHANGE WIDTH: ULs must be equal width to prevent breakage */
display: none; /* Hide any UL descending from a UL */
}
div#pageMenu ul ul li {
width: 125px;
border-bottom: 1px solid #FF5809;
}
div#pageMenu li a { /* THIS affects top row structure elements only */
position:relative; /*Prevents menus from displaying in old Safari */
z-index: 151;
display: block; /* Each link has block level box like <p> or <div> */
margin: 0px;
padding: 4px 10px 5px 4px; /* width of the cells includes this right and left padding. */
text-decoration: none;
width: 100%; /* Set a width for IE/Win bug fix */
voice-family: "\"}\" "; voice-family: inherit;
width: 35px; /* CHANGE WIDTH: Confuse old IE/Win; In top row links in new browsers*/
}
div#pageMenu li li a { /* THIS affects all subsequent elements in DROPDOWN list */
padding: 4px 0px 5px 4px; /* width of the cells includes this right and left padding. */
margin: 0px;
width: 100%; /* Set a width for IE/Win bug fix */
voice-family: "\"}\" "; voice-family: inherit;
width: 121px; /* CHANGE WIDTH: Confuse IE/Win; set width in good browsers*/
}
div#pageMenu>ul a { /* IE/Win Hack: this gets ignored by inferior browsers */
width: auto;
}
div#pageMenu ul.level1 li:hover ul.level2,
div#pageMenu ul.level2 li:hover ul.level3 {
display: block;
}
div#pageMenu ul.level2 {
top: 19px;
left: -1px;
border-top: 1px solid #FF5809; /* top Border for the 1st sub menu. */
}
div#pageMenu ul.level3 {
top: -1px;
left: 125px; /* CHANGE WIDTH: Controls where sub-sub menus appear */
border-top: 1px solid #FF5809; /* top Border for the 2nd sub menu. */
}
/* END Menu Definitions */
<----------------CLOSE--------------->
<----------------CREATE-------------->
phpwcms_template/inc_css/csshover.css
<---------------------------------------->
<---------------OPEN------------------>
write file: phpwcms_template/inc_css/csshover.css
//repaired 3.3.05 bug reported by user cyrano.
body {
behavior: url(/phpwcms_template/inc_css/csshover.htc);
}
<----------------CLOSE--------------->
<---------------OPEN------------------>
write file: phpwcms_template/inc_css/frontend.css
@import url("csshover.css");
@import url("menyou_css.css");
<----------------CLOSE--------------->
//COMMENT: In your template, you should now use the replacement tag {DROPDOWN} inside a <DIV id="pageMenu"></DIV>
RESULTING HTML:
<div id="pageMenu">
<ul class="level1">
<li><a href="index.php?service">Service</a>
<ul class="level2">
<li><a href="index.php?id=16,0,0,1,0,0">Service Policy</a></li>
<ul class="level3">
<li><a href="index.php?id=20,0,0,1,0,0">1 - Determine Scope</a></li>
</ul>
</li>
<li><a href="index.php?id=18,0,0,1,0,0">Satisfaction</a></li>
</ul>
</li>
<li><a href="index.php?design">Web Design</a>
<ul class="level2">
<li><a href="index.php?id=14,0,0,1,0,0">FAQs</a></li>
</ul>
</li>
<li><a href="index.php?photo">Photography</a>
<ul class="level2">
<li><a href="index.php?id=15,0,0,1,0,0">FAQs</a></li>
</ul>
</li>
<li><a href="index.php?contact">Inquire</a></li>
</ul>
</div>
which is created entirely using CSS, indeed a CSS Zen Garden.
I designed the menu to work with my files, obviously, and I did my best to comment the individual CSS attributes so that others can modify the styles with ease. This really uses no JavaScript and because the CSS is cashed, the setup loads rather quickly.
I've tried to make it as compatible with the latest browsers but I have not tested on Safari. This works great in both WinIExploder and FireFox so I gather it will work in Safari. At least from my previous experience, SAFARI renders nearly identically to FireFox.
A HUGE THANKS goes out to Eric Meyer and Peterned who made this possible. For more information about this and other very cool CSS techniques, I suggest eneryone visits Peterned's site, mentioned above, and buys Eric Meyer's
More Eric Meyer on CSS.
Great appreciation also goes out to Ben at emergentmediagroup dot com for introducing phpwcms to me when I was busy re-inventing the wheel.
Please give me feedback on this technique and my site, though I know I've left the content for last.
Thank you all for this incredible product.
~toszter
) 
:
