Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

How to style a link that matches the current URL? [duplicate]

Tags:

css

url

hyperlink

I'd like to add a CSS background color to any link in the sidebar navigation (#subnav) that matches the current URL exactly.

I've tried div#subnav a:active { background: #f1f2f2; }, but it didn't work.

Any help would be appreciated!

UPDATE: The code for the subnav is as follows:

<!-- START ALL PRODUCTS SUBNAV -->
{% if collection.handle == 'all' %}
<div id="back_link"><a style="background: none; color: #fff;" href="/collections/all">.</a></div>
<div id="subnav" style="margin-top: -33px;">{% if linklists.sub-navigation.links.size > 0 %}{% for link in linklists.sub-navigation.links %}
<li class="main_category_link"><a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}>{{ link.title | escape }}</a></li>{% unless forloop.last %} {% endunless %}{% endfor %}{% else %}
{% endif %}
</div>
{% endif %}
<!-- END ALL PRODUCTS SUBNAV -->

<!-- START HOME SUBNAV -->
{% if collection.handle == 'home' %}
<div id="back_link"><a href="#" onclick="history.go(-1);return false;">&larr; BACK</a></div>

<div id="subnav">
<div class="main_category_link"><a href="/collections/home">HOME</a></div>
{% if linklists.sub-navigation-home.links.size > 0 %}
{% for link in linklists.sub-navigation-home.links %}
<li><a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}>{{ link.title | escape }}</a></li>{% unless forloop.last %} {% endunless %}{% endfor %}{% else %}
{% endif %}
<div class="main_category_link"><a href="/collections/children">CHILDREN</a></div>
<div class="main_category_link"><a href="/collections/women">WOMEN</a></div>
<div class="main_category_link"><a href="/collections/pets">PETS</a></div>
<div class="main_category_link"><a href="/collections/gifts">GIFTS</a></div>
<div class="main_category_link"><a style="margin-bottom: 0;"href="/collections/sale">SALE</a></div>
</div>
{% endif %}
<!-- END HOME SUBNAV -->

<!-- START CHILDREN SUBNAV -->
{% if collection.handle == 'children' %}
<div id="back_link"><a href="#" onclick="history.go(-1);return false;">&larr; BACK</a></div>
<div id="subnav">
<div class="main_category_link"><a href="/collections/home">HOME</a></div>
<div class="main_category_link"><a href="/collections/children">CHILDREN</a></div>
{% if linklists.sub-navigation-children.links.size > 0 %}{% for link in linklists.sub-navigation-children.links %}
<li><a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}>{{ link.title | escape }}</a></li>{% unless forloop.last %} {% endunless %}{% endfor %}{% else %}
{% endif %}
<div class="main_category_link"><a href="/collections/women">WOMEN</a></div>
<div class="main_category_link"><a href="/collections/pets">PETS</a></div>
<div class="main_category_link"><a href="/collections/gifts">GIFTS</a></div>
<div class="main_category_link"><a style="margin-bottom: 0;" href="/collections/sale">SALE</a></div>
</div>
{% endif %}
<!-- END CHILDREN SUBNAV -->

<!-- START WOMEN SUBNAV -->
{% if collection.handle == 'women' %}
<div id="back_link"><a href="#" onclick="history.go(-1);return false;">&larr; BACK</a></div>
<div id="subnav">
<div class="main_category_link"><a href="/collections/home">HOME</a></div>
<div class="main_category_link"><a href="/collections/children">CHILDREN</a></div>
<div class="main_category_link"><a href="/collections/women">WOMEN</a></div>
{% if linklists.sub-navigation-women.links.size > 0 %}{% for link in linklists.sub-navigation-women.links %}
<li><a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}>{{ link.title | escape }}</a></li>{% unless forloop.last %} {% endunless %}{% endfor %}{% else %}
{% endif %}
<div class="main_category_link"><a href="/collections/pets">PETS</a></div>
<div class="main_category_link"><a href="/collections/gifts">GIFTS</a></div>
<div class="main_category_link"><a style="margin-bottom: 0;" href="/collections/sale">SALE</a></div>
</div>
{% endif %}
<!-- END WOMEN SUBNAV -->

<!-- START PETS SUBNAV -->
{% if collection.handle == 'pets' %}
<div id="back_link"><a href="#" onclick="history.go(-1);return false;">&larr; BACK</a></div>
<div id="subnav">
<div class="main_category_link"><a href="/collections/home">HOME</a></div>
<div class="main_category_link"><a href="/collections/children">CHILDREN</a></div>
<div class="main_category_link"><a href="/collections/women">WOMEN</a></div>
<div class="main_category_link"><a href="/collections/pets">PETS</a></div>
{% if linklists.sub-navigation-pets.links.size > 0 %}{% for link in linklists.sub-navigation-pets.links %}
<li><a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}>{{ link.title | escape }}</a></li>{% unless forloop.last %} {% endunless %}{% endfor %}{% else %}
{% endif %}
<div class="main_category_link"><a href="/collections/gifts">GIFTS</a></div>
<div class="main_category_link"><a style="margin-bottom: 0;" href="/collections/sale">SALE</a></div>
</div>
{% endif %}
<!-- END PETS SUBNAV -->

