Dynamic menus that include any s9y sidebar plugin, such as recent entries or the categories list, are possible and this tutorial shows how.
The approach taken in this tutorial is not the only option, and other theme designers may not even use the css '
son of suckerfish' menu as I have in the Andreas08 theme
(which will be available to download in a few days) 25-2-2006, postponed until further notice - working hard on so many projects and I want this theme to be perfect so that others can learn from it, if you are determined, and don't mind an incomplete theme, please email me for the zipfile.
The first step is to understand the dropdown menu is probably 99% styling using css. The smarty code needed is a no-brainer, and the javascript needed for IE is simply pasted into the head section of index.tpl.
To get a sidebar item to display in the header, or anywhere else for that matter, we need to use a small line of smarty code, and know the name of the plugin we want to use. This is important, any
plugin you use in your dropdown menu must be installed. If you don't want it to appear in your sidebar, then change its placement to 'hidden', otherwise your plugin will appear in your drop-down menu and in your sidebar.
To give an example, if we want to use the author list plugin, we would use the following code;
{serendipity_showPlugin class="@serendipity_authors_plugin" side="hidden" negate="null"}
The technical documentation at s9y explains the different components, but simply changing the plugin name, is all you need to do to put a different plugin into your menu.
Editing index.tpl
Your next step is going to be editing your index.tpl to include the menu. There are two blocks of code that need to be added to make this dropdown menu work. The first is the javascript needed to allow Internet Explorer to hide and then show the dropdown. This needs to be placed within the head section, and I recommend placing it just above the </head>.
<!-- Suckerfish menu fix for IE -->
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {ldelim}
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i
sfEls[i].onmouseover=function() {ldelim}
this.className+=" sfhover";
{rdelim}
sfEls[i].onmouseout=function() {ldelim}
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
{rdelim}
{rdelim}
{rdelim}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
The second block of code is the actual list needed to make the menu. The suckerfish menu uses an unordered <ul> list, but which needs to be given an id to work. I recommend reading the '
son of suckerfish' tutorial to get your head around its formatting.
<div id="navigation">
<ul id="nav">
<li class="selected"><a href="{$serendipityBaseURL}" accesskey="h">Blog Home</a></li>
<li><a href="#">Latest Entries</a>
<ul>{serendipity_showPlugin class="serendipity_plugin_recententries" side="hidden" negate="null"}</ul></li>
<li><a href="#">Categories</a>
<ul>{serendipity_showPlugin class="@serendipity_categories_plugin" side="hidden" negate="null"}</ul></li>
<li><a href="#">Latest Comments</a>
<ul>{serendipity_showPlugin class="serendipity_plugin_comments" side="hidden" negate="null"}</ul></li>
<li><a href="{$serendipityBaseURL}/archives">Archives</a></li>
</ul>
</div>
The last change is the additional styles needed to make your menu work. The following very basic block of code will to give you a bare bones menu, which I should warn you has hardly any styling, and could look ugly, so much so you might think the menu doesn't work, but I assure you it does.
#navigation, #nav ul{
margin: 0;
padding: 0;
list-style-type:none; }
#nav a {
display:block;
width: 10em; }
#nav li{
float: left;
list-style-type:none;
width: 10em; }
#nav li ul {
position: absolute;
width:18em;
left: -999em; }
#nav li ul a:link, #nav li ul a:visited, #nav li ul a:hover {
text-transform:none; }
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
height:auto; }
To really get the menu to work correctly and across all browsers we need to duplicate most of the styles found in your sidebar, and add quite a few more. The effort spent is well worth it when you see the final result. Putting all of those styles into this tutorial is beyond its scope, but download the andreas08 theme, and read the stylesheet which is fully commented.
If you successfully re-style this menu into your theme please make a comment below so other users can see your work and learn from your efforts.
