This topic has 2 voices, contains 6 replies, and was last updated by  TB Support 4607 days ago.

opencart dropdown menu

ThemeBurn Support › Forums › OpenCart Themes › Shoppica OpenCart Theme › opencart dropdown menu

This topic has been marked as not resolved.

hello. wich files should we work in to replace your drop down menu with the one that is in opencart? thanks
 Adyyda
August 30, 2011 at 9:24 pm #1264
You will need to register in order to post topics and read replies in the ThemeBurn.com support forums!
 TB Support
September 1, 2011 at 12:13 pm #1308

hello again. thanks for the response. what do you mean by “You will need also to copy the old markup for the menu.” thanks
 Adyyda
September 4, 2011 at 4:11 pm #1472

We need olso to replace this:

#menu_home,
#menu_home a
{
  width: 36px;
  padding: 0 !important;
}
#menu_home a {
  text-indent: -1000em;
  background-image: url(../images/menu_home.png);
  background-repeat: no-repeat;
  background-position: center;
  background-color: #ddd;
}

with:

/* menu */
#menu {
  background: #585858;
  border-bottom: 1px solid #000000;
  height: 37px;
  margin-bottom: 15px;
  -webkit-border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -khtml-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  -webkit-box-shadow: 0px 2px 2px #DDDDDD;
  -moz-box-shadow: 0px 2px 2px #DDDDDD;
  box-shadow: 0px 2px 2px #DDDDDD;
  padding: 0px 5px;
}
#menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#menu > ul > li {
  position: relative;
  float: left;
  z-index: 20;  
}
#menu > ul > li:hover {
  background: #000;
}
#menu > ul > li > a {
  font-size: 13px;
  color: #FFF;
  line-height: 14px;
  text-decoration: none;
  display: block;
  padding: 12px 15px 11px 15px;
  z-index: 6;
  position: relative;
}
#menu > ul > li > div {
  display: none;
  background: #FFFFFF;
  position: absolute;
  z-index: 5;
  padding: 5px;
  border: 1px solid #000000;
  -webkit-border-radius: 0px 0px 5px 5px;
  -moz-border-radius: 0px 0px 5px 5px;
  -khtml-border-radius: 0px 0px 5px 5px;
  border-radius: 0px 0px 5px 5px;
  background: url('../images/menu.png');
}
#menu > ul > li:hover > div {
  display: table;
}
#menu > ul > li > div > ul {
  display: table-cell;
}
#menu > ul > li ul + ul {
  padding-left: 20px;
}
#menu > ul > li ul > li > a {
  text-decoration: none;
  padding: 4px;
  color: #FFFFFF;
  display: block;
  white-space: nowrap;
  min-width: 120px;
}
#menu > ul > li ul > li > a:hover {
  background: #000000;
}
#menu > ul > li > div > ul > li > a {
  color: #FFFFFF;
}

Also, we need to upload menu.png (for the hover subcategories to images folder in shoppica )
now it works.

Can you please explain, what is so special with the z-index values that you have implemented? i have found in several ocasions that i can not modify your values to acomodate certain addons like megamenu, imagecycle etc. on short, i leave your values as they are and add z-index 9999 or watever number for the megamenu but the header modules (cart, menu etc) will go through the megamenu or other modules that happens to interact with the header-even if the header modules have smaller values?)

Why the header does not take the z-index position as it should? thanks
 Adyyda
September 4, 2011 at 6:07 pm #1474

Hi,

We have mistakenly wrote “markup” instead of “css”. Glad, you have managed to fix the things.

About the “z-index” property… When trying to adjust the depth of the elements, keep in mind, that parent elements z-index also needs to be considered e.g. image you have this structure:

<div id="header">
  <p id="element_1"></p>
</div>
<div id="content">
  <p id="element_2"></p>
</div>

If both #header and #content has relative position and z-index defined and the two inner elements are absolutely, or relatively positioned, and you want to be sure #element_2 is over #element_2, you will also need to have #content with bigger z-index than #header

We are sure, there are plenty of resources about css positioning on the web, where you could find additional help.

Best regards,
ThemeBurn team
 TB Support
September 6, 2011 at 11:14 am #1517

thanks for the response. for the megamenu have finaly managed to ajust it and make it go down (like amazon menu) instead of up depending on the scroll page so now will not go over the header
 Adyyda
September 6, 2011 at 11:20 am #1518

Glad, you have managed to fix the things :)

 TB Support
September 8, 2011 at 12:34 pm #1579
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.