Display an image only with active text
I am making a copy of the MSN.com webpage for practice with my HTML and CSS. I managed to get the title and everything above it except the search form. Now I know how to create forms, I just don't understand how one of the little jobs works.
Example:
Have a look at the following image: http://gyazo.com/497d24dde39c04d9956c2faec4eb556f
You can see where it says MSN (orange part), the arrow / triangle is right below it. I suppose this arrow is the way, right? Can't you just do it via CSS?
So, I want to know how I will use the arrow that defaults to the first word and then moves to the active link / text.
Please let me know. Thanks to
source to share
A simple gray arrow like MSN can be done with CSS. To do this by following the selected link, you will need to use JavaScript. Don't worry, it's very simple.
First, here's a live example on jsfiddle: http://jsfiddle.net/EBhVu/23/
HTML:
<a href="#" class="active">Web</a>
<a href="#">MSN</a>
<a href="#">Images</a>
CSS:
This will create a small gray arrow and place it below the selected link
a {
position:relative;
}
a:active:after, a.active:after {
position:absolute;
right:50%; /* Centers arrow */
top:100%; /* Places arrow below link */
content:" ";
width: 0;
height: 0;
border-left: 5px solid transparent; /* Builds the arrow */
border-right: 5px solid transparent;
border-bottom: 5px solid grey;
}
JavaScript:
Every time a link is clicked this JavaScript gives a clicked link of the "active" class
$('a').on('click',function(){
$('a').removeClass('active');
$(this).addClass('active');
});
source to share