Hey up folks
Please can someone point out to me what's going wrong here? I'm using this
menumatic accessible CSS/ js menu for our company site, which sadly is made using joomla.... Grrr. Anyway, it formerly had this
menu from dynamic drive which was made into a joomla menu module so it could integrate with the back end by dart-creations - called
DC joomla slide menu module.
Reason for so much background? Well, in order to retain functionality, I've hacked the module rather than coding a separate menu which would otherwise have to be manually updated each time pages are added. Basically, I stripped out all trace of <ul> and <li> classes and IDs with the exception of the opening <ul> tag which has one of each. What worries me is this: 1, it doesn't work - even though I can't see anything in my code that would stop it. It's just the js that doesn't work, not the menu. CSS flyouts are working brilliantly! The other thing is, the script doesn't generate the child elements if I strip out the
<![CDATA['.$item->name.']]>and leave it with
$item->name;So, correct me if I'm wrong, but the CDATA thingy relates to javascript? Hence why I tried to strip it out. The example script doesn't use any of that malarkey.
Anyway - here's the source of the working example from menumatic, followed by my page source. Any help, much appreciated! BTW - I've checked all the paths using web developer toolbar, and all the js is loading, so I don't think that's the issue. Also, you may notice that mootools is currently requested twice - the first one is a blank document, so I know there's no conflict there.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server" >
<title>MenuMatic Vertical Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.0/build/reset/reset-min.css">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" charset="utf-8" />
<link rel="stylesheet" href="css/MenuMatic.css" type="text/css" media="screen" charset="utf-8" />
<!--[if lt IE 7]>
<link rel="stylesheet" href="css/MenuMatic-ie6.css" type="text/css" media="screen" charset="utf-8" />
<![endif]-->
</head>
<body>
<div id="container" >
<a id="logo" href="http://greengeckodesign.com/projects/menumatic.aspx">MenuMatic</a>
<!-- BEGIN Menu -->
<ul id="nav">
<li><a href="#">Percoidei</a>
<ul>
<li><a href="#">Remoras</a>
<ul>
<li><a href="#">Echeneis</a></li>
<li><a href="#">Phtheirichthys</a></li>
<li><a href="#">Remora</a></li>
<li><a href="#">Remorina</a></li>
<li><a href="#">Rhombochirus</a></li>
</ul>
</li>
<li><a href="#">Tilefishes</a>
<ul>
<li><a href="#">Caulolatilus</a></li>
<li><a href="#">Lopholatilus</a></li>
<li><a href="#">Malacanthus</a></li>
</ul>
</li>
<li><a href="#">Bluefishes</a>
<ul>
<li><a href="#">Pomatomus</a></li>
<li><a href="#">Scombrops</a></li>
<li><a href="#">Sphyraenops</a></li>
</ul>
</li>
<li><a href="#">Tigerfishes</a>
<ul>
<li><a href="#">Amniataba</a></li>
<li><a href="#">Bidyanus</a></li>
<li><a href="#">Hannia</a></li>
<li><a href="#">Hephaestus</a></li>
<li><a href="#">Lagusia</a></li>
<li><a href="#">Leiopotherapon</a></li>
<li><a href="#">Mesopristes</a></li>
<li><a href="#">Pelates</a></li>
<li><a href="#">Pelsartia</a></li>
<li><a href="#">Pingalla</a></li>
<li><a href="#">Rhyncopelates</a></li>
<li><a href="#">Scortum</a></li>
<li><a href="#">Syncomistes</a></li>
<li><a href="#">Terapon</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Anabantoidei</a>
<ul>
<li><a href="#">Climbing perches</a>
<ul>
<li><a href="#">Anabas</a></li>
<li><a href="#">Ctenopoma</a></li>
</ul>
</li>
<li><a href="#">Labyrinthfishes</a>
<ul>
<li><a href="#">Belontia</a></li>
<li><a href="#">Betta</a></li>
<li><a href="#">Colisa</a></li>
<li><a href="#">Macropodus</a></li>
<li><a href="#">Malpulutta</a></li>
<li><a href="#">Parosphromenus</a></li>
<li><a href="#">Pseudosphromenus</a></li>
<li><a href="#">Sphaerichthys</a></li>
<li><a href="#">Trichogaster</a></li>
<li><a href="#">Trichopsis</a></li>
</ul>
</li>
<li><a href="#">Kissing gouramis</a></li>
<li><a href="#">Pike-heads</a></li>
<li><a href="#">Giant gouramis</a></li>
</ul>
</li>
<li><a href="#">Gobioidei</a>
<ul>
<li><a href="#">Burrowing gobies</a></li>
<li><a href="#">Dartfishes</a></li>
<li><a href="#">Eellike gobies</a></li>
<li><a href="#">Gobies</a></li>
<li><a href="#">Loach gobies</a></li>
<li><a href="#">Odontobutidae</a></li>
<li><a href="#">Sandfishes</a></li>
<li><a href="#">Schindleriidae</a></li>
<li><a href="#">Sleepers</a></li>
<li><a href="#">Xenisthmidae</a></li>
</ul>
</li>
</ul>
<!-- END Menu -->
<div id="content">
<h1>Vertical Menu Example</h1>
<p>MenuMatic takes a sematic ordered or unordered list of links and uses MooTools 1.2 to turn it into a dynamic drop down menu system, with enhanced usability and flair. For users without javascript, it falls back on a CSS menu system based on <a href="http://www.carroll.org.uk/" title="Matthew Carroll" target="_blank">Matthew Carroll's</a> keyboard accessible flavor of <a href="http://www.htmldog.com/articles/suckerfish/dropdowns/" title="Suckerfish CSS Dropdowns" target="_blank">Suckerfish Dropdowns</a> by <a href="http://www.htmldog.com/ptg/" title="Patrick Griffiths" target="_blank">Patrick Griffiths</a> and <a href="http://www.danwebb.net/" target="_blank" title="Dan Webb">Dan Webb</a>.</p>
</div>
</div>
<div id="footer" >
<a href="http://greengeckodesign.com/projects/menumatic.aspx" target="_blank" title="MenuMatic home page">MenuMatic</a> by Jason J. Jaeger at <a href="http://greengeckodesign.com" target="_blank" title="greengeckodesign">greengeckodesign.com</a>
</div>
<!-- Load the Mootools Framework -->
<script src="http://www.google.com/jsapi"></script><script>google.load("mootools", "1.2.1");</script>
<!-- Load the MenuMatic Class -->
<script src="js/MenuMatic_0.68.3.js" type="text/javascript" charset="utf-8"></script>
<!-- Create a MenuMatic Instance -->
<script type="text/javascript" >
window.addEvent('domready', function() {
var myMenu = new MenuMatic({ orientation:'vertical' });
});
</script>
<!-- begin google tracking code -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-2180518-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>
<!-- end google tracking code -->
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="blah" />
<meta name="description" content="blah" />
<meta name="generator" content="blah" />
<title>Title</title>
<link href="/edit/index.php?format=feed&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
<link href="/edit/index.php?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
<link href="/edit/templates/eastdevon/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="/edit/templates/eastdevon/css/menu.css" type="text/css" />
<script type="text/javascript" src="/edit/media/system/js/mootools.js"></script>
<script type="text/javascript" src="/edit/media/system/js/caption.js"></script>
<script type="text/javascript" src="/edit/modules/mod_slidemenu/ddlevelsfiles/MenuMatic_0.68.3.js"></script>
<link rel="stylesheet" href="/edit/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/edit/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/edit/templates/eastdevon/css/template.css" type="text/css" />
<link href="/edit/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<!--[if IE]>
<link href="/edit/templates/eastdevon/css/ie.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
<!--[if lte IE 6]>
<link href="/edit/templates/eastdevon/css/ieonly.css" rel="stylesheet" type="text/css" />
<![endif]-->
<style type="text/css">
<!--
#content {width:561px;}
-->
</style>
</head>
<body>
<div id="header">
<div class="moduletable_tele">
<span style="color: #ffffff; font-size: 15px;">Give us a call on</span><br /><span class="darkblue" style="font-size:22px;">0845 6349578</span> </div>
<div class="moduletable_search">
<form action="index.php" method="post" class="search_search">
<label for="mod_search_searchword">
Search </label>
<input name="searchword" id="mod_search_searchword" maxlength="20" alt="Go" class="inputbox_search" type="text" size="20" value="..." onblur="if(this.value=='') this.value='...';" onfocus="if(this.value=='...') this.value='';" /><input type="image" value="Go" class="button_search" src="/edit/images/M_images/searchButton.gif"/> <input type="hidden" name="option" value="com_search" />
<input type="hidden" name="task" value="search" />
</form>
</div>
<div class="moduletable_business">
<span class="royalblue" style="font-size:15px;">A business for your business</span> </div>
</div><!-- End header -->
<div id="wrapper">
<div id="main_wrap">
<div id="left">
<div class="moduletable_newMainMenu">
<ul class="menu" id="nav"><li><a href="http://192.168.101.232/edit/">Home</a></li><li><a href="/edit/index.php?option=com_content&view=section&id=7&Itemid=55">IT Services</a><ul><li><a href="/edit/index.php?option=com_content&view=article&id=66&Itemid=122">Online Data Backup</a><ul><li><a href="/edit/index.php?option=com_content&view=article&id=67&Itemid=123">How Does it Work ?</a></li></ul></li><li><a href="/edit/index.php?option=com_content&view=article&id=59&Itemid=124">Remote Management</a></li><li><a href="/edit/index.php?option=com_content&view=article&id=62&Itemid=125">IT Support</a></li><li><a href="/edit/index.php?option=com_content&view=article&id=63&Itemid=126">IT Purchasing</a></li><li><a href="/edit/index.php?option=com_content&view=article&id=71&Itemid=127">Business Broadband</a><ul><li><a href="/edit/index.php?option=com_content&view=article&id=82&Itemid=143">ADSL Details</a></li></ul></li><li><a href="/edit/index.php?option=com_content&view=article&id=74&Itemid=128">Security</a></li><li><a href="/edit/index.php?option=com_content&view=article&id=75&Itemid=129">Apple MAC Support</a></li></ul></li><li><a href="/edit/index.php?option=com_content&view=section&id=5&Itemid=54">Web Services</a><ul><li><a href="/edit/index.php?option=com_content&view=article&id=53&Itemid=130">Internet Marketing</a><ul><li><a href="/edit/index.php?option=com_content&view=article&id=72&Itemid=131">Search Engine Marketing</a></li><li><a href="/edit/index.php?option=com_content&view=article&id=56&Itemid=132">Email & SMS Marketing</a></li></ul></li><li><a href="/edit/index.php?option=com_content&view=article&id=54&Itemid=133">Web Design</a><ul><li><a href="/edit/index.php?option=com_content&view=article&id=64&Itemid=134">Content Creation</a></li><li><a href="/edit/index.php?option=com_content&view=article&id=43&Itemid=135">Keyword Analysis</a></li></ul></li><li><a href="/edit/index.php?option=com_content&view=article&id=57&Itemid=136">eCommerce</a></li><li><a href="/edit/index.php?option=com_content&view=article&id=58&Itemid=137">Intranet Solutions</a></li></ul></li><li><a href="/edit/index.php?option=com_content&view=article&id=81&Itemid=109">Telecom Services</a><ul><li><a href="/edit/index.php?option=com_content&view=article&id=76&Itemid=138">Phone Systems</a></li><li><a href="/edit/index.php?option=com_content&view=article&id=77&Itemid=139">Handsets & Softphones</a></li><li><a href="/edit/index.php?option=com_content&view=article&id=78&Itemid=140">Numbers & Lines</a></li><li><a href="/edit/index.php?option=com_content&view=article&id=79&Itemid=141">Installation</a></li><li><a href="/edit/index.php?option=com_content&view=article&id=80&Itemid=142">Phone Accessories</a></li></ul></li><li><a href="/edit/index.php?option=com_content&view=article&id=48&Itemid=56">News</a></li><li><a href="/edit/index.php?option=com_content&view=article&id=49&Itemid=57">Partners</a></li><li><a href="/edit/index.php?option=com_content&view=article&id=45&Itemid=53">About Us</a></li><li><a href="/edit/index.php?option=com_ckforms&view=ckforms&id=2&Itemid=60">Contact Us</a></li><li><a href="/edit/index.php?option=com_content&view=article&id=68&Itemid=58">Customers</a></li><li><a href="/edit/index.php?option=com_ckforms&view=ckforms&id=1&Itemid=110">Free Online Backup</a></li><li><a href="/edit/index.php?option=com_joomap&Itemid=112">Sitemap</a></li><li><a href="/edit/index.php?option=com_content&view=article&id=73&Itemid=120">CMS</a></li></ul><script src="http://www.google.com/jsapi" type="text/javascript"></script><script type="text/javascript">google.load("mootools", "1.2.1");</script><script type="text/javascript">
window.addEvent('domready', function() {
var myMenu = new MenuMatic({ orientation:'vertical' });
});
</script>
</div>
<div class="moduletable_leftMod">
<div class="left_mod_title">
<h4><span class="darkblue">Try our online<br />data backup <br />system for </span><span class="lightblue">free</span></h4>
</div>
<div style="background-image: url('/edit/images/stories/backup_system.jpg');" class="left_mod_graphics"><a href="/edit/index.php?option=com_content&view=article&catid=43&id=66&Itemid=55"><img src="/edit/images/stories/read_more.gif" alt="Read more about our online backup systems" style="float: right; margin: 5px;" title="Read more about our online backup systems" height="13" width="73" /></a></div> </div>
</div><!-- End left -->
<div id="content">
<div style="clear:both; background-color: #c8e0f5">
<span class="breadcrumbs pathway">
Home</span>
</div>
<div class="moduletable_topmod">
<div class="topmod_inner_box1"><a href="/edit/index.php?option=com_content&view=section&id=5&Itemid=54" id="webserviceslink"></a>
<div class="topmod-text">
<h4 style="text-align: center;" class="darkblue">Web Services</h4>
<ul class="orange_dot">
<li>Web Design</li>
<li>Search Engine Optimisation</li>
<li>Registration & Hosting</li>
</ul>
</div>
<div class="topmod_readmore"><a href="/edit/index.php?option=com_content&view=section&id=5&Itemid=54"><img src="/edit/images/stories/read_more.gif" alt="Read more about East Devon IT Web services" title="Read more about East Devon IT Web services" height="13" width="73" /></a></div>
</div> </div>
<div class="moduletable_topmod">
<div class="topmod_inner_box2"><a href="/edit/it-services" id="itserviceslink"></a>
<div class="topmod-text">
<h4 style="text-align: center;" class="darkblue"><a href="/edit/index.php?option=com_content&view=section&id=7&Itemid=64">IT Services</a></h4>
<ul class="orange_dot">
<li><a href="/edit/index.php?option=com_content&view=article&id=59:remote-management&catid=42:managed-services&Itemid=64">Managed IT Services</a></li>
<li><a href="/edit/index.php?option=com_content&view=article&id=67:online-backup-how-does-it-work&catid=43:online-data-backup&Itemid=64">Online Data Backup</a></li>
<li>Infrastructure Improvements</li>
</ul>
</div>
<div class="topmod_readmore"><a href="/edit/index.php?option=com_content&view=section&id=7&Itemid=64"><img src="/edit/images/stories/read_more.gif" alt="Read more about East Devon IT Web services" title="Read more about East Devon IT Web services" height="13" width="73" /></a></div>
</div> </div>
<div class="moduletable_topmod">
<div class="topmod_inner_box3"><a href="/edit/telecom-services" id="telecomserviceslink"></a>
<div class="topmod-text">
<h4 style="text-align: center;" class="darkblue">Telecoms</h4>
<ul class="orange_dot">
<li><a href="/edit/index.php?option=com_content&view=article&id=76:phone-systems&catid=38:systems-a-phones&Itemid=138">Systems & phones</a></li>
<li><a href="/edit/index.php?option=com_content&view=article&id=78:numbers-a-lines&catid=39:numbers-a-lines&Itemid=140">Numbers & Lines</a></li>
<li><a href="/edit/index.php?option=com_content&view=article&id=79:installation&catid=40:installation&Itemid=141">Installation</a> <br /></li>
<li> <a href="/edit/index.php?option=com_content&view=article&id=80:phone-accessories&catid=41:accessories&Itemid=142">Accessories</a></li>
</ul>
</div>
<div class="topmod_readmore"><a href="/edit/telecom-services"><img src="/edit/images/stories/read_more.gif" alt="Read more about East Devon IT Web services" title="Read more about East Devon IT Web services" width="73" height="13" /></a></div>
</div> </div>
<div style="clear:both;">
<div class="blog">
<div class="leading">
<h1 style="text-align: left;">COntent</h1>
<p style="text-align: justify;">Content</p>
<p style="text-align: justify;">Content</p>
<p style="text-align: justify;">Content</p>
<p style="text-align: justify;">Content<a href="/edit/index.php?option=com_ckforms&view=ckforms&id=2&Itemid=60">give us a call today</a>.</p>
</div>
<span class="leading_separator"> </span>
</div>
</div>
</div><!-- End content-->
<div id="right">
<div class="moduletable_rightMod">
<div class="right_mod_title">
<h4><span class="darkblue">Content</span><br /><span class="lightblue">News</span></h4>
</div>
<div style="background-image:url(http://www.eastdevon.it/images/stories/EDIT_news.jpg);" class="right_mod_graphics"><a href="/edit/index.php?option=com_content&view=article&id=48&Itemid=56"><img width="73" src="/edit/images/stories/read_more.gif" alt="Read more about East Devon IT news" height="13" style="float: right; margin: 5px;" title="Read more about East Devon IT news" /></a></div> </div>
<div class="moduletable_rightMod">
<div class="right_mod_title">
<h4><span class="darkblue">Need </span><span class="lightblue">Mac</span><br /><span class="darkblue">Support?</span></h4>
</div>
<div style="background-image: url('/edit/images/stories/mac_support.jpg');" class="right_mod_graphics"><a href="/edit/index.php?option=com_content&view=category&id=48&Itemid=55"><img src="/edit/images/stories/read_more.gif" alt="Read more about East Devon IT Mac support" style="float: right; margin: 5px;" title="Read more about East Devon IT Mac support" height="13" width="73" /></a></div> </div>
<div class="moduletable_rightMod">
<div class="right_mod_title">
<h4><span class="darkblue">Telecoms & <span class="lightblue">VoIP</span><br />Services</span></h4>
</div>
<div class="right_mod_graphics" style="background-image: url('/edit/images/stories/telecoms.jpg');"><a href="/edit/index.php?option=com_content&view=section&id=6&Itemid=109"><img height="13" width="73" src="/edit/images/stories/read_more.gif" alt="Read more about East Devon IT new telecom services" title="Read more about East Devon IT telecom services" style="float: right; margin: 5px;" /></a></div> </div>
<div class="moduletable">
<p><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a></p> </div>
</div><!-- End right-->
<div style="clear: both;">
</div>
</div><!-- End main_wrap -->
</div><!-- End wrapper -->
<div id="footer">
<div id="footer_bottom">
<div class="moduletable_copyright">
Copyright notice etc</div>
<div class="moduletable">
<ul class="menu_bottom"><li class="item61"><a href="/edit/index.php?option=com_content&view=frontpage&Itemid=61"><span>Home</span></a></li><li class="item62"><a href="/edit/index.php?option=com_content&view=article&id=45&Itemid=62"><span>About Us</span></a></li><li class="item63"><a href="/edit/index.php?option=com_content&view=section&id=5&Itemid=63"><span>Web Services</span></a></li><li class="item64"><a href="/edit/index.php?option=com_content&view=section&id=7&Itemid=64"><span>IT Services</span></a></li><li class="item65"><a href="/edit/index.php?option=com_joomap&Itemid=65"><span>Sitemap</span></a></li><li class="item66"><a href="/edit/index.php?option=com_ckforms&view=ckforms&id=2&Itemid=66"><span>Contact Us</span></a></li></ul> </div>
</div>
</div><!-- End footer -->
</body>
</html>
Posts Auto Merged: 07 August 2009, 02:50:54 Reason: Double Post
Well it's not my html - I tried it on another static page with the js added and it's fine.
Maybe my time would be better spent adding CSS flyouts to the old menu for when js is disabled?
Posts Auto Merged: 07 August 2009, 13:40:20 Reason: Double Post
Meh
Have discovered that the reason it doesn't work is that joomla uses moo v1.11 and the menu is using moo v1.2.1 and there is a conflict between them. So back to the drawing board. I now need to get the old menu to work using CSS flyouts rather than get javascript to work on a CSS menu.
Wish me luck peeps!
New Posts RSS Feed