Member Avatar for kavithakesav

Hi,

I designed one website for links i gvn rollover color, that color i want to be in current page means if u click on like ex: about.html page that rollover color has to shown in that page also.

I tried with this code, but not working.

#menu{
width:90%;
height:30px;
float:left;
margin: 0 auto;
padding: 0px 0;
background-image:url(images/menu-bg.jpg);
}
#menu ul{
height:16px;
margin:0px;
padding:0px;
list-style:none;
}
#menu li{
float:left;
height:16px;
}
#menu a{
float:left;
height:16px;
width:132px;
padding:13px 0px 0px 0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#CCCCCC;
font-weight:normal;
text-decoration:none;
background: black url(images/butn1.jpg) center center repeat-x;
}
#menu a:hover{
color:#FFFFFF;
}
#menu .current_page{
color:#FFFFFF;
}
  • 3 Contributors
  • 2 Replies
  • 121 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by FC Jamison

Dani AI

Generated

The issue is not the idea of a "current" class (that part is correct) but where and how it is applied. was right that a class can solve this; the missing detail is that a link (<a>) frequently has its own color rule, so putting the class on a parent without targeting the anchor won't override that rule. 's tutorial points in the right direction, but here are concrete, modern ways to make the hover style persist on the current page.

Apply the class to the link (or to the list item and target the link). Reuse the same visual rules you use for hover so the active state looks identical:

.site-nav a.current,
.site-nav a[aria-current="page"] {
  color: #fff;
  /* copy any other hover visual properties here (background, borders, etc.) */
}

If you cannot set the class server-side, add it on page load with a small script that compares link targets to the current URL and adds an active/current class and aria-current="page" for accessibility:

document.querySelectorAll('.site-nav a').forEach(function(link){
  if (link.href === location.href || link.pathname === location.pathname) {
    link.classList.add('current');
    link.setAttribute('aria-current','page');
  }
});

If you generate menus server-side, emit the class directly on the relevant link. Example (PHP-style):

<a href="about.php" class="<?php echo (basename($_SERVER['PHP_SELF'])==='about.php')? 'current':''; ?>">About</a>

Troubleshooting tips: use browser devtools to inspect the computed style for the link to see which rule wins (specificity and source order matter). If a background image or other property is used for hover, make sure the same properties are applied to the active selector. For more on specificity and the aria-current attribute, see MDN on CSS specificity and .

Recommended Answers

All 2 Replies

Member Avatar for FC Jamison

Try

#menu.current_page {
  color:#FFFFFF;
}

or just

.current_page {
  color:#FFFFFF;
}
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.