Support Center

Recent questions

About Koken

This Help Center provides support for Koken, a free content management system designed for photographers, artists and designers.

Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

Nested Navigation & Link to an Album Set

Neil Panchal

Nov 17, 2014 08:02PM EST


I have searched through the discussions and couldn't find an applicable answer.

I am trying to design a very simple nested navigation list as follows:

Album Set 1 ----> Links to Album Set [This is formatted as h3]
- Album 1.1 ----> Links to individual Album [This is formatted as h4]
- Album 1.2 ----> Links to individual Album [This is formatted as h4]
- Album 1.3 ----> Links to individual Album [This is formatted as h4]

Album Set 2 ----> Links to Album Set [This is formatted as h3]
- Album 2.1 ----> Links to individual Album [This is formatted as h4]
- Album 2.2 ----> Links to individual Album [This is formatted as h4]
- Album 2.3 ----> Links to individual Album [This is formatted as h4]

Unordered lists are generated by setting <koken:navigation nested="true">.

However, the Javascript keeps removing the album set link and instead tries to hide/show the child items. How do I disable this behavior? I checked and it seems like koken.js is controlling this behavior. Is there a uncompressed version of koken.js I can use?

It would be a nice feature to turn off the hide/show capability but still allow nested navigation. If it already exists, please kindly let me know. If I turn off nested navigation in <koken:navigation> tag, I get a flat structure which is not possible to format as I mentioned above. I want Album Sets to be <h3> and Albums to be <h4>.

Any help would be greatly appreciated :-).
- Neil

Up 0 rated Down


Nov 18, 2014 07:30AM EST
Sorry I cannot answer this but I'm also stuck trying to build a very similar nested navigation structure to you and would be interested in the answer you get. I'm also developing my own theme.
Up 0 rated Down

Neil Panchal

Nov 18, 2014 08:12PM EST

I was able to temporarily fix the problem by editing the koken.js file. I know nothing about Javascript, but I can understand addClass and removeClass methods, and display: none css property that hide/show the child albums.

In koken.js (/koken/app/site/themes/common/js/koken.js), you'll need to uncompress it first. I used Sublime Text 3 + JSFormat plugin. Then, search for "navigation:" section in koken.js. This is what I changed the block to:

navigation: {
sets: [],
init: !1,
toggleChilds: function(t, e) {
var i = e && "none" === e || $(t).hasClass("k-nav-open"),
n = t.siblings("ul");
n.length && (i ? $(t).removeClass("k-nav-open") : $(t).addClass("k-nav-open"), n.css("display", i ? "block" : "block"))
nest: function() {
var t = $("a.k-nav-set");
this.sets.length !== t.length && (this.sets = t, $.each(this.sets, $.proxy(function(t, e) {
null === e.onclick && (e.onclick = $.proxy(function(t) {
$(".k-nav-current").addClass("k-nav-current"), this.toggleChilds($(e))
}, this))
}, this)), this.setCurrent())
setCurrent: function(t) {
var e = RegExp("(https?://" + + ")?" + $K.location.root_folder + "(/(index|preview).php\\?)?"),
t = t || location.href,
i = t.replace(e, "").replace(/&rand=.*$/, "").replace(/&preview=.*/, "") || "/";
$.each(this.sets, $.proxy(function(t, e) {
this.toggleChilds($(e), "none")
}, this)), $(".k-nav-current").addClass("k-nav-current"), $.each($(".k-nav-root"), function(t, n) {
var a = !1,
o = {
len: 0,
el: !1
$.each($(n).find("a:not(.k-nav-set)"), function(t, n) {
n = $(n);
var r = n.attr("href").replace(e, "").replace(/&preview=.*/, "");
if (i === r) {
for (n.addClass("k-nav-current");;) {
if (n = n.parent(), n.hasClass("k-nav-root")) break;
"ul" === n.get(0).nodeName.toLowerCase() &&
return a = !0, !1
var s = RegExp("^" + r + "(.*)?$");
r.length > 1 && s.test(i) && r.length > o.len && (o.el = n, o.len = r.length)
}), !a && o.el && o.el.addClass("k-nav-current")
}), $('a[href="' + i + '"]').addClass("k-nav-current")
Up 0 rated Down


Nov 19, 2014 04:49AM EST
@Neil Panchal, thank you for sharing your workaround. Looks complicated as I'm not too comfortable with Javascript either but I'll have a go and see if it helps me.

This question has received the maximum number of answers.
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found