Customizing Menus in OpenCart: Integrating the social networking menu

We will add a social networking style menu in this recipe. This will be a circular menu. We will create our menu images and also adjust some styles for them.

1.  Getting started

Here, we also use a menu from cssplay.co.uk. We will add a menu like this link: http://www.cssplay.co.uk/menus/css3-social-network.html.

2.  How to do it

We have to go through the following steps to have the social networking menu in our store shop:

1. We will have the style code and HTML element using Web developer’s view source. Following is the style code:

ul.topul, ul.topul ul {padding:0; margin:0; list-style:none; position:relative;}

ul.topul ul {position:absolute; left:-9999px; background: url(trans.gif); opacity:0;

-webkit-transition: opacity 0.5s ease-in-out;

-moz-transition: opacity 0.5s ease-in-out;

-o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out;

}

ul.topul {margin:50px auto; width:80px; height:80px;}

ul.topul ul li {width:48px; height:48px; float:left; display: inline;}

ul.topul li.topli {width:80px; height:80px; float:left;}

ul.topul :hover ul {left:-48px; top:-48px; width:176px; height:176px; opacity:1;}

ul.topul ul li img {width:48px; height:48px; display:block;

border:0; position:relative; left:0; top:0;

-webkit-transition: 0.2s ease-in-out;

-moz-transition: 0.2s ease-in-out;

-o-transition: 0.2s ease-in-out;

transition: 0.2s ease-in-out;

}

ul.topul li.p1 {margin-left:16px; margin-top:16px;} ul.topul li.p3 {margin-top:16px;}

ul.topul li.p5 {margin-left:80px;}

ul.topul li.p6 {margin-left:16px;}

ul.topul li.p7 {margin-top:16px;}

ul.topul :hover ul li a:hover {position:relative; z-index:100;}

ul.topul li:hover ul li a:hover img {width:64px; height:64px; left:-8px; top:-8px; z-index:100;}

/* for IE6 */

ul.topul table {border-collapse:collapse: position:absolute; left:0; top:0; margin:-4px;}

ul.topul li a:hover {direction:ltr;}

2. topul li a:hover ul li a:hover img {position:absolute; width:64px; height:64px;left:-8px; top:-8px; z-index:100;}

3. We will put this code in either a new css file or we can put it in 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 the HTML code is the following. We will place it under the div4 class of header ID of the header.tpl file:

<div id=”info”>

<h2>CSS3 – The future now – ‘Social Networking Menu’ </h2>

<h3>28th September 2010</h3>

<ul class=”topul”>

<li class=”topli” id=”s1″><!–[if lte IE 6]><a href=”#url”><tab le><tr><td><![endif]–><img src=”network/social.png” alt=”” />

<ul>

<li class=”p1″><a href=”#url”><img src=”network/ delicious.png” alt=”” /></a></li>

<li class=”p2″><a href=”#url”><img src=”network/digg.png” alt=”” /></a></li>

<li class=”p3″><a href=”#url”><img src=”network/facebook. png” alt=”” /></a></li>

<li class=”p4″><a href=”#url”><img src=”network/flickr. png” alt=”” /></a></li>

<li class=”p5″><a href=”#url”><img src=”network/linkedin. png” alt=”” /></a></li>

<li class=”p6″><a href=”#url”><img src=”network/myspace. png” alt=”” /></a></li>

<li class=”p7″><a href=”#url”><img src=”network/ stumbleupon.png” alt=”” /></a></li>

<li class=”p8″><a href=”#url”><img src=”network/twitter. png” alt=”” /></a></li>

</ul>

<!–[if lte IE 6]></td></tr></table></a><![endif]–>

</li>

</ul>

<br />

<a href=”http://twitter.com/home?status=Currently testing a new gallery from @stucssplay here http://www.cssplay.co.uk/menus/css3- social-network.html” rel=”nofollow” class=”tweet”><img src=”../ graphic/tweet.gif” alt=”tweet this” /></a>

<p class=”info”>Copyright &copy;2010 stu nicholls – CSS play</p>

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

4. We resize our menu images to The home tab image becomes like this:

5. We place the image at catalog\view\theme\shop\image. Now, we remove some redundant HTML elements from the We remove the following:

<div id=”info”>

<h2>CSS3 – The future now – ‘Social Networking Menu’ </h2>

<h3>28th September 2010</h3>

//…

<br />

<a href=”http://twitter.com/home?status=Currently testing a new gallery from @stucssplay here http://www.cssplay.co.uk/menus/css3- social-network.html” rel=”nofollow” class=”tweet”><img src=”../ graphic/tweet.gif” alt=”tweet this” /></a>

<p class=”info”>Copyright &copy;2010 stu nicholls – CSS play</p>

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

6. You need to change the image path in the menu HTML element:

<li class=”p1″><a href=”#url”><img src=”catalog/view/theme/shop/ image/home-social.png” alt=”” /></a></li>

7. Then, it becomes as the following:

8. We will download the png image using View page info | Media.

9. So now, we will refresh the browser:

10. We remove some style attributes from stylesheet:

#header .div4 a {

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

}

11. When we go the browser, then our menu becomes like this:

12. We have to change some style code to adjust the placement of our social networking We remove the following style code:

#header .div4 a {

padding-top:100px;

}

13. Then, our menu will be like the following:

3. There’s more…

You can also integrate the rising tab menu. Go to the link: http://www.cssplay.co.uk/menus/css3-rising-tabs.html.

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