Enhancing navigation functionality using CSS

Question

Enhancing navigation functionality using CSS

I have two separate pages with navigation included in both. This way, it's easier to edit the navigation menu once instead of doing so on each page individually. However, I am now facing uncertainty on how to implement the 'active' class using CSS to highlight which page is currently being viewed. Here is the current code snippet:

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

EDIT: Below is the CSS for styling images and icons, along with a method used in Blade to set an item as 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'); }

html css twitter-bootstrap

Answer 1

Answer №1

Integrate a variable $page into your webpage. Here is an example:

For a page named "Rapport":

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

For a page named "Diagram":

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

In the header.php file:

<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>

Answer 2

Integrate a variable $page into your webpage. Here is an example:

For a page named "Rapport":

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

For a page named "Diagram":

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

In the header.php file:

<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>

Answer 3

Answer №2

Here is the requested CSS code snippet:

#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;
}

Now, in your HTML code, you can set the active state for different pages like this:

When the rapport/index.php page is open:
<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 is open:
<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>

Answer 4

Here is the requested CSS code snippet:

#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;
}

Now, in your HTML code, you can set the active state for different pages like this:

When the rapport/index.php page is open:
<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 is open:
<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>

Answer 5

Answer №3

If you have multiple pages and prefer not to rely on jQuery or PHP, simply add the active class to the 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;
}

Make sure to adjust the active link class based on the active page.

Once the question is updated, I will present a PHP solution, such as:

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

Alternatively, you can use a jQuery solution:

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

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

Answer 6

If you have multiple pages and prefer not to rely on jQuery or PHP, simply add the active class to the 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;
}

Make sure to adjust the active link class based on the active page.

Once the question is updated, I will present a PHP solution, such as:

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

Alternatively, you can use a jQuery solution:

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

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

Enhancing navigation functionality using CSS

Answer №1

Answer №2

Answer №3

Similar questions

Tips for wrapping a div element around another div at the top left corner

Create a button toggle feature to dynamically display data for a specific record within an ng-repeat loop

Modify the div's background color specifically with AngularJS

After deploying DRF, the CSS in Django admin is not displaying

Concealing the URL Once Links are Accessed

Despite following all the correct steps, the tailwind CLI remains unresponsive. Additionally, the default button fails to display any content

Issues with inconsistent behavior of the select option in a form

Injecting navigation bar onto an HTML page using jQuery

Out of nowhere, JavaScript/jQuery ceased to function

Is there a way to modify a document without altering its original location?

Why is my Selenium program consistently throwing a NoSuchElementException regardless of the type of element query I try?

Preventing Click Events from Firing During Drag in JavaScript

CSS Malfunction in Chrome: Some Code Not Displaying Properly

Banner Placement

Seeking help with executing JQuery Ajax functions within a foreach loop

Implementing a tooltip popup inside the header cell of the ordering table

Tips on setting the ajax parameter contentType to "html"

JavaScript PIP video feature

Example TypeScript code: Use the following function in Angular 5 to calculate the total by summing up the subtotals. This function multiplies the price by the quantity

The expansion feature of PrimeNG Turbotable