[CUSTOM] adding images/icons to menu items groups

hey everyone,

adding these sport icons to menu items is really fun but i want that also in the dropdown area for menu groups.
like you can see in my picture here:

nice-to-have.jpg

is that possible? joomla has this option, but i cant see the picture in dropdown area.. whenever i try with icon class in gk menu options or joomla settings.

Hi

Please show me Your site. I'll try to figure out the code to make it.

thanks! login has been send

Hi

Please check the access details. I've tried to login, but it's not working.

sorry! forget to set you as superuser....

Hi

I've checked that, but it's going to be really hard to make. Icons can only be added by css:

Code: Select all

.gk-menu ul.level0 div.childcontent div.group-title {
background: url(path_to_image) no-repeat 100% center;
}


but this code will add this to all. The only way to order it load under one title is to use css3 selectors. For example to add icon to "Bundesliga" You need to use selector like this:

Code: Select all

.gk-menu ul.level0 li:nth-child(2) div.childcontent div.group-title:nth-child(1) {

}


It's really hard to explain I hope You will understand it from my example.

it's complicated.. ok!

i tried it out, with your last example but i have the picture on every item.
i think because i definied no selectors for the other items, but i dont know how to do that...??

what means the level number and what means the number in between (...)

i added this code to menu.css

Code: Select all

.gk-menu ul.level0 li:nth-child(2) div.childcontent div.group-title:nth-child(1) {
   background: url(/images/stories/menu-icons/bundesliga.jpg) no-repeat 100% center;
}

these are the other icons in the same folder:
world-cup.jpg, seria-a.jpg, primera-division.jpg, premier-league.jpg, euro-league.jpg, dfb-pokal.jpg, champions-league.jpg

Hi

Now I can see what's missing. Numbers are to tell which list element we want to add the icon to. Lets try a small modification of this code:

Code: Select all

.gk-menu ul.level0 > li:nth-child(2) div.childcontent ul.gkmenu > li:nth-child(1) div.group-title {
   background: url(/images/stories/menu-icons/bundesliga.jpg) no-repeat 100% center;
}


hi telibite,
we're coming closer to the aim

now we have the image on every first row of the menu.

can we change this? then we got it!

update:

if i set the menu item "fussball" to 1 column, it works!
but there are to many items, so the dropdown menu is to long, i need these columns for better overview.

is it not possible to add own classes to every menu item, to seperate the icons when they in in columns?

Hi

It's possible to add a class to menu item but not to a column title That's why it's so complicated.

Have You tried to manupulate with this 2 numbers in the css selector I gave You?

First number (li:nth-child(2)) is pointing to the menu item from the first level and the second (li:nth-child(1)) to row (by row I mean submenu grups), so changing this numbers should help You to navigate in the menu titles elements.

playing with the numbers does not really help. don't know how to explain.

if i change the first number (li:nth-child(2)), the icons go the the next menu item.
2 is for "Fußball", if i set to 3 i'll have the icon under "Basketball"

if i change the second number (li:nth-child(1)), the icons go to the next row, but for all in the same line.

5-columns.jpg

1 is for Bundesliga, Primera Division, Champions League and Weltmeisterschaft
2 is for Premier League, Serie A, Europa League, DFB Pokal
if i add a third gk menu class with number 3, it takes no effect because there are just 2 rows in 4 columns.

.gk-menu ul.level0 > li:nth-child(2) div.childcontent ul.gkmenu > li:nth-child(1) div.group-title {
background: url(/images/stories/menu-icons/bundesliga.jpg) no-repeat 100% center;
}

.gk-menu ul.level0 > li:nth-child(2) div.childcontent ul.gkmenu > li:nth-child(2) div.group-title {
background: url(/images/stories/menu-icons/premier-league.jpg) no-repeat 100% center;
}

.gk-menu ul.level0 > li:nth-child(2) div.childcontent ul.gkmenu > li:nth-child(3) div.group-title {
background: url(/images/stories/menu-icons/primera-division.jpg) no-repeat 100% center;
}

i dont know how to get individual icons in the same row.

and here is how it looks if i have just 1 column for my menu items, but don't want such a long menu

Bildschirmfoto 2013-07-18 um 10.49.04.png

**** UPDATE *****

Yeah! i figured out how to do it!!

First you have to set additional class in menu params (GavickPro) and then you have to put this class at the end of our menu class items. here you can see how it looks:

i-got-it-baby.png

and here is the code (menu.css)

Code: Select all

.gk-menu ul.level0 > li:nth-child(2) div.childcontent ul.gkmenu > li:nth-child(1) div.group-title .bundesliga {
   background: url(/images/stories/menu-icons/bundesliga.jpg) no-repeat left center;
   padding-left: 40px;
   margin-left: -15px;
}

.gk-menu ul.level0 > li:nth-child(2) div.childcontent ul.gkmenu > li:nth-child(2) div.group-title .premier-league {
   background: url(/images/stories/menu-icons/premier-league.jpg) no-repeat left center;
   padding-left: 40px;
   margin-left: -15px;
}

.gk-menu ul.level0 > li:nth-child(2) div.childcontent ul.gkmenu > li:nth-child(1) div.group-title .primera-division {
   background: url(/images/stories/menu-icons/primera-division.jpg) no-repeat left center;
   padding-left: 40px;
   margin-left: -15px;
}

.gk-menu ul.level0 > li:nth-child(2) div.childcontent ul.gkmenu > li:nth-child(2) div.group-title .serie-a {
   background: url(/images/stories/menu-icons/serie-a.jpg) no-repeat left center;
   padding-left: 40px;
   margin-left: -15px;
}
.gk-menu ul.level0 > li:nth-child(2) div.childcontent ul.gkmenu > li:nth-child(1) div.group-title .champions-league {
   background: url(/images/stories/menu-icons/champions-league.jpg) no-repeat left center;
   padding-left: 40px;
   margin-left: -15px;
}

.gk-menu ul.level0 > li:nth-child(2) div.childcontent ul.gkmenu > li:nth-child(2) div.group-title .europa-league {
   background: url(/images/stories/menu-icons/euro-league.jpg) no-repeat left center;
   padding-left: 40px;
   margin-left: -15px;
}

.gk-menu ul.level0 > li:nth-child(2) div.childcontent ul.gkmenu > li:nth-child(1) div.group-title .weltmeisterschaft {
   background: url(/images/stories/menu-icons/world-cup.jpg) no-repeat left center;
   padding-left: 40px;
   margin-left: -15px;
}

.gk-menu ul.level0 > li:nth-child(2) div.childcontent ul.gkmenu > li:nth-child(2) div.group-title .dfb-pokal {
   background: url(/images/stories/menu-icons/dfb-pokal.jpg) no-repeat left center;
   padding-left: 40px;
   margin-left: -15px;
}

but as you can see, there is some little problem left: the icon is just as big as the font-size.
i cant do anything with width, height, line-height... just the font-size will change font and icon.

how can we get the icons to fullsize without changing the font-size?

Hi

Och. I gave You mine solution because I was thinking the class suffix is not working for this elements. It certailny was not working with previous version. Looks like You've help me me to learn new thing instead

Please use a code like this insteat my earlien proposition:

Code: Select all

.bundesliga {
    background: url("/images/stories/menu-icons/bundesliga.jpg") no-repeat scroll left center transparent;
    display: block;
    line-height: 40px;
    margin-left: -15px;
    padding-left: 40px;
}