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!





Leave a Reply

You must be logged in to post a comment.


SITES of the MONTH : 08/2005: linux-gamers.net - fireworks.verno.ru | 09/2005: viapontedinona.it
10/2005: RF Online Base | 11/2005: FREE-EOS | 12/2005: Asian Car Styling | 01/2006: DSLnachPankow.de
02/2006: Roma Victor Camp | 03/2006: NABUUR.COM | 04/2006: Styling+Design-Noord | 05/2006: VETOFISH
06/2006: Utah Antique Machinery News | 07/2006: lebuccaneer.com | 08/2006: Top-logiciel
09/2006: Concrete Connections | 10/2006: Fios Uniao | 11/2006: Casafree Maroc | 12/2006: Ainpg.com
1/2007: Parent Solo


xoopsfactory.com/blog powered by WordPress | Entries (RSS) | Comments (RSS)
Kugelschreiber, Buntstifte und mehr