Updating the styling of the highlighted menu options throughout different sections

Currently using ASP.NET MVC "Razor" for my website project, picking up skills along the way.

My site consists of 5 or 6 pages internally, with one page linking to an external site. My goal is to create a seamless user experience where all pages feel cohesive.

To achieve this, I have implemented a standard HTML menu using an XHTML unordered list and CSS for layout:

<ul id="menu">
    <li class="selected"><a href="@Href("~/")">Home</a></li>
    <li><a href="http://ceklog.kindel.com">cek.log</a></li>
    <li><a href="@Href("~/Services")">Services</a></li>
    <li><a href="@Href("~/Charlie")">Charlie's Stuff</a></li>
    <li><a href="@Href("~/Contact.cshtml")">Contact</a></li>
</ul>

Through browsing on Stack Overflow, I've come across similar queries about tracking the selected menu item on dynamic pages:

Javascript Changing the selected Menu items class

However, these methods do not apply to my scenario as the user isn't changing selections within one page, but rather navigating to separate pages entirely.

I'm now seeking advice on how best to handle this situation. How can I ensure continuity in the user's navigation experience?

javascriptcssasp.net-mvc-3xhtmlrazor

Answer №1

After some investigation, I finally cracked the code.

The solution involved leveraging Razor on the server side.

To start, I created a function in my _SiteLayout.cshtml page (the master template for all pages):

@functions {
    public string SetActiveClass(string PageName) {
       if (Page.Title == PageName)
          return "active";
        else
          return "";
    }
}

I then applied this function within my navigation list:

<ul id="menu">
    <li class="@SetActiveClass("Home")"><a href="@Href("~/")">Home</a></li>
    <li class="@SetActiveClass("cek.log")"><a href="http://ceklog.kindel.com">cek.log</a></li>
    <li class="@SetActiveClass("Services")"><a href="@Href("~/Services")">Services</a></li>
    <li class="@SetActiveClass("Charlie's Stuff")"><a href="@Href("~/Charlie")">Charlie's Stuff</a></li>
    <li class="@SetActiveClass("Contact")"><a href="@Href("~/Contact.cshtml")">Contact</a></li>
</ul>

This method worked flawlessly. For external pages utilizing Wordpress instead of Razor, I manually handled the code implementation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using JavaScript to assess the outcome of a form utilizing an if statement

Trying out a method to assess a result by utilizing an if statement on the form provided below. Upon dividing the 2nd result by the 1st result, an average percentage is calculated. If this percentage is equal to or higher than 55, then the outcome is label ...

javascriptjqueryforms

The website image does not display at its full size when viewed on a phone

I'm new to working with html and css, and I've encountered an issue with my website regarding image display on both phones and PCs. When viewing the site on a phone, I notice that the full size of the picture is not visible, most likely due to th ...

htmlcss

The class is not affected by my Media Query.”

