Currently, I'm working on a website that features a subtle dark grey menu at the top of every page. The menu is built using HTML and CSS with a list structure. To highlight the corresponding menu item based on the current page, I am utilizing the ID attribute in the body tag.
My goal is to create an effect where each menu item transitions from its default dark grey color to its hover color for a brief moment when the page loads. This will effectively draw attention to the presence of the menu without being too intrusive or visually overwhelming.
Here's a snippet of the relevant HTML code:
<head>
<!-- InstanceParam name="id" type="text" value="inno" -->
</head>
<body id="@@(id)@@">
<div class="big-nav-inline"><ul>
<li><a href="../markets.htm" class="marknav">Markets</a></li>
<li><a href="../science-and-technology.htm" class="technav">Technology</a></li>
<li><a href="../innovation.htm" class="innonav">Innovation</a></li>
<li><a href="../ventures.htm" class="ventnav">Ventures</a></li>
</ul></div>
</body>
Explanation of the CSS (full code omitted due to excessive length):
For positioning on the page, I am utilizing the "div" class.
Each list item has a unique class assigned to it, which determines its hover color.
I utilize the <body id=""> to highlight the corresponding list item and modify border color on the current page.
I would greatly appreciate any assistance in achieving this effect! If anyone has implemented this in a straightforward manner, please share your insights.
Best regards, Paul