I somehow found this webpage and was absolutely stunned by the navigation bar. http://www.webdesignerwall.com/

When you put your mouse over "Home", "About" or "Jobs" menu options, you get that awesome rollover effect in the brown field above. I like that very much and had a similar idea, but being an amateur, I can't really say what type of programming is that. I would say it uses Ajax or JavaScript per se, but I'd like some of you to explain it to me, or even share some similar examples.

Thank you

1 answer

1
point
This was chosen as the best answer

The HTML on Web Designer wall looks like following below:

 <li id="nav-jobs">
    <a href="http://jobs.webdesignerwall.com">
       Jobs
       <span></span>
    </a>
</li>

With CSS like

#nav-jobs span {
    background: url(images/job-board-over.gif) no-repeat;
    width: 135px;
    height: 33px;
    top: -26px;
    left: 170px;
}

There are a couple ways you could achieve the desired effect.

1) To use javascript to change the CSS to {display: none:} on the span and change it back to visible on the Javascript hover (onmouseover) event.

2) CSS only - change the #nav-jobs span TO #nav-jobs span:hover

SEE : http://www.webdesignerwall.com/tutorials/advanced-css-menu/ http://www.webdesignerwall.com/tutorials/maximize-the-use-of-hover/

Answered over 8 years ago by Justin Obney
  • thank you, it's a great explanation. highly appreciated Slavisha_Perishic over 8 years ago