Hi guys, I'm creating a web site and like Corel's menu rollover effects in their menu below. When you roll your mouse over the menu text, the text changes colour as well as the frame colour behind the text (circled in green). I'd like to create this effect and am unsure how to accomplish it in DRAW X5. Maybe I need to use CSS for this effect. I'd thought I'd ask others here with web experience for their feedback. Thanks All.
You should definitely be using CSS for this. Assuming the menu is made using this html:
<div class="menu"><ul> <li><a href="#" class="this">Overview</a></li> <li><a href="#">Features</a></li> <li><a href="#">System Requirements</a></li> <li><a href="#">Learning</a></li></ul><div class="clear"></div></div>
Then this would be the CSS:
.menu { background-color: black; padding: 27px 0 0 0; margin: 0;}.menu ul { padding: 0 10px; margin: 0; border-top: 1px solid white; }.menu ul li { float: left; list-style: none; padding: 0; margin: 6px 0 5px 0;}.menu ul li a { padding: 6px 8px 5px 8px; text-decoration: none; background-color: #30343d; color: #ccc; text-transform: uppercase; font-weight: bold; line-height: 1;}.menu ul li a.this { background-color: #ccc; color: #30343D;}.menu ul li a:hover { background-color: #666; color: white;}.clear { font-size: 0; line-height: 0; height: 0; clear: both;}
Adjust to suit.
Working example here: http://reeddesign.co.uk/temp/menu.html