premetto che non sono un esperto ... ho scaricato dalla sezione script un menu (script 6115, menù con effetto overlay) e l'ho adattato alle mie esigenze ... questo script a me interessa fino alla parte dei menu principali e non voglio la parte sotto (credo che si chiami children ...) ... (se vedete in demo lo script capirete meglio); sono riuscito a togliere la parte sotto (ho tolto parte del javascript... forse troppo) pero' al passaggio del mouse mi cambia il colore del caratere del bottone ma non mi cambia il colore dello sfondo ... vi posto il codice originale e il codice da me variato .... chi mi può aiutare ? ... grazie in anticipo
codice originale
codice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="it"> <head> <title>Menu con effetto overlay - Esempio JavaScript scaricato da HTML.it</title> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="it" /> <meta name="Robots" content="All" /> <meta name="Description" content="HTML.it - il sito italiano sul Web publishing" /> <meta name="Keywords" content="javascript" /> <meta name="Owner" content="HTML.it srl" /> <meta name="Author" content="HTML.it srl" /> <meta name="Copyright" content="HTML.it srl" /> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/> <script src="js/cufon-yui.js" type="text/javascript"></script> <script src="js/Aller.font.js" type="text/javascript"></script> <script type="text/javascript"> Cufon.replace('ul.oe_menu div a',{hover: true}); Cufon.replace('h1,h2,.oe_heading'); </script> <style type="text/css"> span.reference{ position:fixed; left:0px; bottom:0px; background:#000; width:100%; font-size:10px; line-height:20px; text-align:right; height:20px; -moz-box-shadow:-1px 0px 10px #000; -webkit-box-shadow:-1px 0px 10px #000; box-shadow:-1px 0px 10px #000; } span.reference a{ color:#aaa; text-transform:uppercase; text-decoration:none; margin-right:10px; } span.reference a:hover{ color:#ddd; } .bg_img img{ width:100%; position:fixed; top:0px; left:0px; z-index:-1; } h1{ font-size:75px; text-align:right; position:absolute; right:40px; top:20px; font-weight:normal; /*text-shadow: 0 0 3px #0096ff, 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #0096ff, 0 0 70px #0096ff, 0 0 80px #0096ff, 0 0 100px #0096ff, 0 0 150px #0096ff; */} h1 span{ display:block; font-size:15px; font-weight:bold; } h2{ position:absolute; top:220px; left:50px; font-size:40px; font-weight:normal; /*text-shadow: 0 0 3px #f6ff00, 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #f6ff00, 0 0 70px #f6ff00, 0 0 80px #f6ff00, 0 0 100px #f6ff00, 0 0 150px #f6ff00; */} </style> </head> <body> <h2>Menu con effetto overlay</h2> <div class="bg_img">[img]images/1.jpg[/img]</div> <div class="oe_wrapper"> <div id="oe_overlay" class="oe_overlay"></div> <ul id="oe_menu" class="oe_menu"> [*]Collections <div> <ul> <li class="oe_heading">Summer 2011 [*]Milano [*]Paris [*]Special Events [*]Runway Show [*]Overview [/list] <ul> <li class="oe_heading">Winter 2010 [*]Milano [*]New York [*]Behind the scenes [*]Interview [*]Photos [*]Download [/list] <ul> <li class="oe_heading">Categories [*]Casual [*]Business [*]Underwear [*]Nature Pure [*]Swimwear [*]Evening [/list] </div> [*]Projects <div style="left:-111px;"> <ul> <li class="oe_heading">Fashion Shows [*]Milano [*]Paris [*]Berlin [*]New York [*]London [/list] <ul> <li class="oe_heading">Events [*]Fashion Party 2011 [*]Evening specials [*]Fashion Day Milano [*]Model Workshops [/list] <ul> <li class="oe_heading">Media [*]Wallpapers [*]Downloads [*]Images [*]Contest 2011 [*]Fashion Mania [*]Green Earth Day [/list] </div> [*]Fragrances <div style="left:-223px;"> <ul class="oe_full"> <li class="oe_heading">Fashion Fragrances [*]Deálure [*]Violet Woman [*]Deep Blue for Men [*]New York, New York [*]Illusion [/list] </div> [*]Events <div style="left:-335px;"> <ul> <li class="oe_heading">Shows 2010 [*]Milano [*]Paris [*]Berlin [*]New York [*]London [/list] <ul> <li class="oe_heading">Shows 2011 [*]Milano [*]Paris [*]Berlin [*]New York [*]London [/list] <ul> <li class="oe_heading">Special Events [*]Fashion Party 2011 [*]Fashion Countdown Party 2010 [*]Fashion Day Milano [*]Model Workshops [/list] </div> [*]Stores <div style="left:-447px;"> <ul> <li class="oe_heading">Europe [*]Milano [*]Paris [*]Berlin [*]London [/list] <ul> <li class="oe_heading">Asia [*]Hong Kong [*]Tokio [*]New Delhi [*]Beijing [/list] <ul> <li class="oe_heading">United States [*]New York [*]Los Angeles [*]Seattle [*]Miami [/list] </div> [/list] </div> <div> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> <script type="text/javascript"> $(function() { var $oe_menu = $('#oe_menu'); var $oe_menu_items = $oe_menu.children('li'); var $oe_overlay = $('#oe_overlay'); $oe_menu_items.bind('mouseenter',function(){ var $this = $(this); $this.addClass('slided selected'); $this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){ $oe_menu_items.not('.slided').children('div').hide(); $this.removeClass('slided'); }); }).bind('mouseleave',function(){ var $this = $(this); $this.removeClass('selected').children('div').css('z-index','1'); }); $oe_menu.bind('mouseenter',function(){ var $this = $(this); $oe_overlay.stop(true,true).fadeTo(200, 0.6); $this.addClass('hovered'); }).bind('mouseleave',function(){ var $this = $(this); $this.removeClass('hovered'); $oe_overlay.stop(true,true).fadeTo(200, 0); $oe_menu_items.children('div').hide(); }) }); </script> <div align="center"> [img]logo_htmlit.gif[/img] </body> </html>
--- codice da me variato ---
codice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="it"> <head> <title>roberta ubaldi</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="it" /> <meta name="Robots" content="All" /> <meta name="Description" content="HTML.it - il sito italiano sul Web publishing" /> <meta name="Keywords" content="javascript" /> <meta name="Owner" content="HTML.it srl" /> <meta name="Author" content="HTML.it srl" /> <meta name="Copyright" content="HTML.it srl" /> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/> <script src="js/cufon-yui.js" type="text/javascript"></script> <script src="js/Aller.font.js" type="text/javascript"></script> <script type="text/javascript"> Cufon.replace('ul.oe_menu div a',{hover: true}); Cufon.replace('h1,h2,.oe_heading'); </script> <style type="text/css"> span.reference{ position:fixed; left:0px; bottom:0px; background:#000; width:100%; font-size:10px; line-height:20px; text-align:right; height:20px; -moz-box-shadow:-1px 0px 10px #000; -webkit-box-shadow:-1px 0px 10px #000; box-shadow:-1px 0px 10px #000; } span.reference a{ color:#aaa; text-transform:uppercase; text-decoration:none; margin-right:10px; } span.reference a:hover{ color:#ddd; } .bg_img img{ width:100%; position:fixed; top:0px; left:0px; z-index:-1; } h1{ font-size:75px; text-align:right; position:absolute; right:40px; top:20px; font-weight:normal; /*text-shadow: 0 0 3px #0096ff, 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #0096ff, 0 0 70px #0096ff, 0 0 80px #0096ff, 0 0 100px #0096ff, 0 0 150px #0096ff; */} h1 span{ display:block; font-size:15px; font-weight:bold; } body { background-color: #000; } </style> </head> <body> <div class="bg_img">[img]images/sfondo-ossido.jpg[/img]</div> <div class="oe_wrapper"> <div id="oe_overlay" class="oe_overlay"></div> <ul id="oe_menu" class="oe_menu">[*]profile [*]works [*]exibition [*]press [*]contact [/list] </div> <div> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> <script type="text/javascript"> $(function() { var $oe_menu = $('#oe_menu'); var $oe_menu_items = $oe_menu.children('li'); var $oe_overlay = $('#oe_overlay'); $oe_menu_items.bind('mouseenter',function(){ var $this = $(this); $this.addClass('slided selected'); $this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){ $oe_menu_items.not('.slided').children('div').hide(); $this.removeClass('slided'); }); }).bind('mouseleave',function(){ var $this = $(this); $this.removeClass('selected').children('div').css('z-index','1'); }); $oe_menu.bind('mouseenter',function(){ var $this = $(this); $oe_overlay.stop(true,true).fadeTo(200, 0.6); $this.addClass('hovered'); }).bind('mouseleave',function(){ var $this = $(this); $this.removeClass('hovered'); $oe_overlay.stop(true,true).fadeTo(200, 0); $oe_menu_items.children('div').hide(); }) }); </script> <div align="center"> </body> </html>
Rispondi quotando
