search
top

Interspire Shopping Carts: Add a Flyout or Dropdown Menu to Sidebar Panel

Here is the easiest way I have found to add flyout or drop down menus to a particular panel in an Interspire shopping cart’s template.

First, sign ┬áinto the website’s admin panel.

Go to Settings -> Store Settings -> Display.

In the box next to Category List Depth, change the number to the number of levels you want to display in the flyout or drop down menu.

Now, go to Store Design and then click Browse Template files.

In your website template’s style.css file, add this code:

.Left #SideCategoryList li:hover, .CategoryList li:hover, .CategoryList li.Over {
background: #746755;
}
.Left #SideCategoryList li:hover a, .CategoryList li:hover a {
color: #fff;
}
.Left #SideCategoryList li ul, .CategoryList li ul {
display: none;
padding: 0 0 9px 0;
-moz-border-radius-bottomleft: 17px;
-moz-border-radius-topright: 17px;
-webkit-border-top-right-radius: 17px;
-webkit-border-bottom-left-radius: 17px;
width: 160px;
position: absolute;
}
.Left #SideCategoryList li:hover ul, .CategoryList li:hover ul {
display: block;
position:absolute;
margin-top:-15px;
left:160px;
width:160px;
}
.Left #SideCategoryList li:hover li, .CategoryList li:hover li {
float: none;
background: #f0eee8;
}
.Left #SideCategoryList li:hover li a, .CategoryList li:hover li a {
color: #444;
font-size: 14px;
text-transform: none;
font-style: normal;
border-top: 1px solid #f0eee8;
border-bottom: 1px solid #f0eee8;
}
.Left #SideCategoryList li li a:hover, .CategoryList li li a:hover {
background: #746755;
color: #fff;
border-color: #fefaf3;
}
.Left #SideCategoryList li:hover, .CategoryList li:hover {
background: #746755;
}
.Left #SideCategoryList li:hover a, .CategoryList li:hover a {color: #fff;}

.Left #SideCategoryList li ul, .CategoryList li ul {display: none;padding: 0 0 9px 0;-moz-border-radius-bottomleft: 17px;-moz-border-radius-topright: 17px;-webkit-border-top-right-radius: 17px;-webkit-border-bottom-left-radius: 17px;width: 160px;position: absolute;
}
.Left #SideCategoryList li:hover ul, .CategoryList li:hover ul {display: block;position:absolute;margin-top:-15px;left:160px;width:160px;
}
.Left #SideCategoryList li:hover li, .CategoryList li:hover li {float: none;background: #f0eee8;}
.Left #SideCategoryList li:hover li a, .CategoryList li:hover li a {color: #444;font-size: 14px;text-transform: none;font-style: normal;border-top: 1px solid #f0eee8;border-bottom: 1px solid #f0eee8;}
.Left #SideCategoryList li li a:hover, .CategoryList li li a:hover {background: #746755;color: #fff;border-color: #fefaf3;}

This code will add a flyout menu to the Category panel in the left sidebar of your website. You can change the name of the panel in the codes if you want to apply the flyout menu to another panel.

Next, you will want to edit the styles above to match the design of your own site.

And that’s all you need to create flyout or dropdown menus for the sidebar of your Interspire shopping cart template!

Let me know if you run into any issues or have any questions.

You can also learn how to create your own custom panels for Interspire shopping carts in another post I wrote.

Related Posts:

13 Responses to “Interspire Shopping Carts: Add a Flyout or Dropdown Menu to Sidebar Panel”

  1. Jasmin says:

    That’s a good tip to add a flyout to Interspire’s sidebar panel. You have saved my day, thanks so much!

  2. Bishop says:

    i’m trying to customize the category list in the interspire side panel. i would like to place an image above each category and the text link would be at the bottom of the image. i’m a little handy with HTML and i’m pretty sure i can do this but i need help in identifying which file to edit. could you please point me in the right direction? thanks in advance.

  3. Bishop says:

    hi libby,

    it would be great to know both so that i can weigh in on which one is the better approach in what i’m trying to achieve. thanks again.

  4. Vrajesh says:

    thx a lot mate, it has really helpmed me, and its quick too. :razz:

  5. Edward says:

    Hello, Please want you to help me, I do exactly what you say, but when you hover the mouse over the categories, you can`t click on subcategories, desappears soon, even I set up for 10 seconds in the cpanel… Please help in this…

  6. Edward says:

    Hello, please answer me, you have the website already…

  7. Edward says:

    It is http://www.reactionmall.com will thank you so much if you help me with this…

  8. Sheyla says:

    Hi, thanks for this post, it was very helpful , but, now the submenu appears under the top banner, could you, please, take a look for me , and help me? This is the link: http://www.xayala.com.br/site/ , is the first block on left

    • Libby Fisher says:

      Hi Sheyla,

      I would add a position and z-index declaration to the sidebar menu ul in order to fix the problem, like this:

      .Left #SideCategoryList li ul {
      position: relative;
      z-index: 9999;
      }

      Please let me know if that doesn’t work for you.

      Thanks!

Trackbacks/Pingbacks

  1. Adding Custom Panels to Interspire Shopping Cart Templates | The Web Design Blog of TheLibzter.com - [...] can also learn how to create drop down or flyout menus for your Interspire shopping cart template’s sidebars in …

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

top