<!-- START GIFTS SUBNAV -->
{% if collection.handle == 'gifts' %}
<div id="back_link"><a href="#" onclick="history.go(-1);return false;">&larr; BACK</a></div>
<div id="subnav">
<div class="main_category_link"><a href="/collections/home">HOME</a></div>
<div class="main_category_link"><a href="/collections/children">CHILDREN</a></div>
<div class="main_category_link"><a href="/collections/women">WOMEN</a></div>
<div class="main_category_link"><a href="/collections/pets">PETS</a></div>
<div class="main_category_link"><a href="/collections/gifts">GIFTS</a></div>
{% if linklists.sub-navigation-gifts.links.size > 0 %}{% for link in linklists.sub-navigation-gifts.links %}
<li><a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}>{{ link.title | escape }}</a></li>{% unless forloop.last %} {% endunless %}{% endfor %}{% else %}
{% endif %}
<div class="main_category_link"><a style="margin-bottom: 0;" href="/collections/sale">SALE</a></div>
</div>
{% endif %}
<!-- END GIFTS SUBNAV -->

<!-- START SALE SUBNAV -->
{% if collection.handle == 'sale' %}
<div id="back_link"><a href="#" onclick="history.go(-1);return false;">&larr; BACK</a></div>
<div id="subnav">
<div class="main_category_link"><a href="/collections/home">HOME</a></div>
<div class="main_category_link"><a href="/collections/children">CHILDREN</a></div>
<div class="main_category_link"><a href="/collections/women">WOMEN</a></div>
<div class="main_category_link"><a href="/collections/pets">PETS</a></div>
<div class="main_category_link"><a href="/collections/gifts">GIFTS</a></div>
<div class="main_category_link"><a style="margin-bottom: 0;" href="/collections/sale">SALE</a></div>
{% if linklists.sub-navigation-sale.links.size > 0 %}{% for link in linklists.sub-navigation-sale.links %}
<li><a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}>{{ link.title | escape }}</a></li>{% unless forloop.last %} {% endunless %}{% endfor %}{% else %}
{% endif %}
</div>
{% endif %}
<!-- END SALE SUBNAV -->
like image 420
Travis Avatar asked Mar 18 '12 03:03

Travis

People also ask

How do I make an active link a different color?

Use the :active class to change the color of active links. Possible values could be any color name in any valid format.

What is URL () in CSS?

The url() CSS function is used to include a file. The parameter is an absolute URL, a relative URL, a blob URL, or a data URL. The url() function can be passed as a parameter of another CSS functions, like the attr() function.

How do I link an image to a URL in CSS?

Usage is simple — you insert the path to the image you want to include in your page inside the brackets of url() , for example: background-image: url('images/my-image. png'); Note about formatting: The quotes around the URL can be either single or double quotes, and they are optional.

1 Answers

The :active property is not what you think it is. On CSS world a link becomes active once you click on it. Of course this takes you to the page it linked to so in reality a link is active for a very short period of time.

There are several approaches you can take to do what you want. Add a class to the link you want to mark as active is the most obvious one:

Your HTML:

<a href="link.html">Link1</a>
<a href="link.html" class="active">Link2</a>
<a href="link.html">Link3</a>

Your CSS:

.active {
    font-weight: bold;
}

This way active link becomes bold. Of course this has to be done server-side.

Check here for other approaches, including one with JavaScript

like image 149
Joao Avatar answered Sep 21 '22 11:09

Joao
Sign in to Comment

Related questions

Is it wise to use a Fluid Layout?
Vertical text in IE within a table cell
wait until images in background (css) are loaded
How can I implement "CSS versioning" (to solve cache issues) using JSF 2 h:outputStylesheet?
Why can't an <ul> (with absolute position) inside a <li> (with relative position) auto size?
.NET convert external CSS to inline CSS [closed]
Give a CSS styled div a "border-left-image"
Using JQuery to toggle between styles
How can I implement CSS Cache Busting with JSF outputStylesheet?
How to set auto height for extjs hbox layout?
HTML/CSS Two auto-width columns
Default unit for font-size?
Fullscreen background video and keep it centered
@media print div: How to solve overlapping page text on header?
CSS Mouse Cursors...rotate cursors?
Div height 100% excluding header
Even page-break for double-sided printing in HTML & CSS
jQuery animate "text-shadow" css property
How to make a circular Div in Chrome?
cross-browser "bullet-proof" CSS3 @font-face syntax

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!