stdolke
November 30, 2016, 2:47pm
1
I have a an expandable sidebar on my site with a submenu that expands and shows the tags (using ‘pluck’) used on projects. When clicking on the tag it filters the projects (…projects/tag:Example).
This all works.
Except, the active link will not take on the color I assign to it. When choosing a categorie, it will go back to its default color.
It shows on hover and click, but not when active. Which is important otherwise it is hard to know which link is active.
The sidebar template:
<nav class="leftnav">
<aside>
<nav class="sidebar-nav" role="navigation">
<ul>
<?php foreach($pages->visible() as $p): ?>
<li class="group<?php e($p->isOpen(), ' sidebar-nav-active') ?>">
<a href="<?php echo $p->url() ?>"><?php echo $p->title()->html() ?></a>
<?php if($p->hasVisibleChildren() && $p->isOpen()): ?>
<ul class="submenu nav-children" id="nav-collapsible-<?php echo $p->uid() ?>" aria-hidden="false">
<?php endif ?>
<?php if($p->hasVisibleChildren() && !$p->isOpen()): ?>
<ul class="submenu nav-children" id="nav-collapsible-<?php echo $p->uid() ?>" aria-hidden="true">
<?php endif ?>
<?php if($p->hasVisibleChildren()) : ?>
<?php $projects = $p->children()->visible(); ?>
<?php foreach($projects->pluck('tags', ',', true) as $tags): ?>
<li class="<?php e($p->isOpen(), 'sidebar-nav-active') ?>">
<a href="<?php echo $p->url() . '/tags:Ontwerpelementen' ?>"><?php echo $tags ?></a>
</li>
<?php endforeach ?>
</ul>
<?php endif ?>
</li>
<?php endforeach ?>
</ul>
</nav>
</aside>
</nav>
The CSS
.sidebar-nav ul {
margin: 0;
padding: 0
}
.sidebar-nav li {
list-style: none;
font-size: 18px;
border-left: 4px solid transparent;
overflow: hidden
}
.sidebar-nav li>ul li {
font-size: 14px
}
.sidebar-nav li>ul li a {
padding-left: 12%;
}
.sidebar-nav a {
display: block;
padding: 10px;
-webkit-transition: unset;
transition: unset
}
.group:before,
.group:after {
content: " ";
display: table
}
.group:after {
clear: both
}
.nav-children {
display: block;
max-height: none;
opacity: 1;
-webkit-transition: max-height .2s, opacity .2s;
transition: max-height .2s, opacity .2s
}
.nav-children[aria-hidden=true] {
max-height: 0
}
.expand-subnav {
background: 0;
border: 0;
border-radius: 50%;
color: #f00;
cursor: pointer;
display: block;
float: right;
font-size: 22px;
font-weight: bold;
height: 26px;
line-height: 1;
margin: 8px;
padding-bottom: 5px;
position: relative;
width: 26px;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
-webkit-transition: -webkit-transform .2s;
transition: -webkit-transform .2s;
transition: transform .2s;
transition: transform .2s, -webkit-transform .2s
}
.expand-subnav:hover {
background-color: #f00;
color: #fff;
outline: 0
}
.expand-subnav[aria-expanded=true] {
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
And for links in general I have set:
a {
color: #7c7c7c;
text-decoration: none;
transition: color .3s, background .3s, border .3s;
}
a:hover, a:focus, a:active {
color: #729b7b;
}
Thanks in advance for the help!
Not sure if I follow you at 100% but when you write this
a:hover, a:focus, a:active {
color: #729b7b;
}
The site live does exactly that. The link is green when you’re in over state and when is active.
To do what you want you should probably add a class somewhere
Another thing.
I think you can improve the code a bit in the first part by doing something like this
<?php if($p->hasVisibleChildren()): ?>
<ul class="submenu nav-children" id="nav-collapsible-<?php echo $p->uid() ?>" aria-hidden="<?php e($p->isOpen() , 'false' , 'true') ?>">
<?php endif ?>
Also, to expand on my previous answer, you should probably check the current tag against the one in the second foreach loop. Something like this maybe
<?php
$currentTag = param('tag');
foreach($projects->pluck('tags', ',', true) as $tags): ?>
<li class="<?php e($p->isOpen(), 'sidebar-nav-active') ?>">
<a href="<?php echo $p->url() . '/tags:Ontwerpelementen' ?>" class="<?php e($currentTag == $tag) , 'is-active' ?>"><?php echo $tags ?></a>
</li>
<?php endforeach ?>
I never used tags in url so I’m not 100% sure if this is the best way to solve the problem though.
EDIT : also looks like you have an hardcoded tag in the url so no matter what link I click I always get the tags:Ontwerpelementen
page
mxst
November 30, 2016, 3:46pm
4
so for me it looks like you have to also set:
.sidebar-nav-active > a:first-child {
color: #729b7b;
}
but also you overuse .sidebar-nav-acive
so what I usually do is set a specific active tag to the child and to the parent I want to highlight in css
if it helps here is my navigation snippet (different classes but similar idea):
<ul>
<?php foreach($pages->visible() as $item): ?>
<?php if(!$item->hasVisibleChildren()): ?>
<li class="<?php e($item->isOpen(), 'active'); ?>">
<a class="" href="<?php echo $item->url() ?>">
<?php echo $item->title()->html();?>
</a>
</li>
<?php else: // dropdown needed ?>
<li class="<?php e($item->isOpen(), 'active'); ?>">
<a aria-expanded="false" href="<?php echo $item->url() ?>">
<?php echo $item->title()->html();?>
</a>
<ul class="menu vertical">
<?php foreach ($item->children()->visible() as $child): ?>
<li>
<a href="<?php echo $child->url(); ?>"><?php echo $child->title()->html(); ?></a>
</li>
<?php endforeach; ?>
</ul>
</li>
<?php endif; ?>
<?php endforeach ?>
</ul>
stdolke
December 1, 2016, 10:50am
5
Sorry the hardcoded tag was an error.
Exactly what I want is:
When clicking on ‘Projecten’, the title ‘Projecten’ gets highlighted in color (as active link). The catagories expand but are just grey, once you click on a category that category opens and the color of it turns green as long as you stay are on that tags page. This way, you know which tag you clicked on and visited. Seems so simple…yet I can not get it to work.
I’ve improved the code as suggested. Also tried @mxst his suggestion but neither work. I’m a new at Kirby, so maybe I am just not understanding it properly.
Whatever I do; it just makes all the tags the same color. Hover works. I’m starting to think it has something to do with using the pluck method for the tags…
texnixe
December 1, 2016, 10:56am
6
It has nothing to do with the pluck()
method. Check out this post how to check if a tag is active: Tagcloud with active class on current tag?
stdolke
December 1, 2016, 11:49am
7
Thank you, tried that as well - but it still doesn’t change anything… What am I doing wrong?
<?php $projects = $p->children()->visible(); ?>
<?php foreach($projects->pluck('tags', ',', true) as $tags): ?>
<li>
<a <?php ecco($p->isActive(), ' class="active"') ?> href="<?php echo $p->url() . '/tags:' . $tags ?>"><?php echo $tags ?></a>
</li>
<?php endforeach ?>
texnixe
December 1, 2016, 11:54am
8
You check if the page is active, but you have to check if the parameter is active. The example I linked to should work for you as well. In your example, $p
refers to the page, in the example, $p
refers to the parameter, and then checks if the tag is the same as the URL parameter.
stdolke
December 1, 2016, 12:06pm
9
I guess that just goes beyond my understanding of it all.
I’ve tried everything within my knowledge.
Thank you for your help.
texnixe
December 1, 2016, 12:21pm
10
Try this:
<?php
$param = kirby()->request()->params()->tag();
$projects = $p->children()->visible();
foreach($projects->pluck('tags', ',', true) as $tags): ?>
<li>
<a <?php ecco($tags == $param, ' class="active"') ?> href="<?php echo $p->url() . '/tags:' . $tags ?>"> <?php echo $tags ?></a>
</li>
<?php endforeach ?>
Then check in dev tools if only one link gets the active
class.
stdolke
December 1, 2016, 12:35pm
11
Thank you, but unfortunately, it does not add the class (I’ve uploaded the recent version):
http://studiolake.nl/kokmeuleman/projects
EDIT
$param = kirby()->request()->params()->tag();
had to be
$param = kirby()->request()->params()->tags ();
texnixe
December 1, 2016, 1:01pm
12
I tested it in a Starterkit and this code worked for me:
<?php
$param = kirby()->request()->params()->tag();
$projects = $page->children()->visible();
$tags = $projects->pluck('tags', ',', true);
?>
<ul>
<?php foreach($tags as $tag): ?>
<li>
<a <?php ecco($tag == $param, ' class="active"') ?> href="<?php echo $page->url() . '/tag:' . $tag ?>"> <?php echo $tag ?></a>
</li>
<?php endforeach ?>
</ul>
Note that I changed $tags
to $tag
because I found the plural irritating.
1 Like
mxst
December 1, 2016, 11:32am
13
Do you have a repository where I can fix it?
The issue is with php not with kirby