Joomla Templates Club 406,261 posts

[ruskenb Friend ruskenbJoin date: September 2006Posts: 48Downloads:9Uploads:0 Thanks: 4]

#149253

Dear all,

I tried to assign icon to the mega menu. Also by following the instruction here:
http://wiki.joomlart.com/wiki/JA_Template_Framework/Navigation

Strange thing that it does not appear on the mega menu. Has anyone the same problem?

tq

mus

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#335272

Hello ruskenb!

At the moment, the mega menu does not allow to display icon beside title of menu, may be the feature will be improved in the next version of this template.

And i have customized the mega menu, you can use it:

pls open the file templatesja_zeolite_iicssmenumega.css and replate all content by the following codes:

/*
$JA#COPYRIGHT$
*/

.ja-megamenu { margin: -20px 0 0; padding: 0; min-height:40px}

ul.megamenu { margin: 0 5px; /* menu’s gutter */ }

.megacol { padding: 5px 0; }
/* lv – 0
———————————–*/
/* Styling —*/
#ja-mainnav ul.level0 {
margin: 0;
padding: 0;
}

#ja-mainnav ul.level0 li {
float: left;
display: block;
padding: 0;
margin: 0;
/* background: url(../../images/mainnav-sep.gif) no-repeat right center; */
}

/* STYLING THE MENU
———————————–*/
/* 1st level */
#ja-mainnav ul.level0 li a {
display: block;
text-decoration: none;
font-size: 100%;
color: #777777;
padding: 0;
font-weight: bold;
}
#ja-mainnav ul.level0 li {
background:none;
}
#ja-mainnav ul.level0 li a:hover,
#ja-mainnav ul.level0 li a:active,
#ja-mainnav ul.level0 li a:focus {
color: #54992F;

/* background: url(../../images/arrow-3.gif) no-repeat center top; */
}

#ja-mainnav ul.level0 li:hover a,
#ja-mainnav ul.level0 li.sfhover a,
#ja-mainnav ul.level0 li.havechildsfhover a,
#ja-mainnav ul.level0 li.havechild-activesfhover a {
color: #54992F;
}

#ja-mainnav ul.level0 li.havechild:hover a,
#ja-mainnav ul.level0 li.havechild:focus a,
#ja-mainnav ul.level0 li.havechild:active a {
/* background: url(../../images/arrow-3.gif) no-repeat center top; */
}

#ja-mainnav ul.level0 li a.active,
#ja-mainnav ul.level0 li a.active:hover,
#ja-mainnav ul.level0 li a.active:active,
#ja-mainnav ul.level0 li a.active:focus {
color: #54992F;
/*background: url(../../images/arrow-3.gif) no-repeat center top;*/
}

ul.level0 li.mega li.mega {
text-align: left;
float: none !important;
}

/* lv – 1 and below
———————————–*/
/* Layout —*/
.ja-megamenu li.mega .childcontent { display: block; height: auto; position: absolute; margin-top: -1px; }

.ja-megamenu li.mega .childcontent,
.ja-megamenu li.haschild-over li.mega .childcontent,
.ja-megamenu li.mega li.haschild-over li.mega .childcontent ,
.ja-megamenu li.mega li.mega li.haschild-over li.mega .childcontent,
.ja-megamenu li.mega li.mega li.mega li.haschild-over li.mega .childcontent,
.ja-megamenu li.mega li.mega li.mega li.mega li.haschild-over li.mega .childcontent { left: -999em; /*hide the menu*/ }

.ja-megamenu li.haschild-over .childcontent,
.ja-megamenu li.mega li.haschild-over .childcontent,
.ja-megamenu li.mega li.mega li.haschild-over .childcontent,
.ja-megamenu li.mega li.mega li.mega li.haschild-over .childcontent,
.ja-megamenu li.mega li.mega li.mega li.mega li.haschild-over .childcontent,
.ja-megamenu li.mega li.mega li.mega li.mega li.mega li.haschild-over .childcontent { left: auto; /*show on parent:hover*/ }

.ja-megamenu li.mega .right,
.ja-megamenu li.haschild-over li.mega .right,
.ja-megamenu li.mega li.haschild-over li.mega .right ,
.ja-megamenu li.mega li.mega li.haschild-over li.mega .right,
.ja-megamenu li.mega li.mega li.mega li.haschild-over li.mega .right,
.ja-megamenu li.mega li.mega li.mega li.mega li.haschild-over li.mega .right { right: auto; /*hide the menu*/ }

