CODEWITHSUNDEEP
htmlcss
Jitendra Vyas
Jitendra Vyas

Reputation: 152875

How to add arrow to current page navigation link items?

Like this. With IE6 compatibility too.

enter image description here

<ul>
<li><a href="/home">Home</a></li>
<li class="selected"><a href="/about/">About</a></li>
<li><a href="/contact-us/">Contact Us</a></li>
<li><a href="/portfolio/">Portfolio</a></li>
<li><a href="/gallery/">Gallery</a></li>
<ul>​

You can use this jsfiddle example to play with

http://jsfiddle.net/jitendravyas/GN6ed/

and this arrow image https://i.sstatic.net/AGoLj.gif

Upvotes: 1

Views: 4126

Answers (4)

Starx
Starx

Reputation: 79049

You can use CSS3's transform property to rotate a small box to 45 Deg, and make it look like an arrow.

.arrow {
    width: 30px;
    height: 30px;
    background: #000;
    -webkit-transform: rotate(45deg);  /* Saf3.1+, Chrome */
    -moz-transform: rotate(45deg);  /* FF3.5+ */
    -ms-transform: rotate(45deg);  /* IE9 */
    -o-transform: rotate(45deg);  /* Opera 10.5 */
    transform: rotate(45deg);
    filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
    M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');
    zoom: 1;
}

Here is a demo

Update 2: Here is the PURE CSS SOLUTION with the border too.

Upvotes: 2

sandeep
sandeep

Reputation: 92853

I didn't tested it on IE6 but i am sure it's work on it.

Check this http://jsfiddle.net/GN6ed/4/

Upvotes: 1

Stanley
Stanley

Reputation: 4035

This wouldn't be easy to accomplish in IE6.

You could use something like this. But it wouldn't be supported in IE6 as it doesn't support the ::before pseudo class.

.selected {
   position:relative;
}

.selected::before {
content: "";
position: absolute;
top: 100%;
left: 42%;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 13px solid red;
}​

If you decide to do this with just css take a look at this http://www.robjstanley.com/css3-shapes/.

There's a speech bubble shape that you can do with just css3, pretty cool.

Upvotes: 1

Shadow Wizzard
Shadow Wizzard

Reputation: 66398

Simple CSS will do the trick:

.selected a {background:white; 
    background-image: url(http://i.imgur.com/QHFqq.gif);
    background-repeat: no-repeat;
    background-position: 50% 0%;
}

Updated fiddle.

Dunno about IE6 can't test it here but I think this is as cross browser as possible, using basic CSS stuff.

Upvotes: 0

Related Questions