Customizing Menus in OpenCart: Giving a background color to the menu

We have added horizontal slider and fisheye menus in the previous two recipes. In this recipe, we will add a total background menu to the store shop.

1.  Getting started

We will add a menu like the one shown in this link: http://www.cssplay.co.uk/menus/ total_background.html

2.  How to do it

We will follow these steps to integrate the total background menu into our site:

1. We will go to get the style code and HTML elements using Web developer. Click on the View Source We will bring the following style code for our total background menu:

/* ===============================================================

=

This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/total_background.html

Copyright (c) 2005-2009 Stu Nicholls. All rights reserved.

This stylesheet and the associated (x)html may be modified in any way to fit your requirements.

==================================================================

= */

#menu {width:750px; height:45px; margin:20px auto; background: url(home.png) left top; position:relative;}

#menu ul {padding:0; margin:0; list-style:none; position:absolute; left:0; top:0; width:750px; height:45px; z-index:10;}

#menu ul li {float:left; padding:0;} #menu ul li#li1 {padding-left:50px;}

#menu li a {display:block; height:30px; float:left; color:#fff; text-decoration:none; line-height:30px; padding:0 10px; font- family:arial, sans-serif; font-size:14px; border-right:1px solid #bbb; margin-top:5px;}

#menu li#li7 a {border:0;}

#menu li#li1 a b {background:url(home.png) no-repeat left 100px;}

#menu li#li2 a b {background:url(calculator.png) no-repeat left 100px;}

#menu li#li3 a b {background:url(calendar.png) no-repeat left 100px;}

#menu li#li4 a b {background:url(clipboard.png) no-repeat left 100px;}

#menu li#li5 a b {background:url(letters.png) no-repeat left 100px;}

#menu li#li6 a b {background:url(printer.png) no-repeat left 100px;}

#menu li#li7 a b {background:url(secure.png no-repeat) left 100px;}

#menu li a:hover {color:#000; white-space:nowrap;} #menu li a.current {color:#ff0;}

#menu li a:hover.current {color:#ff0;}

#menu li a:hover b {display:block; width:750px; height:45px; position:absolute; left:0; top:0; z-index:-1;}

#menu li#li1 a:hover b {background:url(home.png) left top;}

#menu li#li2 a:hover b {background:url(calculator.png) left top;}

#menu li#li3 a:hover b {background:url(calendar.png) left top;}

#menu li#li4 a:hover b {background:url(clipboard.png) left top;}

#menu li#li5 a:hover b {background:url(letters.png) left top;}

#menu li#li6 a:hover b {background:url(printer.png) left top;}

#menu li#li7 a:hover b {background:url(secure.png) left top;}

2. We will put this code in either a new css file or we can put it in the tpl file under catalog\view\theme\shop\template\common. If we use a new css file, then we need to add the style file with the link attribute and also get the HTML elements from there. We will place it under the div4 class of header ID of the header.tpl file:

<div id=”info”>

<h2>Unusual – Total background hover</h2>

<h3>20th April 2009</h3>

<br /><br /><br /><br />

<div id=”menu”>

<ul>

<li id=”li1″><a class=”current” href=”#url”><b></b>home</ a></li>

<li id=”li2″><a href=”#url”><b></b>calculator</a></li>

<li id=”li3″><a href=”#url”><b></b>calendar</a></li>

<li id=”li4″><a href=”#url”><b></b>clipboard</a></li>

<li id=”li5″><a href=”#url”><b></b>correspondence</a></li>

<li id=”li6″><a href=”#url”><b></b>printer</a></li>

<li id=”li7″><a href=”#url”><b></b>secure area</a></li>

</ul>

</div>

<br /><br /><br /><br /><br /><br />

<p class=”info”>Copyright &copy;2009 stu nicholls – cssplay. co.uk</p>

<br />

</div> <!– end of info –>

3. We remove the following code from the HTML structure:

<div id=”info”>

<h2>Unusual – Total background hover</h2>

<h3>20th April 2009</h3>

<br /><br /><br /><br />

//…

<br /><br /><br /><br /><br /><br />

<p class=”info”>Copyright &copy;2009 stu nicholls – cssplay. co.uk</p>

<br />

</div> <!– end of info –>

4. If we refresh our browser, we get the following status of our menu:

5. Now, we need to modify the images for our We get the existing images from the link: http://www.cssplay.co.uk/menus/total_background.html.
6. Right click the Then, click View page info.

7. We go to the Media It will display all the images on the page:

8. Click the Save as We get the other images in this way.
9. Now, we open up the image with And also, open up our login menu item image in GIMP. We scale the image to 40×40 and then paste it into the total background image. We move the login icon on the left most side of the image. So, our image becomes like this:

10. We place the image at catalog\view\theme\shop\image. We need to change the location of the images in the style code for total background menu:

#menu {width:750px; height:45px; margin:20px auto; background: url(catalog/view/theme/shop/image/home.png) left top; position: relative;}

//…

#menu li#li1 a b {background:url(catalog/view/theme/shop/image/ home.png) no-repeat left 100px;}

//…

#menu li#li1 a:hover b {background:url(catalog/view/theme/shop/ image/home.png) left top;}

11. Our image becomes like the following:

12. We remove the following style code from stylesheet under catalog\view\theme\ shop\stylesheet:

#header .div4 a {

background:url(“../image/tab_1.png”) no-repeat scroll 0 0 transparent;

}

13. Also, remove the width attribute:

#header .div4 {

width:510px;

}

14. Now, we will go to the browser to view the changes we made:

15. Then, we adjust the position of the menu For this, we remove the following code block from the stylesheet:

#header .div4 a {

color:#333333;

padding-top:9px;

}

16. So, our menu becomes:

 3. There’s more …

You can also have the dropdown menu. Go to the link: http://www.cssplay.co.uk/ menus/css3-dropdown-all.html.

Source: Hasan Tahsin (2011), OpenCart 1.4 Template Design Cookbook, Packt Publishing.