search

briankoser / kotangent-jekyll

Kotangent, the Weblog of Brian Koser
MIT License
1 stars 0 forks source link

Style active section #26

Open briankoser opened 10 years ago

briankoser commented 10 years ago 
{% capture location %}{{ page.url | remove_first:'/' | split:'/' | first }}{% endcapture %}
<nav><ul>
<li><a {% if location == 'about' %}class="active" {% endif %}href="/about/">About</a></li>
<li><a {% if location == 'projects' %}class="active" {% endif %}href="/projects/">Projects</a></li>
<li><a {% if location == 'blog' %}class="active" {% endif %}href="/blog/">Blog</a></li>
<li><a {% if location == 'contact' %}class="active" {% endif %}href="/contact/">Contact</a></li>

briankoser commented 10 years ago

Add .active-link to CSS:

a:hover,
    .active-link {
        -webkit-transition: border-bottom-width 300ms cubic-bezier(1, 0, 0, 1);
                transition: border-bottom-width 300ms cubic-bezier(1, 0, 0, 1);
        border-bottom: solid 3px #006b9f;
    }