index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> <script type="text/javascript"> window.addEvent('domready', function(){ var list = $$('#idList li'); list.each(function(element) { var fx = new Fx.Styles(element, {duration:200, wait:false}); element.addEvent('mouseenter', function(){ fx.start({ 'margin-left': 5, 'background-color': '#666', color: '#ff8' }); }); element.addEvent('mouseleave', function(){ fx.start({ 'margin-left': 0, 'background-color': '#333', 'color': '#888' }); }); }); }); </script> </head> <body> <ul id="idList"> </ul> <div id="main"> Test </div> </body> </html>
style.css
Kod
#idList {
margin: 0;
padding: 0;
float: left;
}
#idList li {
display: block;
margin: 0;
padding: 4px;
width: 120px;
background: #333;
color: #888;
}
body {
font-family: Tahoma;
color: #fff;
background: #222;
}
#main {
padding-left: 6px;
float: right;
text-align: left;
}
margin: 0;
padding: 0;
float: left;
}
#idList li {
display: block;
margin: 0;
padding: 4px;
width: 120px;
background: #333;
color: #888;
}
body {
font-family: Tahoma;
color: #fff;
background: #222;
}
#main {
padding-left: 6px;
float: right;
text-align: left;
}
Co z tym zrobić?