Illuminate the active page on the menu bar

Is there a way to dynamically change the menu color based on the selected page?

For example:

home faq contact_us

I need help displaying the currently selected page in the menu bar using CSS, but I'm not sure how to approach this.

Here is my current CSS code:

.menu { 
    float: left;
    margin: 0px 0 0 0;
     width: 1000px;
     } 
    .menu li {  
     border-left: 1px solid #fff;
     float: left;
     line-height: 1em;
     text-align: center;} .menu li a {  color: #fff;
     display: block;
     font: 17px Arial, Helvetica, sans-serif;
     padding: 0px 31px;     
     line-height:47px;
     text-decoration: none;
      } 
   .menu li a span {display:block; padding:0px 15px;} 
   .menu li a:hover, .menu  .active a{color:#fff;
    background:#ed1f26 url(images/menuleft.jpg) left top no-repeat;
    width:auto;  
   } 
    .menu li a:hover span, .menu .active a span
   {background: url(images/menuright.jpg) right top no-repeat;
    padding:0px 14px; 
    border:1px solid #b3c302;
  }
htmlcss

Answer №1

When adding the menu to each page, you have the freedom to customize the background color for specific <li> elements related to that page.

For example, you can set a white background for the current page (Home) and use a default color for non-active pages.

<li style="background-color:rgb(255,255,255);">Home</li>
<li>FAQ</li>
<li>Contact Us</li>

Alternatively, you can incorporate tabs using a script, like demonstrated in this fiddle: http://jsfiddle.net/gstubbenhagen/zAbmA/

If you opt for tabs, make sure to consider the amount of content on each page to prevent slower loading times on certain connections.

NOTE: The provided example utilizing tabs relies on a JQuery plugin, so be sure to include the necessary tools if not re-coding from scratch.

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

Complete layout photography using bootstrap 4

I'm looking to create a banner that adjusts appropriately for mobile and desktop display. Here's what I've tried: When it is displayed in mobile When it is displayed in desktop In my attempt, the text alignment was off even though I used ...

htmlcsstwitter-bootstrapimagebootstrap-4

Dynamic CSS view size parameter

Currently, I am studying how to create responsive designs using CSS. I decided to test out some example code provided on the w3schools website (https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_webpage). However, I encountered an issue where ...

htmlcss

Execute the function if the text or value begins with a certain character

I'm trying to determine whether the text within a span starts with the letter "x" and then execute a function. I've come across using "^" in strings for this purpose, but am having trouble implementing it to check the text... <span>xfoo&l ...

javascriptjqueryhtmlcontainsstartswith

Two separate tables displaying unique AJAX JSON response datasets

As a beginner in javascript, I am facing a challenge. I want to fetch JSON responses from 2 separate AJAX requests and create 2 different tables. Currently, I have successfully achieved this for one JSON response and table. In my HTML, I have the followi ...

javascriptjqueryhtmljsonajax

Activating scrolling through Javascript

A friend of mine created a web page to help me learn some JavaScript. He designed a feature where the content in each div becomes visible as soon as the user scrolls past it. However, I noticed that the content appears too late for my liking. I would like ...

javascripthtmlcssanimationscroll

Is there a problem with the drop-down menu not closing on WordPress?

I have successfully implemented a transition effect for the dropdown menu in my custom WordPress theme. However, I am facing an issue where the transition effect does not appear when the cursor moves away from the dropdown menu while closing. To see this i ...

csswordpresstwitter-bootstrap-3wordpress-theming

The functionality of collapsing rows of cards in Bootstrap does not seem to work efficiently for multiple

There is a button that appears and the #more div is hidden. However, when I click "Show more," the hidden content does not appear. Could this be due to multiple rows? Should I add collapse to every card? I am using Bootstrap 4. Here is the code snippet: ...

htmlwebbootstrap-4frontend

Child div set to 100% height within parent div with auto height

After scouring the internet for hours in search of an answer, I found myself reading articles like Floats 101 on alistapart and browsing through countless similar questions on stackoverflow. I have reached a point where I feel like I must ask my question b ...

csshtmlcss-float

Issues with Bootstrap 4's Vertical Alignment Functionality

As I work on developing an Electron app to test out the software, I am facing a challenge with basic interface design. I have opted for Bootstrap 4 to style my form, but I'm struggling to vertically center it. Despite trying various solutions suggest ...

cssbootstrap-4vertical-alignment

Stylish CSS typography options for both Mac and Windows users

When browsing various websites, I've noticed that many of them showcase beautiful fonts without using images. Examples include The Firebug site and Happy Cog. It seems like web designers use CSS tricks and JavaScript to achieve this effect. I'm ...

cssfonts

Issue with Bootstrap: Nested column disappears upon reaching the breaking point

I want to create a grid with 3 columns, each containing a nested grid with 2 columns (one smaller than the other). When the breakpoint is reached, I want the columns to stack on top of each other. However, one of the nested columns disappears after the br ...

htmlcssbootstrap-4

The onclick event in JavaScript is unresponsive on mobile devices

Our website is powered by Opencart 1.5.6.4 and the code snippet below is used to add items to the shopping cart. <input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?&g ...

javascripthtmlonclickopencart

Using the alt attribute for background images in CSS

Dealing with alt tags for images is a challenge I haven't faced before. How can I add alt tags to all images on a website, even those used by the CSS background-image attribute? Since there isn't a CSS property specifically for this purpose, wha ...

htmlcss

Methods for activating touch-like scrolling through the use of mouse grabbing and dragging

Let me show you a simple illustration of the task I'm attempting to accomplish: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> ...

javascripthtmlcssscrollscrollbar

minimize javascript syntax (stackoverflow 2022)

I'm struggling with this puzzle game. Sometimes, when I start a new game, the pieces get shuffled incorrectly. I tried adding a function to fix it, but it doesn't seem to be working. It's really frustrating and I want to simplify the code as ...

javascripthtmlcsspuzzle

Adding HTML content to a statically served file using Flask

Seeking assistance from those more experienced in Flask. I am trying to serve a static file and add some HTML content to it, or display the file beneath some text. Is there a method to achieve this, or am I approaching it incorrectly? @app.route('/com ...

pythonhtmlflask

Overlap between sidebar and navbar

I am currently working on developing an admin panel for one of my projects. I designed a sidebar and implemented a standard bootstrap 4 navbar. However, I encountered a minor issue where the bootstrap 4 navbar is extending to the full width of the page ins ...

htmlcssbootstrap-4

When fetching data from a parse object, JavaScript displayed [object, Object] as the result

When trying to access information from my parse data, I am able to display user table data on my document without any issues. However, when I attempt to query another object and insert it into an id element using jQuery with functions like text();, html(); ...

javascriptjqueryhtmljsonparse-platform

Firefox experiencing issues with loading background images

The website URL: 4genderjustice.org While this layout functions properly in most browsers, notably Firefox seems to be causing issues. The question remains: why is it not functioning as expected in Firefox? The background images are configured like so: ...

htmlcssfirefoxwebkitblink

How come the Google fonts won't display correctly within my HTML document?

After importing some fonts into my CSS file, I noticed that they are not displaying correctly in the design. Below is the code for the imported fonts and CSS linking: https://i.stack.imgur.com/9RQ4u.png The output only shows sans-sarif working properly: ...

htmlcssgoogle-fonts