Site Map Mara Editing Advanced Step by step
print

The Theme - Step by Step

The Menu bar

A Mara website can in principle use any kind of menu you like. If you find a third party menu system offered on Sourceforge or wherever, it should be possible to integrate it. Mara is extremely flexible in this respect.

Here, we'll look at using the provided menu plugin, which allows for top dropdown or cascading side menus.  In this case we're using a horizontal bar, so the top dropdown style is appropriate.

Importantly, before we make first use of it, we need to declare the menu plugin:

theme.php

<head>
   ..  other head stuff  ..
  <?php include_once plugin('menu'); ?>
</head>

Now, in the body of the page we need to create a div container for our menu, and put the menu call inside it..

  <div id="cms_top" >
    <div class="topmenu" >
      <?php menu('tree.mnu', 'dropdown');?>
    </div>
  </div>

The topmenu class causes special css to be loaded from the codebase/system.css file.  This is to ensure that the menu elements behave are required. You can modify this class in your own theme.css to produce a wide range of custom menu appearances.  Or, you can add an ID to the menu div and customize that. Whichever you prefer.

The menu call has two parameters. The first is the name of a file in the sitecfg folder, in this case tree.mnu which contains the actual menu items. The second indicates that the menu should act as a dropdown. The convention is that tree.mnu is the master menu for a site, and should contain links to all public content with the exception of blog pages. Other menus may also exist.

That's really all there is to putting a top menu on your theme.  Only as is, it ain't pretty. In fact, it's quite hard to use as the menu items overlap other text and have no background to distinguish them.  It's using the default blue for links, which works OK for a white background, but not black.  This is where your css skills come in. The menu system doesn't know what kind of material the menu might be overlaying, so you need to tell it to use a suitable style.

In fact the amount of css required to achieve a good-looking menu is surprisingly small. We could have hardcoded this into the system, but hey, Mara is a CMS, not a Web Builder, and the more hardcoding there is, the less customization is possible. So, you'd add this to your theme.css:

Menu css

/* The menu container must have a defined position. */
.topmenu {
  position:relative;
}

/* This affects all menu links in both the top row and the dropdowns */
.topmenu a {
  color:white;
  padding:2px 10px;
}

/* This affects the dropdown boxes */
.topmenu div {
  margin:2px 0px;
  background:blue;
  padding:1px 0px;
}

/* This affects any nested menu items */
.topmenu div div {
  margin-left:10px;
}

The result is a clearer and more stylish blue menu:

Here, I've kept the css code to the minimum needed to give a good-looking and functional result. You can make a whole range of customizations to menus including adding icons to distinguish local from offsite links, PDF documents from webpages, and so on. What we have here is quite adequate for a simple clean presentation though. It's maybe a surprise as to just how little code was needed to achieve it, too.

Responsiveness again..

The other thing you might notice is that the menu tends to fold over itself on narrow screens such as phones. It will still work OK, but it can look a bit rough, especially if menu items get split across lines due to word wrap.  @media clauses to the rescue once more, and using one we'll show you how you can totally change the appearance of  a menu, just with css: 

@media screen and (max-width:550px) {
 .topmenu {
    display:table;
    width:98%;
    margin:auto;
 }
 .topmenu a, .topmenu a.menu_dropdown, .topmenu a.menu_single {
   display:block; !important;
   background:#444;
   color:white;
   margin: 10px;
   text-align:center;   
   font-size:20px;
 }
 .topmenu div {
   margin:2px 0px;
   background:#111;
   padding:1px 0px;
 }
}

The key difference here is that when you shrink the browser window, what was a top row of clickable items has now become a vertical stack of items. This arises because they now have block (or tabular) display properties instead of inline.   We've also done a little embellishment to better suit the needs of the phone user. The text is larger, the buttons fill the screen widthways, and there is a gap between each and its neighbours - an important feature when you're poking at them with your fat sausage of a finger!

We use the table property for the container because this doesn't suffer the 'busting out' problem that plagues divs.  An alternative would be flex, although that has less browser support.

So, our overall menu css becomes:

.topmenu {
  position:relative;
}
.topmenu a {
  color:white;
  padding:2px 10px;
}
.topmenu div {
  margin:2px 0px;
  background:blue;
  padding:1px 0px;
}
.topmenu div div { 
  margin-left:10px; 
} 

@media screen and (max-width:550px) {
 .topmenu {
    display:table;
    width:98%;
    margin:auto;
 }
 .topmenu a, .topmenu a.menu_dropdown, .topmenu a.menu_single {
   display:block; !important;
   background:#444;
   color:white;
   margin: 10px;
   text-align:center;   
   font-size:20px;
 }
 .topmenu div {
   margin:2px 0px;
   background:#111;
   padding:1px 0px;
 }
}

Don't know about you, but I just feel that this has to be a better way to do things than spending hours ticking boxes on forms. Especially when such powerful changes can be made with comparatively little effort. Plus if you're afraid of breaking something, just take a copy of the file before you change it. You can't do that with an online form.