Category navigation

Hi altravista!

Welcome back to joomlart. Hope you enjoy our products and services!

To upgrade your sidebar left categroy navigation to add more feature: toggle menu lke jm_rasite, jm_lime… Please do the following simple steps:

-- open: app\design\frontend\default\jm_natristemplate\pag e\html edit ‘head.pthml’

-- Add this code:

<script type="text/javascript" src="<?php echo $this->getSkinUrl(‘js/ja.accordion.nav.js’) ?>"></script>

to the end of ‘head.phtml’

-- Copy 3 files: arrow-cat.gif, arrow-cat-active.gif, arrow-cat-hover.gif to skin\frontend\default\jm_natris\images

-- Open skin\frontend\default\jm_natris\css then edit theme.css

Find this code about line 6098:

HTML Code:

#ja-sidenav li {
border-bottom:1px solid #F0F0F0;
line-height:160%;
margin:0;
padding:0;
}

change to:

HTML Code:

#ja-sidenav li {
border-bottom:1px solid #F0F0F0;
line-height:160%;
margin:0;
padding:0;
position:relative;
}

I attach here 3 files as mention before.

Hope this helps you .

works great thanks very much and congratulations for your template!!!

Excellent mod. I’ll mark this one as solved.

This mod indeed works, but it has two minor issues. Both issues doesn’t affect first and second-level categories, but are related to third-level categories and also for all higher levels. Attached are samples:

1.) First problem is when third-level is selected, or only mouse hover over it, some kind of red dots appear all over the field. Probably just css problem. (img1.jpg)
2.) Second problem is bigger; the sidenav-menu collapses when you select a third-level category. It should stay open and show the active category as "bold" or "underline" when selected on the left. In other words, it should act the same as for first and second level active actegories. Please fix this. (img2.jpg)
Lastly I added the attachmend img3.jpg where it is shown how it should look automaticall when the selected third-level category is active. But to make this look like it, I should press the "+" button on sidenav manually.

Thanks in advance, Tomaz.

Hi Futurion!

Thanks for your notice about the bugs.

-- About the first bug: we have fixed this issue and released an updated version, please go to update.joomlart.com, use the compare tool to compare the updated files and you can update the files in your site.

-- Quick solution:for the second one.

+ Open ja.accordion.nav.js in skin/frontend/default/jm_natris/js

+ Add this code:

HTML Code:

$ja('#ja-sidenav li.active').addClass('selected');

$ja('#ja-sidenav li.active > ul.level0').show();

To between line 17 and 18 (before the last closed tag "});" )

Hope this helps you.

Hi thangnn1510,

yes, those two lines of code completely fix that sidebar-nav collapse issue. You should include that fix in next bugfix-release of JM_Natris and maybe also into some of other themes.

Great job, thank you again, Tomaz.

I was not able to open the attachment. The three files that you attached. Where can I get it?

right click on the images and save them in the directory as explained

Hi guys,
while main categories is not parental, then the toggle icon should not show. So I modified theme.css:

Code:

/*JM SIDE NAVIGATION*/

#ja-sidenav .toggle,
#ja-sidenav .toggle:active {
	display: none;
	width: 15px;
	height: 30px;
	position: absolute;
	top: 1px;
	right: 15px;
	padding: 0;
	color: #e0e0e0 !important;
	text-indent: 16px;
}

#ja-sidenav .parent .toggle,
#ja-sidenav .parent .toggle:active {
	display: block !important;
	background: url(../images/arrow-cat.gif) no-repeat center center;
}

#ja-sidenav .toggle:hover {
	text-decoration: none;
}

#ja-sidenav .parent .toggle:hover {
	background: url(../images/arrow-cat-hover.gif) no-repeat center center;
	text-decoration: none;
}

#ja-sidenav .toggle:focus,
#ja-sidenav .toggle:active {
	text-decoration: none;
}

#ja-sidenav .parent .toggle:focus,
#ja-sidenav .parent .toggle:active {
	background: url(../images/arrow-cat-hover.gif) no-repeat center center;
	text-decoration: none;
}

#ja-sidenav li.selected.parent .toggle {
	background: url(../images/arrow-cat-active.gif) no-repeat center center;
}

#ja-sidenav li.selected.parent .toggle:hover {
	background: url(../images/arrow-cat-active.gif) no-repeat center center;
	text-decoration: none;
}

…. and accordion effect is very slow, I recommend to set in file ../js/jquery/plugins/accordion/jquery.accordion.js duration: 200 (on line 305).

Great information. I will incorporate this into EasyShop this evening.

Thanks so much for listing this here.

Hi there,
Thanks for this great guide, it is a real help.

I have a question regarding the child levels.
right now I have 3 levels of navigation.
Is it possible to have level 2 collapsed (unless you enter the child levels…)

e.g

right now when we open second level we get

level 1 [-]
—-> Level 2 [-] <————————--I am on this page but level 3 is expanded
————> Level 3 a
————> Level 3 b
————> Level 3 c

Could you tell me how to make it like this:

level 1 [-]
—-> Level 2 [+] <————————--I am on this page so level 3 should be collapsed.

Level 3 and below should only open automatically if you are on that page. Can this be done?
Thanks!!

Hi ewaanw,

Which JM theme are you using? PM me admin and FTP account of site you’re working. I shall check this for you.