Ciao a tutti, spendo poche parole: in pratica ho pensato che si potrebbe fare un effetto di shading sul testo sottoponendo ad un testo un div posizionato in maniera assoluta, con z-index minore, di 1 pixel più a sinistra e più sotto rispetto ad un testo normale.
Ho sviluppato questo codice, che necessita della libreria jQuery (testato con la 1.2.6)
Un pò funziona, non tanto bene, infatti secondo me ha bisogno di parecchie migliorie: vi lascio carta bianca, sapreste migliorare / ottimizzare / modificare questo codicillo?codice:<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#menu li a').hover(function() { var element = $(this).find("span:first"); var off = element.offset(); var text = element.text(); element.css('z-index', '99'); $('body').append('<div id="overo">' + text + '</div>'); $('#overo').css('left', off.left + 1); $('#overo').css('top', off.top + 1); $('#overo').css('display', 'block'); }, function() { $('#overo').remove(); }); }); </script> <style> body { margin: 0; width: 100%; height: 100%; } #menu { width: 100%; margin: 0; padding: 0; list-style-type: none; height: 35px; background: #21442; } #menu li { list-style-type: none; margin:0; padding: 0; float:left; height: 35px; } #menu li a { display: block; padding: 10px 20px; color: #FFF; font: 12px normal Tahoma, Verdana, Arial; text-decoration: none; background: #0F67A1; } #menu li a:hover { color: #FFDDDD; background: #1385D1; } #overo { display: none; position: absolute; top: -1000px; left: -1000px; z-index: 100; color: #222; font: 12px normal Tahoma, Verdana, Arial;} </style> </head> <body> <ul id="menu"> [*]<span>Categorie</span> [*]<span>Proprietà</span> [*]<span>Categorizzazioni</span>[/list] </body> </html>
Rispondi quotando