.ja-megamenu li.haschild-over .right
{ right: 0; /*show on parent:hover*/ }
.ja-megamenu li.mega li.haschild-over .right,
.ja-megamenu li.mega li.mega li.haschild-over .right,
.ja-megamenu li.mega li.mega li.mega li.haschild-over .right,
.ja-megamenu li.mega li.mega li.mega li.mega li.haschild-over .right,
.ja-megamenu li.mega li.mega li.mega li.mega li.mega li.haschild-over .right
{ right: 12em; /*show on parent:hover*/ }

ul.level1 li.mega { float: none; }

ul.level1 .childcontent { margin: -2em 0 0 160px; }

/* Columns —*/
.megacol { float: left;}
/*
.cols1 .megacol { width: 100px }
.cols2 .megacol { width: 50%; }
.cols3 .megacol { width: 33.3%; }
.cols4 .megacol { width: 25%; }
.cols5 .megacol { width: 20%; }
.cols6 .megacol { width: 16.6%; }
.cols7 .megacol { width: 14.2%; }
.cols8 .megacol { width: 12.5%; }
.cols9 .megacol { width: 11.1%; }
.cols10 .megacol { width: 10%; }

.ja-megamenu .cols1 { width: 200px; }
.ja-megamenu .cols2 { width: 400px; }
.ja-megamenu .cols3 { width: 600px; }
.ja-megamenu .cols4 { width: 800px; }
.ja-megamenu .cols5 { width: 1000px; }
.ja-megamenu .cols6 { width: 1200px; }
.ja-megamenu .cols7 { width: 1400px; }
.ja-megamenu .cols8 { width: 1800px; }
.ja-megamenu .cols9 { width: 2000px; }
.ja-megamenu .cols10 { width: 2200px; }
*/

/* 2nd level and above */
#ja-mainnav ul.level0 li ul li {
border-bottom: 1px solid #E7E7E7;
border-right: none;
background: url(../../images/menu-bg.gif) repeat-x left bottom;
}

#ja-mainnav ul.level0 li ul li.group {
background-image: none;
border: 0px;
padding-bottom: 1px;
}

#ja-mainnav ul.level0 li ul a {
border-right: none;
margin: 0;
height: auto;
line-height: normal !important;
padding: 7px 10px;
background: none !important;
text-transform: none;
font-weight: normal;
font-size: 100%;
white-space: nowrap;
color: #333333 !important;
}

#ja-mainnav ul.level0 li.havesubchild,
#ja-mainnav ul.level0 li.havesubchild-active {
background: url(../../images/menu-bg.gif) repeat-x left bottom;
}

#ja-mainnav ul.level0 li ul a:hover,
#ja-mainnav ul.level0 li ul a:active,
#ja-mainnav ul.level0 li ul a:focus,
#ja-mainnav ul.level0 ul li.over,
#ja-mainnav ul.level0 ul li.sfhover,
#ja-mainnav ul.level0 ul li.havesubchildsfhover,
#ja-mainnav ul.level0 ul li.havesubchild-activesfhover {
background: url(../../images/menu-hover.gif) repeat-x left bottom #F6F6F6;
color: #54992F !important;
}
/* Styling —*/
ul.level1 li.mega a.mega {
background: none;
border: 0;
color: #cccccc;
font-weight: normal;
padding: 5px;
}

ul.level1 li.mega a.mega span.menu-title { background: none; padding: 0; }

ul.level1 li.haschild {
background: url(../../images/arrow.png) no-repeat 95% center;
padding: 0;
}

ul.level1 li.group { background: none; }

/* CHILD CONTENT
———————————–*/
.childcontent-inner {
background: #FDFDFD;
border: 1px solid #E7E7E7;
color: #ccc;
z-index: 999;
}

.childcontent .ja-moduletable {
color: #ccc;
border-bottom: 0;
line-height: 1.5;
margin: 10px 0;
padding: 0;
}

.childcontent .ja-moduletable h3 {
background: none;
color: #fff;
border-bottom: 1px dotted #E7E7E7;
margin-left: 10px;
margin-right: 10px;
text-indent: 5px;
text-transform: none;
}

.childcontent .ja-moduletable .ja-box-ct {
padding: 0 5px;
}

.childcontent .ja-moduletable a {
color: #ccc;
text-decoration: none;
border-bottom: 1px dotted #ccc;
}

