using a list in your xoops mainmenu
In my humble opinion, the nicest an cleanest way to show xoops mainmenu is simply using a list to display our links. A list? Yes, we can use simple html unordered lists and this with less work. If you have cloned the default templateset and using the clone as active templateset, you are able to edit modultemplates in templatemanager.
Look into system - system_block_mainmenu.html!
Simply replace the existing source with this:
<ul id="mainmenulist">
<li><a href="<{$xoops_url}>/"><{$block.lang_home}></a></li>
<li><a href="<{$xoops_url}>/">static link</a></li>
<{foreach item=module from=$block.modules}>
<li><a href="<{$xoops_url}>/modules/<{$module.directory}>/index.php">
<{$module.name}></a></li>
<{foreach item=sublink from=$module.sublinks}>
<li><a class="submenu" href="<{$sublink.url}>">
<{$sublink.name}></a></li>
<{/foreach}>
<{/foreach}>
</ul>
will make a clean but ugly list from your mainmenu. But now you have all possibilities css can handle.
use:
#mainmenulist {
list-style-type:none;
margin:0;
padding: 10px;
padding-left:0;
}
#mainmenulist li {
display:block;
}
#mainmenulist li a {
font-weight:normal;
font-size: 12px;
padding-right: 0px;
text-decoration:none;
background: url(images/submenu.gif) no-repeat top left;
padding-left: 17px;
}
#mainmenulist li a:hover {
font-weight:bold;
font-size: 12px;
padding-right: 0px;
text-decoration:none;
background: url(images/submenu.gif) no-repeat top left;
padding-left: 17px;
}
#mainmenulist li a.submenu {
font-weight:normal;
color: #fc0;
font-size: 12px;
padding-right: 0px;
text-decoration:none;
background: url(images/submenu.gif) no-repeat top left;
padding-left: 17px;
}
in your style.css to display it like the actual mainmenu on xoopsfactory. Please grab that arrow (submenu.gif) and put the image into a folder called “images” within your actual xoops THEME folder.
This is not that nice, i know but i like it for the actual layout. I know that you are interested in trying yourself, so look at Listamatic and choose a style you want.
To fit most of the shown list types css, use the following mainmenu modultemplate instead:
<div id="navcontainer">
<ul id="navlist">
<li><a href="<{$xoops_url}>/"><{$block.lang_home}></a></li>
<li><a href="<{$xoops_url}>/">static link</a></li>
<{foreach item=module from=$block.modules}>
<li><a href="<{$xoops_url}>/modules/<{$module.directory}>/index.php">
<{$module.name}></a></li>
<{foreach item=sublink from=$module.sublinks}>
<li><a class="submenu" href="<{$sublink.url}>">
<{$sublink.name}></a></li>
<{/foreach}>
<{/foreach}>
</ul>
</div>
and then use the css which is shown below each menu example. Finished that exercise with success? Then you are ready to create your own examples
Have fun … and happy xoopsing!
