100 Web Space
https://forum.100webspace.com/

Make a verticaal menu in CSS
https://forum.100webspace.com/viewtopic.php?f=4&t=50106
Page 1 of 1

Author:  Gollimari [ Thu Aug 20, 2009 5:53 am ]
Post subject:  Make a verticaal menu in CSS

I have a vertical menu on my website, made in HTML and javascript. Here under I show you the whole table. How can I change (and shorten!!!) this script in CSS? I'm a beginner with CSS... Thanks for any help.

In the head I have already:

.menu-on { color: #ffffff; background-color: #662402; border-bottom:1px solid #ffffff;padding-left:10px }
.menu-off { color: #ffffff; background-color: #D55F21; border-bottom:1px solid #ffffff;padding-left:10px }
.menu-item:link { font-weight: bold; font-family: "Arial, Verdana, Helvetica, sans-serif"; font-size: 75%; color: #ffffff; text-decoration: none }
.menu-item:visited { font-weight: bold; font-family: "Arial, Verdana, Helvetica, sans-serif"; font-size: 75%; color: #ffffff; text-decoration: none }
.menu-item:hover { font-weight: bold; font-family: "Arial, Verdana, Helvetica, sans-serif"; font-size: 75%; color: #ffffff; text-decoration: none }

in the body

For the mouse-over of the items I still use javascript, as you can see. How can I make it all in CSS?

<table width="100%" border="0" cellpadding="0" cellspacing="0">

<tr><td height="20" width="100%" bgcolor="#919888" class="menu-off" onMouseOver="javascript:this.className='menu-on';" onMouseOut="javascript:this.className='menu-off';"><a href="index.html" class="menu-item">Startpagina</a></td></tr>
<tr><td height="50" align="left" valign="middle" bgcolor="#919888" style="border-bottom:1px solid #ffffff;"><img src="closeup4.jpg" alt="Moorslede 1269-1578" width="100%" height="50" border="0"></td></tr>
<tr><td height="20" width="100%" bgcolor="#919888" class="menu-off" onMouseOver="javascript:this.className='menu-on';" onMouseOut="javascript:this.className='menu-off';"><a href="situering.html" class="menu-item">Gasthuis - geografische ligging</a></td></tr>
<tr><td height="20" width="100%" bgcolor="#919888" class="menu-off" onMouseOver="javascript:this.className='menu-on';" onMouseOut="javascript:this.className='menu-off';"><a href="oudekaarten.html" class="menu-item">Ten Bunderen op oude kaarten</a></td></tr>

</table>

Page 1 of 1 All times are UTC
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/