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

Creating a popup window using HTML

How can I align a single button to the left side while positioning the rest of the elements to the right in Bootstrap 4?

What is the best way to extract information from an XML file using JQUERY and present it neatly in a table format

Exploding particles on the HTML5 canvas

Adjust font style within an HTML/CSS document

Analog Clock Time Adjustment Bubble Deviation Dilemma

Set the container width to a fixed size, then center a div within it with a dynamic width. Ensure that the left and right div

Exploring Angular 4's Capabilities: Navigating a Multi-Dimensional Array

Ensure that the jQuery ajax function triggers only after the images or iframes have completely loaded

What are the best ways to ensure that my side menu, bottom buttons, and content are all responsive

Position the left floated element at the top, with all preceding siblings floated to the right

Issue: AngularJS Injector Module Error

What is the best way to align a <div> element below another without being on the same line?

Icon displayed within the input field

Is it possible to minify HTML in PHP without parsing JavaScript and CSS code?

Blurring of text that occurs after resizing in CSS

Is there a way to slow down the falling effect on my navigation bar?

Create copies of Div elements for them to revert back to their original state following

The CSS scale property is not working as expected when used in a React.js application, specifically

Using jQuery to choose options and change the background color