Customizing Menus in OpenCart: Displaying horizontal sliding menus

In this recipe, we will add a long wide menu into our store shop.

1. Getting started

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

2. How to do it

We will follow these steps to add the horizontal sliding menus into our site:

We will use the Web developer tool to get the cascading style of horizontal menu.
To get the style code, ﬁrst open up http://www.cssplay.co.uk/menus/css3- image-slide.html.
Now, we will get the css style code from css\view css.

It will open up a new window with all the style code for the From there, we will ﬁnd the iinnlliinnee style code for the site:

So, we will get the style code for slideOuter class:

.slideOuter {width:498px; height:200px; overflow:hidden; margin:0 auto;}

.slideOuter .slide {padding:0; margin:0; list-style:none;

width:800px; height:200px; overflow:hidden;}

.slideOuter .slide li {float:left;}

.slideOuter .slide li a {display:block; float:left; width:98px; border-right:2px solid #fff; height:200px; overflow:hidden;

-webkit-transition: 0.5s;

-moz-transition: 0.5s;

-o-transition: 0.5s; transition: 0.5s;

}

.slideOuter .slide a#p5 {width:318px;}

.slideOuter .slide.current a {width:43px;}

.slideOuter .slide.current li a.current {width:318px;}

.slideOuter .slide li a img {border:0;}

.slideOuter .slide:hover a#p1,

.slideOuter .slide:hover a#p2,

.slideOuter .slide:hover a#p3,

.slideOuter .slide:hover a#p4 {width:43px;}

.slideOuter .slide a#p1:hover,

.slideOuter .slide a#p2:hover,

.slideOuter .slide a#p3:hover,

.slideOuter .slide a#p4:hover {width:318px;}

To get the HTML code for the sliding menu, we go to view source\view source. This will prompt the following window:

It will open up a new window containing the source code of the menu:

</ul>

</div>

We will place this code in the tpl ﬁle under catalog\view\theme\ shop\template\common. We are going to replace the existing code of div4 class with the above code.
If we refresh our browser, we ﬁnd the following state of our menu:

Now, we will create images for the We will search the Internet for relevant images. First, let’s check for the home tab. In this recipe, we will use the following image for the home tab:

Open up the image with GIMP. We scale the image to 320×200. You can scale to your desired Click on Image\Scale image. It will open the following window:

This will prompt a window where we can enter the image First, we will unlink the link icon besides the width and height of the image;

Now, we will enter the scaling height and width into the window:

After clicking the scale button, our image will be converted to a new See the following image:

Now, we will create a layer on the

We will name it as menu name and set the height and width as 200px and 320px. And, the Layer Fill Type to Transparent.

We can view the layer window by selecting windows\dockable dialogs\layers. We will see our newly created layer
Now, choose the rectangle select tool from toolbox:

We select an area on the left-hand side of the See the following image. We select the rectangular box area of the image:

We choose #5f8e03 from the color panel of the tool

Then, click the Bucket Fill tool from the tool box:

And, we apply the color on our selected area on the image:

We will write some text on the select area of the Choose the Text Tool from the tool box:

To open the option window for the Text Tool, go to windows\dockable dialogs\ fonts. Also, select windows\dockable dialogs\tool options. This shows the text option’s window:

We select Serif Bold as the font, the font size as 25px, and the color as #ffffff. We write Home as our text. Now, right click on the text layer and select Layer | Transform | Rotate 900 counter clock-wise.

This will change our image to this:

Then, we select the move tool:

We move the text layer to the following position:

We select the smudge tool from the tool box:

From the layer’s option window, we will select the menu name And then, we use the smudge tool on that layer. So, our image will become like this:

We will save it as home-menu.png under catalog\view\theme\shop\image. We need to create other tab images in a similar

For the Login tab, we created an image like this:

And the Logout tab gets the image as the following:

We created the following image for the My Account section:

We created the Basket tab as the following image:

The Checkout tab holds the following image:

So, we have our tab Now, we will place their path links in the src of the tab image. See the following code block and notice the value of the src attribute. Here, we place the path value of our images. Then, the horizontal slider menu will hold the following code block:

</ul>

</div>

And if we refresh our browser, we will ﬁnd our slider in the following state:

You will ﬁnd that there is an extra area on the top of each of the tab We need to remove this. We will remove the background property for this style in stylesheet.css under catalog\view\theme\shop\stylesheet.

#header .div4 a {

//…

background: url(‘../image/tab_1.png’) no-repeat;

//…

}

Also, we will remove border property from our slideOuter class style:

.slideOuter .slide li a {

//…

border-right:2px solid #fff;

//…

}

Then, our horizontal slider will become like this:

3. How it works…

In the above recipe, we ﬁrst get the style code, then we have created our images for the navigation and after that we place the path to our newly created images in our code block. We have explained each step and put relevant images there.

4. There’s more …

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

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

Opencart

Customizing Menus in OpenCart: Displaying horizontal sliding menus

1. Getting started

2. How to do it

3. How it works…

4. There’s more …

Leave a Reply Cancel reply