Member Avatar for wurn

Hey all hope someone can help me. Ive done it before or somoene i know has done this but i cant remember how they did it.

I want the menu image to stay in the down position when you have selected a page. Same as here on DaniWeb. The Web Development link stays purple when i am on this page.

How is this done? I have .jpg for my links on the site i am working on. Please help, i have googled but cant seem to find any reference to it :rolleyes:

  • 2 Contributors
  • 2 Replies
  • 111 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by wurn

Dani AI

Generated

Short answer: the browser will not “keep” a pressed image for you across page loads. The page being served has to mark which menu item is active. was right to point at server-side or script-driven approaches — below are three practical, beginner-friendly ways to get the down/active image to stick.

For easy maintenance (server-side): have every page set a small variable and include one navigation file that renders the correct class or image. Example in PHP (very common):

<?php
$current = basename($_SERVER['SCRIPT_NAME']); // e.g. "index.php"
?>
<nav>
  <a href="/index.php" class="<?php echo $current == 'index.php' ? 'current' : '' ?>">Home</a>
  <!-- ... -->
</nav>

Use that current class to show the down image (or a different src) so you don't copy the whole menu into every page.

For static hosting (no server code): add a tiny client-side script that finds the link matching the current URL and adds a class. This runs after load and is simple to paste into each page:

<script>
document.addEventListener('DOMContentLoaded', function() {
  var path = location.pathname.replace(/\/$/, '');
  document.querySelectorAll('nav a').forEach(function(a) {
    var linkPath = new URL(a.href, location).pathname.replace(/\/$/, '');
    if (linkPath === path) {
      a.classList.add('current');
      a.setAttribute('aria-current', 'page'); // accessibility
    }
  });
});
</script>

Styling tip: keep one image file (a sprite) with up/down states and switch background-position with .current to reduce HTTP requests. Example CSS:

nav a { display:inline-block; width:120px; height:40px; background:url(/images/menu-sprite.jpg) 0 0 no-repeat; text-indent:-9999px; }
nav a.current { background-position: 0 -40px; }

Troubleshooting: make sure link href values normalize (trailing slashes vs index files), test with and without JS enabled, and add alt/visible text for accessibility. For a learning path: start with the PHP include or the small JS snippet above, then move to sprites once the active class is working.

Recommended Answers

All 2 Replies

Member Avatar for MattEvans

you can't do it automatically. (well, you can't do it automatically without instructing your server [or some javascript] how to do it automatically)

if your pages are all static, and there is strictly one category for each page, then you'll have to make each page with a slightly different link bar, reflecting the current category.

obviously, thats not a very manageable solution. a better way would be to order your pages with each folder being a category, store a category link bar in each folder. then you just have to include the current folder's link bar on every page using a relative include.

you could do that in PHP or good old Server-Parsed HTML.

this forum does it by always outputting final pages that are server-generated. adding that link bar is easy with a complex system in place already.

Member Avatar for wurn

Hey thx for the help man, i could follow you up until about here...after that i am lost

"obviously, thats not a very manageable solution. a better way would be to order your pages with each folder being a category, store a category link bar in each folder. then you just have to include the current folder's link bar on every page using a relative include.
"

Your explanation sounded cool though! But i am a noob at coding.

here is the website link

as you can see i only need the home image or case studies image etc. to stay in the down position when you are browsing that page.

Is there any way you can explain it easier pls, or give me a link to somewhere it is explained.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.