Adding a Horizontal Menu

Many websites today have a horizontal menu accross the page, often for basic navigation like "home", "about us" and "contact" type links.

In order to add that to your printfection store, follow these steps and then customise to taste.

Firstly, you will need to add the HTML for your menu to the base HTML section of your store. Where you need to put the this will depend on which them you are using.

If you are using Crestone, Oxford, Sandbox or Square Blocks, you will enter the menu HTML directly after:

<DIV id=logo><A title="##storename##"
href="##storeurl##">##logo##
</A></DIV></TD></TR>


If you are using Windom or Grays, you replace the <tr></tr> from the following:

<tbody>
<tr></tr>

Once you have the location, you need to add the following HTML to create the menu:


<TR>
<TD id="navcontainer" colSpan=2>
<ul id="navlist2">
<li id="active"><a href="#" title="">Home</a></li>
<li><a href="#" title="">About</a></li>
<li><a href="#" title="">Contact</a></li>
</ul>
</TD></TR>

If you save that and then go to your store, it will look a little strange, with a bulleted list of links. Fear not CSS will come to the rescue.

Add the following CSS to your store's CSS:


#navcontainer{margin-top:0;padding:0;text-align:center}
#navcontainer ul{background:purple;border-bottom:7px solid #fff;color:#333;height:30px;line-height:30px;margin:0px !important;padding-left:15%;padding-right:15%}
#navcontainer ul #active a{border-left:1px solid #fff}
#navcontainer ul li{display:inline;font-size:13px;font-weight:bold;margin:0px}
#navcontainer ul li a{background:#8105bb;border-right:1px solid #fff;color:#fff;float:left;text-align:center;text-decoration:none;width:33%}
#navcontainer ul li a:hover{background:#af5ac5;color:#fff}


You will want to edit the colors in here to match your store. You can very safely change all color, background and border tags to suit your taste.

I want more than three buttons, how do I do it?

There are a couple of simple steps to add more buttons. Firstly, add another item to the list bfore </ul>:

 


<li><a href="#" title="">Contact</a></li>


Then change the width that is highlighted in blue in the CSS above to match the number of buttons. 3 = 33%, 4 = 25%, 5 = 20%  . . . .  10 =
10%.

 

 

15.10.2007. 13:17

This article hasn't been commented yet.