CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Hero Stripe
Hero Stripe

Reputation: 89

Arrow on menu when it is active

<ul>
<li><a href="#kabinet">item7</a></li>
<li><a href="#kabinet">item6</a></li>
<li><a href="#poker">item5</a></li>
<li><a href="#stolice">item4</a></li>
<li><a href="#sefovi">item3</a></li>
<li><a href="#stampa">item2</a></li>
<li><a href="#reklame">item1</a></li>
</ul>

I want to create button in menu with small doen arrow, and when user click on ITEM3 arrow will be on button item3 ... Do I need JavaScript for that or it can be done with pure css?

Do you have some idea?

here is my arrow css 

.arrow_box { 
    position: relative; 
    background: #29B473; 
    border: 1px solid #2BB570; 
    border-radius: 5px; 
}
.arrow_box:after, .arrow_box:before { 
    top: 100%; 
    left: 50%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
}
.arrow_box:after { 
    border-color: rgba(41, 180, 115, 0); 
    border-top-color: #29B473; 
    border-width: 5px; 
    margin-left: -5px; 
}
.arrow_box:before { 
    border-color: rgba(43, 181, 112, 0); 
    border-top-color: #2BB570; 
    border-width: 6px; 
    margin-left: -6px; 
}

Upvotes: 0

Views: 770

Answers (3)

webdeveloper
webdeveloper

Reputation: 17288

As alternative:

$(function(){
    $('ul').on('click', 'li', function(){
        $(this).addClass('arrow_box').siblings().removeClass('arrow_box');
    });
});

Demo: http://jsfiddle.net/9hKfD/

OR with your styles:

$(function(){
    $('ul').on('click', 'a', function(){
      $(this).addClass('arrow_box').closest('li')
      .siblings().find('a').removeClass('arrow_box');
    });
});

Demo: http://jsfiddle.net/9hKfD/1/

Upvotes: 1

Felix
Felix

Reputation: 38102

You can try this code:

$('ul li a').click(function() {
    $('ul li a').removeClass('arrow_box');
    $(this).addClass('arrow_box');
});

It's better to give your element a class name for easier to manage and reduce errors as well.

Upvotes: 3

sid
sid

Reputation: 163

it can be done using jquery,

simply use this,

$('ul li a').click(function(){
  $('ul li a').removeClass('arrow_box'); //will remove arrow from other a tags
  $(this).addClass('arrow_box');//will show arrow on the clicked a tag

});

Upvotes: 1

Related Questions