1320AutoSports |
08-14-2004 06:17 PM |
Flyout Menu 4.0.x Needs Work, but hey.. getting there
Since I know little about programming, I figure most can help.. I got the flyout menu to work on 4.0.1 (sure it will work on 4.0.0) but here is the code.
Create new file named dropdown.tpl and paste this into it and save
Code:
{* dropdown.tpl from Ben Kevan www.mtgcardhouse.com *}
{literal}
<script language="JavaScript1.2">
//Pop-it menu- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use
var linkset=new Array()
//SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT
{/literal}
{section name=cat_num loop=$categories}
{assign var="temp" value="0"}
{section name=cat loop=$allcategories}
{if $allcategories[cat].parentid eq $categories[cat_num].categoryid_path}
{$temp}
{if $temp gt 0}
linkset[{$smarty.section.cat_num.index}] +='<div class="menuitems">{$allcategories[cat].category}</div>'
{else}
linkset[{$smarty.section.cat_num.index}] ='<div class="menuitems">{$allcategories[cat].category}</div>'
{/if}
{math equation="temp+1" temp=$temp assign=temp}
{/if}
{/section}
{/section}
{literal}
////No need to edit beyond here
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
var ns6=document.getElementById&&!document.all
var ns4=document.layers
function showmenu(e,which){
if (!document.all&&!document.getElementById&&!document.layers)
return
clearhidemenu()
menuobj=ie4? document.all.popmenu : ns6? document.getElementById("popmenu") : ns4? document.popmenu : ""
menuobj.thestyle=(ie4||ns6)? menuobj.style : menuobj
if (ie4||ns6)
menuobj.innerHTML=which
else{
menuobj.document.write('<layer name=gui bgColor=#081589 width=165 onmouseover="clearhidemenu()" onmouseout="hidemenu()">'+which+'</layer>')
menuobj.document.close()
}
menuobj.contentwidth=(ie4||ns6)? menuobj.offsetWidth : menuobj.document.gui.document.width
menuobj.contentheight=(ie4||ns6)? menuobj.offsetHeight : menuobj.document.gui.document.height
eventX=ie4? event.clientX : ns6? e.clientX : e.x
eventY=ie4? event.clientY : ns6? e.clientY : e.y
//Find out how close the mouse is to the corner of the window
var rightedge=ie4? document.body.clientWidth-eventX : window.innerWidth-eventX
var bottomedge=ie4? document.body.clientHeight-eventY : window.innerHeight-eventY
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<menuobj.contentwidth)
//move the horizontal position of the menu to the left by it's width
menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX-menuobj.contentwidth : ns6? window.pageXOffset+eventX-menuobj.contentwidth : eventX-menuobj.contentwidth
else
//position the horizontal position of the menu where the mouse was clicked
// menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX : ns6? window.pageXOffset+eventX : eventX
//same concept with the vertical position
if (bottomedge<menuobj.contentheight)
menuobj.thestyle.top=ie4? document.body.scrollTop+eventY-menuobj.contentheight : ns6? window.pageYOffset+eventY-menuobj.contentheight : eventY-menuobj.contentheight
else
menuobj.thestyle.top=ie4? document.body.scrollTop+event.clientY : ns6? window.pageYOffset+eventY : eventY
menuobj.thestyle.visibility="visible"
return false
}
function contains_ns6(a, b) {
//Determines if 1 element in contained in another- by Brainjar.com
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}
function hidemenu(){
if (window.menuobj)
menuobj.thestyle.visibility=(ie4||ns6)? "hidden" : "hide"
}
function dynamichide(e){
if (ie4&&!menuobj.contains(e.toElement))
hidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
hidemenu()
}
function delayhidemenu(){
if (ie4||ns6||ns4)
delayhide=setTimeout("hidemenu()",500)
}
function clearhidemenu(){
if (window.delayhide)
clearTimeout(delayhide)
}
function highlightmenu(e,state){
if (document.all)
source_el=event.srcElement
else if (document.getElementById)
source_el=e.target
if (source_el.className=="menuitems"){
source_el.id=(state=="on")? "mouseoverstyle" : ""
}
else{
while(source_el.id!="popmenu"){
source_el=document.getElementById? source_el.parentNode : source_el.parentElement
if (source_el.className=="menuitems"){
source_el.id=(state=="on")? "mouseoverstyle" : ""
}
}
}
}
if (ie4||ns6)
document.onclick=hidemenu
</script>
{/literal}
Replace your categories.tpl file with:
Code:
{* $Id: categories.tpl modified by Ben Kevan www.mtgcardhouse.com*}
{capture name=menu}
<div id="popmenu" class="menuskin" onMouseover="clearhidemenu();highlightmenu(event,'on')" onMouseout="highlightmenu(event,'off');dynamichide(event)">
</div>
{if $config.General.root_categories eq "Y"}
{section name=cat_num loop=$categories}
{assign var="tmp" value="0"}
{if $allcategories[cat].parentid != $categories[cat_num].categoryid_path}
{assign var="tmp" value="1"}
{/if}
<font class=CategoriesList>
<a href="home.php?cat={ $categories[cat_num].categoryid }" class="VertMenuItems" {if $tmp eq 1}onMouseover="showmenu(event,linkset[{$smarty.section.cat_num.index}])" onMouseout="delayhidemenu()"{/if}>
{ $categories[cat_num].category|escape }</a></font>
{/section}
{else}
{section name=cat_num loop=$subcategories}
<font class=CategoriesList>
<a href="home.php?cat={ $subcategories[cat_num].categoryid }" class=VertMenuItems>
{ $subcategories[cat_num].category|escape }</a></font>
{/section}
{/if}
{/capture}
{ include file="menu.tpl" dingbats="dingbats_categorie.gif" menu_title=$lng.lbl_categories menu_content=$smarty.capture.menu }
Lastly add:
Code:
{ include file="dropdown.tpl" }
into your home.tpl in the head section
As you see, you do not need to modify the categories.php since we can now just check to see if productid mathes categoryid_path.
BUGS:
When you hover over something with no categories it reports, undefined (working on fixing that)
for example. please go to
www.mtgcardhouse.com/store/home.php
Again I need all the help I can get since I am new to this programming stuff, and have never done it in my life. Thanks
EDIT: UPDATED CODE
|