Collapsible Menu in Blogger
9:02 AMMy sidebar links were running out of control, so I decided to hook up a collapsible menu solution. A hunt around the internet turned up a nice javascript solution, but as usual I had endless trouble trying to get it to play nice with Blogger. For some reason Blogger's security model blocks some javascript from running in the site. Usually it's something as simple as changing &'s in a GET/POST string to &amp's; instead, but this time it was a lot more difficult. Here's how I got it working, so you don't have to waste as much time on it as I did.
I created an HTML/Javascript part on the sidebar and inserted the following block of code:
<ul id="containerul">
<li>
Art
<ul>
<li>
<a href="http://alantew.blogspot.com">Alan Tew</a>
</li>
<li>
<a href="http://www.maleev.com">Alex Maleev</a>
</li>
<li>
<a href="http://absoluteart.blogspot.com">Tim Kane</a>
</li>
</ul>
</li>
<li>
Wargaming
<ul>
<li cteopen="http://<your site address>/cte_specialminus.png" cteclosed="http://<your site address>/cte_specialplus.png">
<span style="font-weight:bold;">Lord of the Rings</span>
<ul>
<li cteitem="http://<your site address>/cte_specialpage.png">
<a href="http://www.lotr-collector.com/">LOTR Collector</a>
</li>
<li cteitem="http://<your site address>/cte_specialpage.png">
<a href="http://thelastalliance.com/">The Last Alliance</a>
</li>
<li cteitem="http://<your site address>/cte_specialpage.png">
<span style="font-weight:bold;"><a href="http://www.thepalantir.org/">The Palantir</a></span>
</li>
</ul></li>
<li cteopen="http://<your site address>/cte_specialminus.png" cteclosed="http://<your site address>/cte_specialplus.png">
<span style="font-weight:bold;">Warhammer 40k</span>
<ul>
<li cteitem="http://<your site address>/cte_specialpage.png">
<a href="http://www.advancedtautactica.com/">Advanced Tau Tactica</a>
</li>
<li cteitem="http://<your site address>/cte_specialpage.png">
<a href="http://www.tauonline.org/">Tau Online</a>
</li>
</ul></li></ul></li></ul>
<h2>Blogs</h2>
<ul id="anothercontainerul">
<li>
Personal
<ul>
<li>
<a href="http://olivepug.blogspot.com/">Olive Pug</a>
</li>
<li>
<a href="http://metrobuild.blogspot.com/">Under Construction</a>
</li>
</ul>
</li>
</ul>
<h2>Resources</h2>
<ul id="resourcecontainerul">
<li>
Web Design
<ul>
<li>
<a href="http://http://www.sxc.hu//">Stock.Xchng</a>
</li>
<li>
<a href="http://www.templatemonster.com/">Template Monster</a>
</li>
</ul>
</li>
</ul>
<script type="text/javascript"><!--
initiate(Array("containerul","anothercontainerul","resourcecontainerul")); // This must be placed after the menus in order to format them properly.
//--></script>
Then in the <HEAD> block of your site's template insert this code:
<script src='http://<your site address>/javascripts/cte_scripts.js' type='text/javascript'/>
<style type='text/css'><!--
@import "http://<your site address>/cte_styles.css";
--></style>
This all seems to work properly. If you want to add another container grouping, copy the grouping, paste it and change the block name. Then put the block name in as an input to the initiate() code block.
3 comments