Thank you Jason, for letting me post this very useful article.
-matt
The Flash and PHP Bible has been released! The book can be found on Amazon or wherever fine books are sold in your area.
The Flash and PHP Bible has a forum for quick support.
Shows a simple CSS-only rollover menu. No javascript required.
Css Code (place in head or on separate css sheet)
table.menu a { ///Sets properties for the menu block
width: 75px; ///width of blocks
border:1px dotted #999999; //// border properties
display: block;
}
div.menu a { ////Properties for the Menu (static)
color: #999999; //// font color
background: #ffffff; //// BG color
text-decoration:none; //// bold, italic, ext.
font-weight:bold; ////none underline overline line-through blink
font-size:14px; ////font size
line-height:16px;
text-align: center;
font-family: arial;
}
div.menu a:link { ////Link Properties (static)
color: #999999;
background: #ffffff; }
div.menu a:active { ///// Active link properties
color: #999999;
background: #ffffff; }
div.menu a:visited {
color: #999999;
background: #ffffff; }
div.menu a:hover { ///// Hover (rollover ) properties
color: #ff9933;
background: #ffffff;
border:1px dotted #ff9933; }
div.menu ( /// Position
position:absolute;
top:0;
left:0;
)
Place this code where you want the menu to be
<div class="menu" align="center">
<table summary="" cellpadding="1" cellspacing="1" class="menu">
<tr>
<td><a href="home.html" onfocus="this.blur()">Home</a></td>
<td><a href="events.html" onfocus="this.blur()">Events</a></td>
<td><a href="forms.html" onfocus="this.blur()">Forms</a></td>
<td><a href="speakers.html" onfocus="this.blur()">Speakers</a></td>
<td><a href="band.html" onfocus="this.blur()">Band</a></td>
<td><a href="location.html" onfocus="this.blur()">Location</a></td>
<td><a href="contact.html" onfocus="this.blur()">Contact</a></td>
</tr>
</table>
</div>
Side note - to make vertical take the </td> out
Article written by Jason 'Spllogics' Poston
|
mkeefe Thu Jun 30, 2005 8:55 pm
Thank you Jason, for letting me post this very useful article.
-matt |
|
Chinch Sat Aug 6, 2005 11:29 am
Can you show an example..?
|
|
Dan Hughes Wed Aug 24, 2005 7:07 pm
hey, love the idea of the possibilities of this, just got into CSS, could you tell me how to stop the text moving when you mouse over? thanks
|
|
mkeefe Mon Sep 5, 2005 1:34 am
@Dan Hughes
I have not been able to track down what could do that, but let me get in touch with the author of the article. @Chinch Yes, examples are in the works for all articles to give a "result" before you attempt it just in case it isn't what you were looking for. |
|
spllogics Thu Nov 17, 2005 9:24 am
Dan What browser? Have a link to the site?
Make sure you dont have a space between "14" and "px" should be 14px like above. Thats all i can think of that might cause it. |
|
Pixelcode Sat Feb 11, 2006 9:10 am
I think the text is moving because there is no border in the "div.menu a" style only in the hover style and so when the user moves their mouse over the link a border is being created causing the text to move. To fix this have a transparent border in the "div.menu a" style.
|
| Riny Tue Jun 13, 2006 5:56 am |
|
spllogics Sun Nov 5, 2006 6:08 pm
Why would you use list when its meant to be a horizontal menu (though you can make it vertical with out the |
|
Roy Wed May 21, 2008 4:51 am
agree much better effects with list
|
|
fenerbahçe Sun Jun 15, 2008 12:06 pm
css table properties and examples...
-- http://css-lessons.ucoz.com/table-examples-1.htm -- and -- http://css-lessons.ucoz.com/table-examples-2.htm |
|
Non Reciprocal Sat Jun 21, 2008 6:21 am
HI i need your help i really want to create my own website/web page but i dont know how to go about doing it so can you please help me out
|
©2004 - 2010 scriptplayground | Privacy Policy | Legal
Validate Site: XHTML CSS | Designed by: Matthew Keefe of mkeefeDESIGN