Member Avatar for mgn2683

I'm having issues trying to get a little triangle (spike.gif) to appear under the link of a current page. For instance, it won't appear on rollover, but just when someone is on a certain page. I've enclosed a link to an image of how I'd like to do this.

Does anyone have any insight on how to get this accomplished? Thanks ahead of time.

  • 2 Contributors
  • 3 Replies
  • 93 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by pritaeas

Dani AI

Generated

Good start from — the background-image approach fixes the basic problem. The remaining issues you mentioned for (centering the spike and having it present automatically for the current page) are best solved by two small changes: (1) create the spike with a CSS pseudo-element so it centers reliably without an image, and (2) ensure the current item gets a current class during rendering (server-side) or add it with a tiny script when server-side is not possible.

A compact CSS recipe that avoids an image and keeps the spike centered regardless of item width:

#menu li {
  position: relative;
  display: inline-block;
}

#menu li.current::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -8px; /* tweak to sit right below the nav bar */
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #333; /* spike color */
  pointer-events: none;
}

If you cannot mark the active item server-side, this tiny JS will add the class by matching link paths:

var path = window.location.pathname.replace(/\/$/, "");
var links = document.querySelectorAll("#menu a");
Array.prototype.forEach.call(links, function(a){
  var hrefPath = a.pathname.replace(/\/$/, "");
  if (hrefPath === path) a.parentNode.classList.add("current");
});

Troubleshooting notes: make sure the li is position: relative and not collapsed by floats; adjust bottom and border sizes for pixel-perfect placement; use :focus or :focus-within if you want the spike to appear for keyboard users; on touch devices rely on the current class rather than :hover. If you prefer keeping an image (as originally tried), the same centering trick — absolutely position an element at left:50% and translateX(-50%) — will center it under variable-width items.

Recommended Answers

All 3 Replies

Member Avatar for pritaeas

You could do the following, provided the image contains only the triangle, and not the text:

li.topnav-current-page:hover {
  background: url(images/about_example.gif) bottom left no-repeat;
}
Member Avatar for mgn2683

I used this code and it definitely helped! But now I have two issues: first it doesn't appear in the middle of the navigation item, it always appears in the left. I would also like to have the spike be there automatically on the page. For instance, if it is the 'About' page, then it would automatically be there, whether hover or not. I appreciate the help so far!

Member Avatar for pritaeas 
#menu ul li.topnav-current-page {
  background: url(images/about_example.gif) bottom center no-repeat;
}
#menu ul li.topnav:hover {
  background: url(images/about_example.gif) bottom center no-repeat;
}
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.