CODEWITHSUNDEEP
asp.nethtmlcss
Xavier
Xavier

Reputation: 1794

How to highlight a selected link in a page by an arrow mark under that active link?

My html code is:

 <div id="arrow">
     <b>Filter By: </b>

    <a href="__#" onclick="GetAllTasks();" id="id_all" style="color: #88b807;">All</a> 

    <input type="text" size="3" style="display: none;" id="DateFilter" />

    <a href="__#" onclick="GetByDate(this);" style="vertical-align: middle;"   id="cal_icon">EndDate</a>

    <a href="#"__0  onclick="GetMyTasks();" id="id_myposts">My Requests</a>
    </div>

My css code is:

a:active  {font-family: Verdana, Sans-serif;
            color:#FF0000;
            text-decoration:none;

            background: url("Images/arrow_down.png") no-repeat;
            background-position:center;
            }

Here i want the arrow image to come under the active link so that it indicates that it is active.. I have tried the above code but i m not getting the desired output..

Upvotes: 0

Views: 1125

Answers (3)

Matt
Matt

Reputation: 31

I tried Giona's answer and found that the negative magin for margin-left was being ignored by the browser and the arrow was still off center by half the width of the arrow image. To fix this, apply the negative margin to margin-right instead.

Upvotes: 0

Giona
Giona

Reputation: 21114

You can display the arrow with pure CSS (see below), but you'll need javascript to keep the class "alive".

Demo (click on a link)

HTML:

<b>Filter By: </b>
<a href="#">All</a> 
<a href="#">EndDate</a>
<a href="#">My Requests</a>

CSS:

a  {
    position:relative;
}
a:active:after, a.active:after  {
    background: url("Images/arrow_down.png");
    width:10px; /* arrow's width */
    height:10px; /* arrow's height */
    margin-left:-5px; /* half of arrow's width */
    position:absolute;
    top:100%;
    right:50%;
    content:" ";
}

jQuery:

$('a').on('click',function(){
    $('a').removeClass('active');
    $(this).addClass('active');
});​

Upvotes: 1

Sowmya
Sowmya

Reputation: 26969

You may have to use some script to do that. Create a separate class for active state and add that class on click.

$('a').click(function(){
    $(this).addClass("active");
});​

Here is the demo http://jsfiddle.net/qvQxp/1/

Upvotes: 0

Related Questions