Customizing Menus in OpenCart: Adding a fisheye menu

In this recipe, we will add a popular ﬁsheye menu into our store shop. We will create the images and change the codes.

1. Getting started

We will add a menu like this link: http://www.cssplay.co.uk/menus/fisheye8.html

2. How to do it

We will follow these steps:

Like the previous recipe, we will use a ﬁsheye menu from the cssplay Go to this link: http://www.cssplay.co.uk/menus/fisheye8.html. We will use it in our shop.
We will use the Web developer tool to get the css style and related HTML code block for this ﬁsheye menu.

We get the following css code style for the menu from the View Source option:

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

This copyright notice must be untouched at all times.

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

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

= */

#container {background:url(fisheye4/background.jpg); width:750px; height:250px; padding-top:50px;}

#holder {width:700px; height:140px; margin:0 auto;}

ul.outer {padding:0; margin:0; list-style:none; width:140px; height:140px; float:left;}

ul.outer ul {padding:0; margin:0; list-style:none;} ul.outer a {text-decoration:none;}

ul.outer li {display:block; float:left; padding:3px; margin:0;}

ul.outer li.inner img.other {width:100%; display:block; border:0; cursor:pointer;}

ul.outer li.inner img.ie6 {display:none;} ul.outer li:hover {padding:1px;}

ul.outer li.inner:hover img {width:128px; height:128px;}

</style>

<!–[if lte IE 6]>

ul.outer table {border-collapse:collapse; padding:0; margin:-1px;}

ul.outer li {padding:0;}

ul.outer li a {float:left; display:block; padding:3px;} ul.outer li.inner img.other {display:none;}

ul.outer li.inner img.ie6 {width:100%; display:block; border:0; cursor:pointer;}

ul.outer li.inner img#login {width:100%; background:none; filter:

progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’fisheye4/

ul.outer li.inner img#camera {width:100%; background:none; filter:

progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’fisheye4/

camera.png’, sizingMethod=’scale’);}

ul.outer li.inner img#phone {width:100%; background:none; filter:

progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’fisheye4/

phone.png’, sizingMethod=’scale’);}

ul.outer li.inner img#find {width:100%; background:none; filter:

progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’fisheye4/

find.png’, sizingMethod=’scale’);}

ul.outer li.inner img#printer {width:100%; background:none;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’fis heye4/

printer.png’, sizingMethod=’scale’);}

ul.outer a:hover {padding:1px;}

</style>

<![endif]–>

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

<h2>Unusual – Fisheye image menu version 3 using just CSS</h2>

<h3>26th August 2009</h3>

<ul><li><!–[if lte IE 6]><a href=”#url”><table><tr><td><

![endif]–>

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

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

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

</li></ul>

<a href=”#url2″><img class=”ie6″ id=”camera” src=”fisheye4/trans.gif”

alt=”” /><img class=”other” src=”fisheye4/camera.png” alt=”” /></a>

</li></ul><!–[if lte IE 6]></td></tr></table></

a><![endif]–>

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

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

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

</li></ul>

<a href=”#url3″><img class=”ie6″ id=”phone” src=”fisheye4/trans.gif”

alt=”” /><img class=”other” src=”fisheye4/phone.png” alt=”” /></a>

</li></ul><!–[if lte IE 6]></td></tr></table></

a><![endif]–>

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

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

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

</li></ul>

<a href=”#url4″><img class=”ie6″ id=”find” src=”fisheye4/trans.gif”

alt=”” /><img class=”other” src=”fisheye4/find.png” alt=”” /></a>

</li></ul><!–[if lte IE 6]></td></tr></table></

a><![endif]–>

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

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

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

</li></ul>

<a href=”#url5″><img class=”ie6″ id=”printer” src=”fisheye4/trans.gif”

alt=”” /><img class=”other” src=”fisheye4/printer.png” alt=”” /></a>

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

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

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

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

</li></ul>

</div>

<br />

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

We need to adjust some settings for this HTML code structure. We will add an id on the image tag for each of our menu items. So, the ﬁrst ID will be home and the code will be as this:

In this way, we will add the other ids in the image tag. Now, we will place an image on the src attribute of the image. We will use the following image and scale height to 150px and the width

We create a png and gif image for each So, our code becomes like this for the home ID of the image:

In a similar way, we will add other images to the remaining image tags and change the image id
We also need to add a condition to check whether a user is logged in or On the basis of that we will use login or logout. We can use the following code:

<?php if (!$logged) { ?>

//…

<?php } else { ?>

//…

<?php } ?>

Then, the slider will become like this:

Now, we need to adjust the HTML and css style of the We remove the following code block:

<h2>Unusual – Fisheye image menu version 3 using just CSS</h2>

<h3>26th August 2009</h3>

//…

<br />

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

Also, we will remove the following styles from the css style:

#container {

background:url(fisheye4/background.jpg);

height:250px;

padding-top:50px;

}

When we refresh the browser, we will see the following changes:

Now, again, the following changes:

//…

</div>

And change the style also: #container {

width: 750px;

}

In the stylesheet.css file, we remove this: #header .div4 {

width:510px;

}

So, we get the following image of our menu:

We also remove the background image for each div:

#header .div4 a {

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

}

The ﬁnal status of the our menu becomes like the following:

3. How it works …

4. There’s more …

You can also use the html time flylist menu. Go to the link: http://www.cssplay.co.uk/ menus/html-plus-time-flylist-menu.html

5. See also

Displaying horizontal sliding menus

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

Opencart

Customizing Menus in OpenCart: Adding a fisheye menu

1. Getting started

2. How to do it

3. How it works …

4. There’s more …

5. See also

Leave a Reply Cancel reply

1. Getting started

2. How to do it

3. How it works …

4. There’s more …

5. See also

Leave a Reply Cancel reply

Login