CODEWITHSUNDEEP
htmlcss
DNK
DNK

Reputation: 63

how to highlight My current menu Items in css

I am working with following menu bar in laravel. I need highlight current menu item when I click it.

<div class="col-sm-3 col-md-2 sidebar">
    <ul class="nav nav-sidebar">
        <li style="margin-left:20px;">
            {{--<img src="{{ Auth::user()->getAvatarUrl() }}" height="50" width="50" style="border-radius:25px;" />--}}
        </li>
        <li><a href="#"> @ {{ Auth::user()->name }}</a></li>
        <li class="active"><a href="#">PREGO<span class="sr-only">(current)</span></a></li>
        <li><a href="#">Edit Account</a></li>
        <li><a href="{{ route('projects.index') }}">Projects</a></li>
        <li><a href="{{ route('collaborators.form', $project)}}">Collaborators</a></li>
        <li><a href="#">Todos</a></li>
    </ul>
    <ul class="nav nav-sidebar">
        <li><a href="">Account</a></li>
        <li><a href="">Help</a></li>
        {{--<li><a href="{{ route('auth.logout') }}">Sign Out</a></li>--}}
    </ul>
</div>

how can do this?

Upvotes: 1

Views: 2079

Answers (3)

Manoj A
Manoj A

Reputation: 335

This is the one of the another way to active list. Likely

Jquery:

<script>
  $('.nav-sidebar').on('click','li', function(){
    $(this).addClass('active').siblings().removeClass('active');
  });
</script>

And one more thing you don't add .active class in your code. After that you have to wrap your css property like

<style>
 .nav-sidebar li.active{
  /*your css code here*/
 }
</style>

Upvotes: 1

Manoj A
Manoj A

Reputation: 335

You will write your code in your css file. Likely

.nav-sidebar li.active{
 /*your code here*/
}

this ia also one of the way to active your current active menu.

Upvotes: 0

Alexander
Alexander

Reputation: 161

I think that if you style the .active class will do what you want to

.active{
 /*add hear what you would like to change for example*/
background-color:red;
}

Upvotes: 1

Related Questions