Welcome Guest, Not a member yet? Register   Sign In
How to make nav-link active
#1

I was trying to make class="nav-link" active every time I clicked the navbar navigation. So, for example, I have 5 navbar navigation. Home, About, Contact, Comic, and People. When I click the Home, the class of class="nav-link" will be active. So, it will become class="nav-link active". Then, when I click another navbar navigation, for example About, the class="nav-link active" at Home navbar navigation, will disappear and will appear again in the About navbar navigation. So the class from the navbar navigation of About will be class="nav-link active" while Home become class="nav-link" again. It's kinda hard to explain but I hope I explain it correctly Smile) And sorry for the bad grammar lolll. But anyway, here is my current code, I tried it with flash data on the controller like in the screenshot. Then, I destroy the session and make a new one. Is there any alternative code to make it? Like, more simpler code? Or easier code??

Screenshots:
https://i.imgur.com/I16sK93.png
https://i.imgur.com/RvgJmqg.png
Reply
#2

Some thing like this.
PHP Code:
// in your controller set the page name

$data['page'] = 'home';

return 
view('homeView'$data);


// in your view file

<nav>
    <ul>
      <li class="<?= ($page == "home" ? "active" : ""); ?>"> <a href="/">Home</a> </li>
      <li class="<?= ($page == "apps" ? "active" : ""); ?>"> <a href="#">Apps</a> </li>
      <li class="<?= ($page == "forums" ? "active" : ""); ?>"> <a href="#">Forums</a> </li>
    </ul>
  </nav
What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )
Reply
#3

(This post was last modified: 05-05-2024, 11:28 PM by luckmoshy.)

The other best way is global usage, like   
Code:
/*CI URI */service('uri')->getSegment(4) ==='link'? 'active: null
Codeigniter First, Codeigniter Then You!!
yekrinaDigitals

Reply
#4

(05-05-2024, 10:41 PM)InsiteFX Wrote: Some thing like this.
PHP Code:
// in your controller set the page name

$data['page'] = 'home';

return 
view('homeView'$data);


// in your view file

<nav>
    <ul>
      <li class="<?= ($page == "home" ? "active" : ""); ?>"> <a href="/">Home</a> </li>
      <li class="<?= ($page == "apps" ? "active" : ""); ?>"> <a href="#">Apps</a> </li>
      <li class="<?= ($page == "forums" ? "active" : ""); ?>"> <a href="#">Forums</a> </li>
    </ul>
  </nav

Yeah this one is work for me as well. Thanks for the help!
Reply




Theme © iAndrew 2016 - Forum software by © MyBB