DHTML Menu problem.
Ok, I bought Xcartmods dhtml flyout menu at first for a client, It worked ok. But i decided to make my own menu that will go down instead of to the side, and move the boxex down and it should look the same for both FF and IE
You can see another version of it here live:
http://www.tutorial.nu/portfolio/dhtml/menu.htm
Now im trying to implement it in Xcart by doing this in a separate template wich i load into home.tpl somewhere:
Code:
{capture name=menu}
<div id="button">
<ul id="list_menu_html">
<li><a href="/">Start</a></li>
<br />
{section name=cat_num loop=$categories}
<li><a href="#">{$categories[cat_num].category|escape}</a>
<ul>
{section name=subcat_num loop=$subcategories}
<li>
<a href="home.php?cat={$subcategories[subcat_num].categoryid}">{$subcategories[subcat_num].category|escape }</a>
</li>
{/section}
</ul>
</li>
{/section}
<li> </li>
<li><a href="#">Hjälp</a>
<ul>
<li><a href="http://">Kontakta oss</a></li>
<li><a href="http://">Glömt Lösenord?</a></li>
<li><a href="http://">Köpvillkor</a></li>
<li><a href="http://">Personuppgifter</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
initMenu();
</script>
{/capture}
{include file="menu.tpl" menu_title=$lng.lbl_categories menu_content=$smarty.capture.menu }
<br />
CSS
Code:
/****************************************************************************************
* Layout för menyn
****************************************************************************************/
#button {
width: 15em;
padding: 0 0 1em 0;
margin-bottom: 0;
color: #000000;
z-index:2;
}
#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
background-color: #ffffff;
}
#button li {
border-bottom: 1px solid #000000;
margin: 0;
}
#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
color: #000000;
text-decoration: none;
width: 100%;
}
html>body #button li a {
width: auto;
}
#button li a:hover {
color: #000000;
background-color: #e7e6e0;
}
/****************************************************************************************
* texter och dyl
****************************************************************************************/
/* Main meny */
#list_menu_html a{
color:#000000;
width: 200px;
text-decoration:none;
font-weight:bold;
z-index:1;
}
/* Undermeny */
#list_menu_html ul li a{
color: #000000;
font-weight:normal;
}
/* Under under meny */
#list_menu_html ul li ul li a{
color: #000000;
font-style:italic;
font-size:0.9em;
font-weight:normal;
}
/* Aktiv meny */
#list_menu_html .activeMenuLink{
}
/*
Inga bullets
*/
#list_menu_html li{
list-style-type:none;
}
/*
Ingen margin eller padding.
*/
#list_menu_html, #list_menu_html ul{
margin:0px;
padding:0px;
}
/* Margin av undermeny och items */
#list_menu_html ul{
display:none;
margin-left:0px;
padding-left: 10px;
background-color: #ffffff;
}
javascript :
Code:
var activeMenuItem = new Array();
function isUlInArray(inputObj,ulObj){
while(inputObj && inputObj.id!='list_menu_html'){
if(inputObj==ulObj)return true;
inputObj = inputObj.parentNode;
}
return false;
}
function showHideSub(e,inputObj)
{
if(!inputObj)inputObj=this;
var parentObj = inputObj.parentNode;
var ul = parentObj.getElementsByTagName('UL')[0];
if(activeMenuItem.length>0){
for(var no=0;no<activeMenuItem.length;no++){
if(!isUlInArray(ul,activeMenuItem[0]) && !isUlInArray(activeMenuItem[0],ul)){
activeMenuItem[no].style.display='none';
activeMenuItem.splice(no,1);
no--;
}
}
}
if(ul.offsetHeight == 0){
ul.style.display='block';
activeMenuItem.push(ul);
}else{
ul.style.display='none';
}
}
function showHidePath(inputObj)
{
var startTag = inputObj;
showHideSub(false,inputObj);
inputObj = inputObj.parentNode;
while(inputObj){
inputObj = inputObj.parentNode;
if(inputObj.tagName=='LI')showHideSub(false,inputObj.getElementsByTagName('A')[0]);
if(inputObj.id=='list_menu_html')inputObj=false;
}
}
function initMenu()
{
var obj = document.getElementById('list_menu_html');
var linkCounter=0;
var aTags = obj.getElementsByTagName('A');
var activeMenuItem = false;
var activeMenuLink = false;
var thisLocationArray = location.href.split(/\//);
var fileNameThis = thisLocationArray[thisLocationArray.length-1];
if(fileNameThis.indexOf('?')>0)fileNameThis = fileNameThis.substr(0,fileNameThis.indexOf('?'));
if(fileNameThis.indexOf('#')>0)fileNameThis = fileNameThis.substr(0,fileNameThis.indexOf('#'));
for(var no=0;no<aTags.length;no++){
var parent = aTags[no].parentNode;
var subs = parent.getElementsByTagName('UL');
if(subs.length>0){
aTags[no].onclick = showHideSub;
linkCounter++;
aTags[no].id = 'aLink' + linkCounter;
}
if(aTags[no].href.indexOf(fileNameThis)>=0 && aTags[no].href.charAt(aTags[no].href.length-1)!='#'){
if(aTags[no].parentNode.parentNode && aTags[no].parentNode.parentNode.id!='list_menu_html'){
var parentObj = aTags[no].parentNode.parentNode.parentNode;
var a = parentObj.getElementsByTagName('A')[0];
if(a.id && !activeMenuLink){
activeMenuLink = aTags[no];
activeMenuItem = a.id;
}
}
}
}
if(activeMenuLink){
activeMenuLink.className='activeMenuLink';
}
if(activeMenuItem){
if(document.getElementById(activeMenuItem))showHidePath(document.getElementById(activeMenuItem));
}
}
This code is for 4.0.18
This works semi good.. it displays all head categories correct, but the subcategories does not. Also when i get to a submenu it wont fold out. Help me obi wan kenobi, you're my only hope |