Here is a snippet of my media query code: @media screen and (max-width: 1200px) { .changePicture { width: 15%; float: left; margin-top: 5%; margin-left: 5%; margin-right: 0; } } .changePicture { width: 15%; margin-top: 5%; ...

htmlcssmedia-queries

Immersive animations with Chart.js

Is there a way for my pie chart to load with its animation as I scroll down the page? Here is the code I am using: <script> var ctx = document.getElementById("myPieChart").getContext("2d"); var myPieChart = new Chart(ctx, { type: 'pie&apos ...

javascriptjquerychart.js

Using colored circles in ASP Dropdownlist ListItems (without jQuery): A step-by-step guide

Objective: To create a Dropdown list that displays a green circle if someone's Availability is True, and a red circle if someone's Availability is False. Note: The task needs to be accomplished without the use of jQuery, as it is restricted in t ...

c#htmlcssasp.netdrop-down-menu

Utilize JavaScript to target the specific CSS class

Hello, I am currently using inline JS in my Wordpress navigation menu, redirecting users to a login page when clicked. However, I have been advised to use a regular menu item with a specific class and then target that class with JS instead. Despite searchi ...

javascriptcsswordpress

Usage of Google Charts within an Ajax partial in Rails 3.1

My experience working with Google charts has been smooth so far, but I've hit a roadblock where I need to display a chart inside an Ajax-rendered partial. Nothing is showing up, and I suspect it's because the JavaScript trigger to build the char ...

javascriptjqueryajaxruby-on-rails-3.1google-visualization

Attempting to alter the background hue using a variable

Can't Change Color with a Variable, Console Works but Clicking on Square Doesn't Trying to use a variable named 'Color'. Even tried using an actual string value that didn't work. <!DOCTYPE html> <html> <head& ...

javascripthtmlcssbackground-color

How to handle CSS line wraps: enlarge the second line or determine the number of words per line specifically?

Is it possible to use CSS to control line wraps? I would like to have lines with a similar amount of words per line, or at least avoid one-word lines. Original: A few words for a very long title that will probably span two lines Desired Outcome: A few ...

htmlcss

Incorporating commas as a number is typed by the user, such as 1,000, 10,000, 100,000, 1,000,000, 10,000,000,

As a beginner, I researched and managed to develop this code successfully. One issue I'm facing is that when users input numbers, there are no commas separating the thousands or millions. Does anyone have suggestions on how to automatically add commas ...

javascripthtmluser-input

Node-express can seamlessly switch between multiple databases dynamically

After extensive searching for a solution to my problem, I have come up empty-handed. If anyone has experience in similar situations, your help would be greatly appreciated. I have developed an application server in Node Express with MySQL as the database. ...

javascriptnode.jsangularexpress

React redux-thunk promise is currently in a state of waiting

Recently delving into the world of React Redux and experimenting with thunk middleware, I've encountered a puzzling issue. I'm struggling to explain it myself and hope someone can shed some light on the matter. The problem arises when I call a f ...

javascriptreactjsreact-reduxredux-thunk

The code functions perfectly in the Adobe Dreamweaver Preview, but unfortunately, it is not compatible with Chrome

In the process of creating a website using Adobe Dreamweaver over the past few days, I encountered an issue with JavaScript that should activate upon scrolling. Interestingly, the script works perfectly fine when accessed through this link (), but fails t ...

javascripthtmladobedreamweaver

Seeking guidance on creating an uncomplicated CSS tooltip

Can anyone help me troubleshoot why my CSS tooltip isn't working correctly? I've been trying to create a simple method for tooltips, but they are displaying inconsistently across different browsers. In Firefox, the tooltips appear in random locat ...

csstooltip

Is it possible to modify the spacing of menu items in the React Material-ui Drawer component?

Recently, I decided to incorporate Material-UI into a React project for the first time. The AppBar was set up to trigger Drawer, which displayed a list of menu items in the sidebar. However, an issue arose with excessive margin-top spacing. Here is an ill ...

cssreactjsstylescomponentsmaterial-ui

AngularJS: A Step-By-Step Guide to Adding Two Values

Currently, I am utilizing the MEAN stack for my application with AngularJS as the front-end. I have two tables in which I obtained total sum values like 124.10 in the "conversion rate" column. Now, I am looking to calculate the total sum of the "conversion ...

htmlcssangularjsmeanjs

Wait for the reaction from react router history to go back

After clicking the submit button in a form, I need to navigate backwards using history.goBack. However, if there is no previous page in the history, I want to redirect to a screen displaying a thank you message using history.replace. const handleSubmit = ( ...

javascriptreactjsreact-routerreact-router-v4

Varying Heights of Columns in Bootstrap

I need assistance in creating a layout with two columns. The first column should have three smaller boxes of equal height, while the second column should have one larger box. However, when I try to increase the height of the box in the second column, the l ...

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Encountering difficulty retrieving data upon initial click within an Android webview during server communication

I have encountered an issue when calling this method from JavaScript. The data is returning as null for the first time, but starting from the second time it works fine. Seeking assistance on this matter. @SuppressLint("JavascriptInterface") public Str ...

javascriptandroidhtmlhttpclient

Saving the subtracted value from a span into a cookie until the checkbox is unchecked - here's how to

I am working on a piece of code that includes numeric values within a span. When the checkbox is clicked, it subtracts 1 from the main value, essentially reducing the total value. How can I achieve this so that even after the form is submitted, the deducte ...

javascriptphpjqueryhtml