• Home
  • New Entries
  • Popular Entries
  • Submit a Story
  • About

How To Create Menu Rollover ...

How to create the same rollover effect using tables instead of lists. First we create the links, Each link is contained in a table cell,Like this code:

<div class="menu">
<table summary="" cellpadding="1" cellspacing="1" class="menu">
<tr>
<td><a href="#" onfocus="this.blur()"> Link 1</a></td>
</tr>
<tr>
<td><a href="#" onfocus="this.blur()"> Link 2</a></td>
</tr>
<tr>
<td><a href="#" onfocus="this.blur()"> Link 3</a></td>
</tr>
<tr>
<td><a href="#" onfocus="this.blur()"> Link 4</a></td>
</tr>
<tr>
<td><a href="#" onfocus="this.blur()"> Link 5</a></td>
</tr>
</table>
</div>

Now we specify styles for these to add the table (.menu):
table.menu a {
width:125px;
border:1px solid #333333;
display: block;
}

The outer div "div.menu a" is where we specify our base styles and it also acts as a workaround for crappy NS4x which does not like borders on links. Told you we need it!

div.menu a {
color: #333333;
background: #ffffff;
text-decoration:none;
font-size:11px;
line-height:16px;
font-family: Tahoma, verdana, sans-serif;
padding: 2px 5px;
}

Then we will add the link colours:

div.menu a:link {
color: #333333;
background: #cccc99;
}

div.menu a:active {
color: #000000;
background: #cccc99;
}

div.menu a:visited {
color: #333333;
background: #cccc99;
}

div.menu a:hover {
color: #eeeeee;
background: #333333;
border:1px solid #000000;
}

 Original Source:
http://www.ssi-developer.net/css/menu-rollover-effect_table.shtml

AddThis Social Bookmark Button

Posted at 11:28:14 am | Permalink | Posted in CSS  

Related Stuff

  • MooV: Using cutting edge Video phones and Software Video Phones - coupling all that with VoIP and empowering the disabled.

  • Moo Telecom: VoIP communications made easy - Ring anyway with the fun and ease of using a normal phone

  • TagR:Mobile Social Network with Real Time Locations Based services, and Ambience Intelligence, VoiP, IM, Skype, Googletalk, Mapping, Flickr, Events, Calendaring, Scheduling, SecondLife Support

  • ClearSMS : ClearSMS is a Web-based application that lets you send bulk SMS messages to your customers, contacts, or just about anyone.

  • Jajah:jah is a VoIP (Voice over IP) provider, founded by Austrians Roman Scharf and Daniel Mattes in 2005[1]. The Jajah headquarters are located in Mountain View, CA, USA, and Luxembourg. Jajah maintains a development centre in Israel.

  • Skype: It’s free to download and free to call other people on Skype. Skype the number one voice over ip software

  • PrivatePhone: a free local phone number with voicemail and messages you can check online or from any phone.

Top Stuff

e-messenger

MSN Web Messenger

eBuddy

ASP.NET Ajax CalendarExtender and Validation

AIM Express

Ajax Tools for ASP.NET Developers



About Ajaxlines

Ajaxlines is a project focused on providing its audience with a database of most of Ajax related articles, resources, tutorials and services from around the world.

Its purpose is to showcase the power of Ajax and to act as a portal to the Ajax development community.


Search


Topics

  • .Net (176)
  • Ajax (112)
  • Ajax Games (10)
  • Articles (95)
  • Bookmarking (35)
  • Calendar (21)
  • Chat (45)
  • ColdFusion (3)
  • CSS (84)
  • Email (23)
  • Facebook (84)
  • Flash (20)
  • Google (54)
  • Html (29)
  • Image (12)
  • International Calls & VOIP (7)
  • Java (58)
  • Javascript (280)
  • jQuery (200)
  • JSON (75)
  • Perl (2)
  • PHP (172)
  • Presentation (19)
  • Python (3)
  • Resources (2)
  • RSS (8)
  • Ruby (32)
  • Storage (4)
  • Toolkits (103)
  • Tutorials (227)
  • UI (11)
  • Utilities (174)
  • Web2.0 (18)
  • XmlHttpRequest (29)
  • YUI (13)

© 2006 www.ajaxlines.com. All Rights Reserved. Powered by IRange