.childcontent .ja-moduletable a:hover,
.childcontent .ja-moduletable a:focus,
.childcontent .ja-moduletable a:active {
color: #fff;
text-decoration: none;
border-bottom: 1px solid #fff;
}

.childcontent .ja-moduletable ul:first-child {
margin-top: 0 !important;
}

#ja-mainnav .childcontent .ja-moduletable li {
border: 0px;
background:transparent url(../../images/bullet.gif) no-repeat 5px 7px;
padding-left: 15px;
}

/* Grouped — */
.group {}

.group-title {
border-bottom: 1px solid #ccc;
overflow: hidden;
}

.group-title .menu-title {
color: #777;
text-transform: uppercase;
font-weight: bold;
font-size: 115%;
}

.group-title .menu-desc {
color: #999;
padding-left: 0 !important;
}

.group-content .ja-moduletable,
.group-content ul.megamenu {
margin: 10px; /* Group-content’s gutter*/
}

/* reset — */
.childcontent ul.megamenu .ja-moduletable {
padding: 0;
}

.childcontent ul.megamenu .ja-moduletable h3 {
margin-left: 0;
margin-right: 0;
}

#ja-mainnav a span {
display:block;
text-align: left;
}

#ja-mainnav .ja-megamenu span.has-image {
background-repeat: no-repeat;
padding: 30px 0 19px 64px;
margin-left: 5px;
height: 15px;
cursor: pointer;
}

#ja-mainnav .megamenu li li.haschild a.haschild,
#ja-mainnav .megamenu li li.haschild-over a.haschild {
background-position: 95% center !important;
}

/******
————————-*/
.megamenu .ja-box-ct {
color: #333;
}

#ja-mainnav ul.level0 li ul .group-content .ja-box-ct a {
display: inline !important;
padding: 0px !important;
margin: 0px !important;
}

#ja-mainnav ul.level0 li ul .group-content .ja-box-ct {
margin: 0px;
padding: 0px;
}

note: only use for the clean package.

good luck

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#335274

See my screenshot
7124

[nevang Friend nevangJoin date: April 2010Posts: 2Downloads:0Uploads:0 Thanks: 2]

#340378

Hi tienhc,

Thanks for sharing this modification. Ι am also interested in this feature and I applied the modified CSS and it works well.
The only problem I have met so far is that the active menu item is not highlighted.
I also can’t understand what do you mean by the term “clean package”.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#340417

Dear nevang!
I checked my code again, they work well on my site, Can you please give me the link to your site and if possible give the ftp account, i would like to have a closer look on the issue,

the clean package is the quickstart package or the ja_zeosoiteii package which have never made any customization by yourself

Good luck

1 user says Thank You to Saguaros for this useful post

1. nevang

[nevang Friend nevangJoin date: April 2010Posts: 2Downloads:0Uploads:0 Thanks: 2]

#340451

<em>@tienhc 174651 wrote:</em><blockquote>Dear nevang!
I checked my code again, they work well on my site, Can you please give me the link to your site and if possible give the ftp account, i would like to have a closer look on the issue,

the clean package is the quickstart package or the ja_zeosoiteii package which have never made any customization by yourself

Good luck</blockquote>

Thanks for the prompt reply tienhc,

I installed the quickinstall package and applied your modification. It still doesn’t work as expected. Active menu item image still doesn’t have a tick. There is a rollover effect on hover only. Maybe I have misunderstood the functionality of your modification.

I send you address and ftp account by pm.

Regards,
Nikolas

[sebetan29 Friend sebetan29Join date: March 2011Posts: 6Downloads:0Uploads:1 Thanks: 2]

#383424

Exactly the things i was looking for…great…Thanks,
Seb:)

[plieka Friend pliekaJoin date: February 2009Posts: 9Downloads:0Uploads:1 Thanks: 6]

#386533

Hi,

I like the solution but them menu aligns all the menu’s to the left. With the original menu with images al the options are spread over the width of the template. In my case I have 5 menu’s and the all should be spaced at 20% of the 950px width.

would shoul d I change to spread the menu’s over the width of the template.

attached is a picture of all the icons alligned to the left in stead of spread over the full width
Thanks

---

Attachments:

1. 

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#386659

you add the following code into the template.css file

.level0 > li {
width: 19.5%;
}

1 user says Thank You to Saguaros for this useful post

1. plieka

[Author]

Posts