Main menu with images

Tagged: ,

This topic has been marked as resolved.

Hello,

First sorry for my bad english.
I made a custom menu in menu.tpl with this code:

<div class="s_menu_group">
        <h3>Section 1</h3>
        <ul class="s_list_1 clearfix">
          <li><a href="link1">Item 1</a></li>
          <li><a href="link2">Item 2</a></li>
        </ul>
      </div>

      <div class="s_menu_group">
        <h3>Section 2</h3>
        <ul class="s_list_1 clearfix">
          <li><a href="link1">Item 1</a></li>
          <li><a href="link2">Item 2</a></li>
        </ul>
      </div>

I want to add pictures to this dropdown menu. See the attached example file.
How can I do this? Please send me an example code for this. Is it possible?

Thanks,
Szilard

December 1, 2012 at 11:46 pm #15567

Is it not possible?

December 4, 2012 at 6:37 pm #15648
You will need to register in order to post topics and read replies in the ThemeBurn.com support forums!
December 7, 2012 at 11:23 am #15738

Thanks for your answer. It’s works, but when I set background images for the left area of menu, the other area will transparent. So, the menu items background will be transparent. I want to set this white as original menu.

December 7, 2012 at 12:06 pm #15755

OK. Find the problem:

#menu_ID > .s_submenu {
  padding-left: 150px; /* image width */
  background: white url(IMAGE_URL) no-repeat center left;
}

This works. Thanks again.

December 7, 2012 at 12:25 pm #15758

Our bad…

We totally forgot the background color property :)

Best,
ThemeBurn team

December 11, 2012 at 9:44 am #15846

Hi

Im trying to test this out on my site, however im not able to get anything showing up.

What is the unique id for each menu, how do i find this out, how do i specify the menu in the code that the image is going to be on.

thank you

December 15, 2012 at 5:42 am #16039
You will need to register in order to post topics and read replies in the ThemeBurn.com support forums!
December 15, 2012 at 1:59 pm #16048

Thank you for excellent support, this works perfectly

The only issue is that the menu is now far too long, can the white spaces be made smaller

thank you

December 15, 2012 at 8:13 pm #16059

Thanks again the help.

Here is the result: http://www.ajandek24.hu

:)

Thanks,
Szilard

December 15, 2012 at 11:50 pm #16061

@Szilard

How did you make your menu sit right under your top level categories ?

thank you

December 16, 2012 at 12:38 am #16062

They are top levels category too, but changed colors in css.

December 16, 2012 at 12:55 am #16063

This is the css extras in Extensions/Modules/Shoppica2/design/styles


#green_button > a {
  background: #7db122 url(catalog/view/theme/shoppica2/images/green_button.png) no-repeat top right !important;
  color: #fff !important;
}
#green_button > a:hover {
  background-color: #90c03b !important;
}
/* normal state */
#menu_arkereso > a {
  background-color: #ffffff !important;
  color: #4daec6 !important;
}
/* hover state */
#menu_arkereso > a:hover {
  background-color: #4daec6 !important;
  color: #ffffff !important;
}
/* normal state */
#menu_termekajanlo > a {
  background-color: #ffffff !important;
  color: #4daec6 !important;
}
/* hover state */
#menu_termekajanlo > a:hover {
  background-color: #4daec6 !important;
  color: #ffffff !important;
}
#menu_fenykepes_naptarak > .s_submenu {
  padding-left: 170px;
  background: white url(image/data/ajandek24/naptar_menu.jpg) no-repeat center left;
}
#menu_egyedi_ajandekok > .s_submenu {
  padding-left: 195px;
  background: white url(image/data/ajandek24/ajandekok_menu.jpg) no-repeat center left;
}
#menu_kepeslapok_meghivok > .s_submenu {
  padding-left: 205px;
  background: white url(image/data/ajandek24/kepeslap_menu.jpg) no-repeat center left;
}
#menu_fotokidolgozas > .s_submenu {
  padding-left: 130px;
  background: white url(image/data/ajandek24/fotokidolgozas_menu.jpg) no-repeat center left;
}

December 16, 2012 at 1:02 am #16064

@szilard

Thank you, its now looking better, and the menu issue has been fixed, thanks again to the excellent support from TB

December 16, 2012 at 7:01 pm #16072

@Nextprint
@tightsboutique

Nice menu customization for both :) The result is looking really nice :)

Best,
ThemeBurn team

December 17, 2012 at 5:17 pm #16106
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.