Navigation active with css

Question

I have two pages and included the navigation in both of them so it makes it easier to edit it once than doing it in both. But now I am very unsure how to implement the class active, which shows which you are in (highlights) with css. This is the code:

<li><a href="../rapport/index.php" class='rapport' >Rapport</a></li> 
<li><a href="../diagram/index.php" class='diagram' >Diagram</a></li>

EDIT: This is the css for the image and css and the icon. In blade I did this to make it active:

<li  class='pil  {{ ($aktiv == 'sok') ? 'active' : '' }}'> <a class='sok' {{HTML::linkRoute('sok','Søk')}}</a> </li>

CSS:

.navbar-default .navbar-nav>.active>a.rapport:before,
.navbar-nav>li>a.rapport:before { background-image: url('../images/top3.png'); }

.navbar-default .navbar-nav>.active>a.diagram:before,
.navbar-nav>li>a.diagram:before { background-image: url('../images/top2.png'); }

possible duplicate of [Bootstrap CSS Active Navigation](http://stackoverflow.com/questions/9301507/bootstrap-css-active-navigation) — Paulie_D, Apr 22 '14 at 09:27

score 1 · Answer 1 · answered Apr 22 '14 at 09:36

Add a variable $page to your page. For example

In Rapport page

<?php
$page = 'Rapport';
include('header.php');
?>

In diagram page

<?php
$page = 'diagram';
include('header.php');
?>

header.php

<li><a href="../rapport/index.php" class="<?php if($page=='Rapport'){echo 'active';}?>" >Rapport</a></li>
<li><a href="../diagram/index.php" class="<?php if($page=='diagram'){echo 'active';}?>">Diagram</a></li>

Milan and Friends · Answer 2 · 2014-04-22T13:31:35.050

If you have many pages and don't want to use jQuery or PHP then add active class to current page

<li><a href="../rapport/index.php" class="rapport active">Rapport</a></li>
<li><a href="../diagram/index.php" class="diagram">Diagram</a></li>

.active {
  background: red;
  color: #fff;
}

remember to change active link class according to active page.

Ok after question updates I'll provide PHP solution which is

<li><a href="index.php" <?php if (strpos($_SERVER['PHP_SELF'], 'index.php')) echo 'class="active"'; ?>>Link Text</a></li>

or jQuery solution

<li><a href="index.php">Link Text</a></li>

<script>
  $('li a[href="'+window.location.pathname.split('/').pop()+'"]').addClass('active');
</script>

@user3270211 I've added quick PHP solution. – Milan and Friends Apr 22 '14 at 13:23 — Milan and Friends, Apr 22 '14 at 13:23

score 0 · Answer 3 · answered Apr 22 '14 at 09:53

Please find the CSS code:

#navigation{ 
width:100%;
height:35px;
}

#menu {
width:580px;
height:35px;
}

#menu li{
list-style-type:none;
float:left;
}

#menu a {
height:35px;
color:#FFFFFF;
}

#menu a:hover{
color: #FFFFFF;
text-decoration:none;
}

.active {
color:#000000;
text-decoration:none;
font-family: Calibri;
font-size: 14px;
}

HTML code:

When rapport/index.php page open make sure your li should be active something like following

<div id="navigation">
<li class="active"><a href="../rapport/index.php" class="rapport active">Rapport</a></li>
<li><a href="../diagram/index.php" class="diagram">Diagram</a></li>
</div>

And when diagram/index.php open then use following

<div id="navigation">
<li><a href="../rapport/index.php" class="rapport active">Rapport</a></li>
<li class="active"><a href="../diagram/index.php" class="diagram">Diagram</a></li>
</div>

Navigation active with css

3 Answers3