Tribiq CMS

Choose your language

4.1 Step-by-Step Add Menu

If you have been following the Step-by-Step Basic Template guide, your HTML-standard.tpl.php template may look like this:

We are going to add a menu to our website, specifically a drop-down "top" menu. This will live at the top of the page and provide your site visitors with navigation - menu's are also a way to directly add new Content Items.

Copy this code into your HTML-standard.tpl.php template, within the main_holder div:

<?php
include "templateincludes/topmenu.php";
?>

Your template code may now look like this:

<?php
$template_path = "templates/".SITENAME."/".$use_template_family;
?>

<div id="main_holder">
    <div id="header">
        <img src="<?php echo $template_path;?>/images/logo.gif" alt="My Company Name" />
    </div>
<?php
include "templateincludes/topmenu.php";
?>

<?php
include "templateincludes/content_bodymain.inc.php";
?>

<?php
include $template_path."/includes/footer.inc.php";
?>

</div>

Save the template file and refresh the Content Item that uses this template. It now may look something like this:


Now your page should be showing an unstyled menu, complete with the Add Menu Item icons, that let you create new Menu Items (and thus new Content). Let's style our menu so it looks more suitable.

Tribiq CMS comes with a preset style for the top menu. It’s a good idea to get your site working with the CSS as provided; once you have it working you can develop your own styles by editing the bundled files. We also need to make use of a reset.css file now - in order to make sure our menu is displaying consitantly across browsers.

To create a top menu using the bundled drop-down style, you will need copy the following bundled files to your new newtemplatefamily/styles/ folder from the default (bundled) "tribal-GPL-1066" Template:

  • the file tribal-GPL-1066/styles/topmenustyle.css to styles/
  • the file tribal-GPL-1066/styles/reset.css to styles/
  • the folder tribal-GPL-1066/images/menu and its contents to images/

This CSS file references the div "topmenu" and you will this in the following code snippets.

Replace:

<?php
include "templateincludes/topmenu.php";
?>

with:

<div id="topmenu_holder">
<div id="topmenu_holder_c">
<?php include "templateincludes/topmenu.php";?>

</div>

</div>


 

We should also put the content_bodymain include in a div of it's own too. Add a div around the PHP include that includes content_bodymain.inc.php. Therefore, your file should now look like this:

<?php
$template_path = "templates/".SITENAME."/".$use_template_family;
?>

<div id="main_holder">
    <div id="header">
        <img src="<?php echo $template_path;?>/images/logo.gif" alt="My Company Name" />
    </div>
<div id="topmenu_holder">
<div id="topmenu_holder_c">
<?php include "templateincludes/topmenu.php";?>

</div>

</div>


<div id="main_content">
<?php
include "templateincludes/content_bodymain.inc.php";
?>
</div>

<?php
include $template_path."/includes/footer.inc.php";
?>

</div>
 

Add this to your stylesheet.css file:

#main_content {
clear:both;
padding:10px 0px 10px 0px;
}

As you can see, the PHP snippet here still includes the topmenu.php file but is now wrapped in the "topmenu_holder" divs. If all is well your menu should now be presented in a drop-down manner:

If your menu is not styled and looks like a standard bullet list then you didn’t include the  topmenustyle.css stylesheet.

Top of Page