I have customized the dmry tree menu plugin by Hakan Demiray so that it will do what I want. It’s a great plugin, but I needed it to work a little differently. I wanted it to automatically open the child nodes of the selected menu item, so that users can see what is there.
I have submitted my modifications to the plugin for possibly inclusion in the next version. In the meantime I will make my version available for download here.
Update: Here is some code to add OpenAll and CloseAll links (in response to the comment by Alby below).
<a href=“#” onclick=“d_0.openAll();return false;” >Open all
</a>
<a href=“#” onclick=“d_0.closeAll();return false;” >Close all
</a>
Just put this code after the menu call in your page template (mine is in sidebar.php). If you want to you can use images or buttons instead of simple text for the link.
My church site is now on line using Wordpress as a CMS. Although we are still making improvements, there has been enough progress to begin to share some of what I have learned.
In order to use Wordpress as a CMS, there are several needs that have to be met. Some of the ones that come to mind are:
- navigation
- custom features
- user management
- ease of updating
In this post I want to share what I have learned about navigation. To make the site user-friendly it is important to put navigation controls where users expect to find them, which is normally either a horizontal menu bar at the top or a menu in the left side bar. I opted to use both. (You can try them out at the church site.)
To make the horizontal nav menu I have seen WP themes that hand code the links, but I wanted to have top level pages automatically appear in the menu. Here is the code I use:
<ul id=“topnav”>
<?php wp_list_pages(’sort_column=menu_order&title_li= &depth=1′); ?>
</ul>
Then you need to define the “topnav” list style to use an in-line list. Here is what I have in my style sheet:
#topnav
{
list-style:
none;
font-size:
1.0em;
margin:
0 0 0 178px;
padding: 3px 0px 3px
0;
text-align:
left;
font-family: Verdana, Arial, Sans-Serif;
font-weight:
bold;
}
#topnav ul
{
margin: 0;
padding: 0;
color: #BBC4A3;
}
#topnav ul li {
display: inline;
margin: 0;
}
#topnav li a:link, #topnav li a:visited
{
text-decoration:none;
color: #BBC4A3;
margin: 0;
border-color: #BBC4A3;
border-left: thin solid;
padding: 0 10px 0 10px;
}
#topnav li a:hover, #topnav li a:active
{
color: #F7F3ED;
}
There are probably a few places that this could be cleaned up, but anyway it works!
Next time I will write about the sidebar menu. . .
