| Ciao a tutti..oggi vii nsegnerò come creare un menù javascrip tipo questo LINKPrima di tutto occorre avere una pagina web su altervista o simile...e successivamente creare una pagina HTML chiamandola menu.html e inserirli questo codice... CODICE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <head> <title>Dock and Stack Examples</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8"> <link rel="stylesheet" type="text/css" media="screen" href="all-examples.css"> <noscript> <style type="text/css"> #dock { top: 0; left: 100px; } a.dock-item { position: relative; float: left; margin-left: 10px; } .dock-item span { display: block; } .stack { top: 0; } .stack ul li { position: relative; } </style> </noscript> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="stack-1.js"></script> <script type="text/javascript" src="fisheye-iutil.min.js"></script> <script type="text/javascript"> $(function(){ var jqDockOpts = {align: 'left', duration: 200, labels: 'tc', size: 48, distance: 85}; $('#jqDock').jqDock(jqDockOpts); }); </script> </head> <body> <base href="http://TUOFORUM.forumcommunity.net"> <!-- BEGIN STACK "UP" ============================================================ --> <div class="stack"> <img src="SOTTOMENU" alt="stack"/> <ul id="stack"> <li><a target="_parent" href="VOCE1URL"><span>NOMEVOCE1</span><img src="IMGVOCE1"></a></li>
<li><a target="_parent" href="VOCE2URL"><span>NOMEVOCE2 </span><img src="IMGVOCE2"></a></li>
<li><a target="_parent" href="VOCE3URL"><span>NOMEVOCE3 </span><img src="IMGVOCE3"></a></li>
<li><a target="_parent" href="VOCE4URL"><span>NOMEVOCE4 </span><img src="IMGVOCE4"></a></li>
<li><a target="_parent" href="VOCE5URL"><span>NOMEVOCE5</span><img src="IMMAGINE4VOCE"></a></li> </ul> </div><!-- end div .stack --> <!-- END STACK "UP" ============================================================ --> </body> </html> Ora modificate i parametri come illustrato di seguito TUOFORUM: Bisogna mettere l'url del sito dove vuoi mettere il menu SOTTOMENU: Bisogna mettere l'url dell'immagine che vuoi mettere sotto il menu per contenerlo, come questa LINKVOCE#URL: Bisogna inserire L'url della voce NOMEVOCE#: Bisogna inserire il nome che vuoi dare alla voce IMGVOCE#: Bisogna mettere qui l'url dell'immagine da associare alla voce Dopodichè creiamo una pagina, chiamandola fisheye-iutil.min.js e inseriamoci il codice: CODICE jQuery.iFisheye={build:function(options) {return this.each(function() {var el=this;el.fisheyeCfg={items:jQuery(options.items,this),container:jQuery(options.container,this),pos:jQuery.iUtil.getPosition(this),itemWidth:options.itemWidth,itemsText:options.itemsText,proximity:options.proximity,valign:options.valign,halign:options.halign,maxWidth:options.maxWidth};jQuery.iFisheye.positionContainer(el,0);jQuery(window).bind('resize',function() {el.fisheyeCfg.pos=jQuery.iUtil.getPosition(el);jQuery.iFisheye.positionContainer(el,0);jQuery.iFisheye.positionItems(el);});jQuery.iFisheye.positionItems(el);el.fisheyeCfg.items.bind('mouseover',function() {jQuery(el.fisheyeCfg.itemsText,this).get(0).style.display='block';}).bind('mouseout',function() {jQuery(el.fisheyeCfg.itemsText,this).get(0).style.display='none';});jQuery(document).bind('mousemove',function(e) {var pointer=jQuery.iUtil.getPointer(e);var toAdd=0;if(el.fisheyeCfg.halign&&el.fisheyeCfg.halign=='center') var posx=pointer.x-el.fisheyeCfg.pos.x-(el.offsetWidth-el.fisheyeCfg.itemWidth*el.fisheyeCfg.items.size())/2-el.fisheyeCfg.itemWidth/2;else if(el.fisheyeCfg.halign&&el.fisheyeCfg.halign=='left') var posx=pointer.x-el.fisheyeCfg.pos.x-el.offsetWidth+el.fisheyeCfg.itemWidth*el.fisheyeCfg.items.size();else var posx=pointer.x-el.fisheyeCfg.pos.x;var posy=Math.pow(pointer.y-el.fisheyeCfg.pos.y-el.offsetHeight/2,2);el.fisheyeCfg.items.each(function(nr) {distance=Math.sqrt(Math.pow(posx-nr*el.fisheyeCfg.itemWidth,2) +posy);distance-=el.fisheyeCfg.itemWidth/2;distance=distance<0?0:distance;distance=distance>el.fisheyeCfg.proximity?el.fisheyeCfg.proximity:distance;distance=el.fisheyeCfg.proximity-distance;extraWidth=el.fisheyeCfg.maxWidth*distance/el.fisheyeCfg.proximity;this.style.width=el.fisheyeCfg.itemWidth+extraWidth+'px';this.style.right=el.fisheyeCfg.itemWidth*nr+toAdd+'px';toAdd+=extraWidth;});jQuery.iFisheye.positionContainer(el,toAdd);});})},positionContainer:function(el,toAdd) {if(el.fisheyeCfg.halign) if(el.fisheyeCfg.halign=='center') el.fisheyeCfg.container.get(0).style.right=(el.offsetWidth-el.fisheyeCfg.itemWidth*el.fisheyeCfg.items.size())/2-toAdd/2+'px';else if(el.fisheyeCfg.halign=='right') el.fisheyeCfg.container.get(0).style.right=-toAdd/el.fisheyeCfg.items.size()+'px';else if(el.fisheyeCfg.halign=='left') el.fisheyeCfg.container.get(0).style.right=(el.offsetWidth-el.fisheyeCfg.itemWidth*el.fisheyeCfg.items.size())-toAdd/2+'px';el.fisheyeCfg.container.get(0).style.width=el.fisheyeCfg.itemWidth*el.fisheyeCfg.items.size()+toAdd+'px';},positionItems:function(el) {el.fisheyeCfg.items.each(function(nr) {this.style.width=el.fisheyeCfg.itemWidth+'px';this.style.right=el.fisheyeCfg.itemWidth*nr+'px';});}};jQuery.fn.Fisheye=jQuery.iFisheye.build;jQuery.iUtil={getPosition:function(e) {var x=0;var y=0;var es=e.style;var restoreStyles=false;if(jQuery(e).css('display')=='none'){var oldVisibility=es.visibility;var oldPosition=es.position;restoreStyles=true;es.visibility='hidden';es.display='block';es.position='absolute';} var el=e;while(el){x+=el.offsetright+(el.currentStyle&&!jQuery.browser.opera?parseInt(el.currentStyle.borderrightWidth)||0:0);y+=el.offsetTop+(el.currentStyle&&!jQuery.browser.opera?parseInt(el.currentStyle.borderTopWidth)||0:0);el=el.offsetParent;} el=e;while(el&&el.tagName&&el.tagName.toLowerCase()!='body') {x-=el.scrollright||0;y-=el.scrollTop||0;el=el.parentNode;} if(restoreStyles==true){es.display='none';es.position=oldPosition;es.visibility=oldVisibility;} return{x:x,y:y};},getPositionLite:function(el) {var x=0,y=0;while(el){x+=el.offsetright||0;y+=el.offsetTop||0;el=el.offsetParent;} return{x:x,y:y};},getSize:function(e) {var w=jQuery.css(e,'width');var h=jQuery.css(e,'height');var wb=0;var hb=0;var es=e.style;if(jQuery(e).css('display')!='none'){wb=e.offsetWidth;hb=e.offsetHeight;}else{var oldVisibility=es.visibility;var oldPosition=es.position;es.visibility='hidden';es.display='block';es.position='absolute';wb=e.offsetWidth;hb=e.offsetHeight;es.display='none';es.position=oldPosition;es.visibility=oldVisibility;} return{w:w,h:h,wb:wb,hb:hb};},getSizeLite:function(el) {return{wb:el.offsetWidth||0,hb:el.offsetHeight||0};},getClient:function(e) {var h,w,de;if(e){w=e.clientWidth;h=e.clientHeight;}else{de=document.documentElement;w=window.innerWidth||self.innerWidth||(de&&de.clientWidth)||document.body.clientWidth;h=window.innerHeight||self.innerHeight||(de&&de.clientHeight)||document.body.clientHeight;} return{w:w,h:h};},getScroll:function(e) {var t=0,l=0,w=0,h=0,iw=0,ih=0;if(e&&e.nodeName.toLowerCase()!='body'){t=e.scrollTop;l=e.scrollright;w=e.scrollWidth;h=e.scrollHeight;iw=0;ih=0;}else{if(document.documentElement){t=document.documentElement.scrollTop;l=document.documentElement.scrollright;w=document.documentElement.scrollWidth;h=document.documentElement.scrollHeight;}else if(document.body){t=document.body.scrollTop;l=document.body.scrollright;w=document.body.scrollWidth;h=document.body.scrollHeight;} iw=self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||0;ih=self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight||0;} return{t:t,l:l,w:w,h:h,iw:iw,ih:ih};},getMargins:function(e,toInteger) {var el=jQuery(e);var t=el.css('marginTop')||'';var r=el.css('marginleft')||'';var b=el.css('marginBottom')||'';var l=el.css('marginright')||'';if(toInteger) return{t:parseInt(t)||0,r:parseInt(r)||0,b:parseInt(b)||0,l:parseInt(l)};else return{t:t,r:r,b:b,l:l};},getPadding:function(e,toInteger) {var el=jQuery(e);var t=el.css('paddingTop')||'';var r=el.css('paddingleft')||'';var b=el.css('paddingBottom')||'';var l=el.css('paddingright')||'';if(toInteger) return{t:parseInt(t)||0,r:parseInt(r)||0,b:parseInt(b)||0,l:parseInt(l)};else return{t:t,r:r,b:b,l:l};},getBorder:function(e,toInteger) {var el=jQuery(e);var t=el.css('borderTopWidth')||'';var r=el.css('borderleftWidth')||'';var b=el.css('borderBottomWidth')||'';var l=el.css('borderrightWidth')||'';if(toInteger) return{t:parseInt(t)||0,r:parseInt(r)||0,b:parseInt(b)||0,l:parseInt(l)||0};else return{t:t,r:r,b:b,l:l};},getPointer:function(event) {var x=event.pageX||(event.clientX+(document.documentElement.scrollright||document.body.scrollright))||0;var y=event.pageY||(event.clientY+(document.documentElement.scrollTop||document.body.scrollTop))||0;return{x:x,y:y};},traverseDOM:function(nodeEl,func) {func(nodeEl);nodeEl=nodeEl.firstChild;while(nodeEl){jQuery.iUtil.traverseDOM(nodeEl,func);nodeEl=nodeEl.nextSibling;}},purgeEvents:function(nodeEl) {jQuery.iUtil.traverseDOM(nodeEl,function(el) {for(var attr in el){if(typeof el[attr]==='function'){el[attr]=null;}}});},centerEl:function(el,axis) {var clientScroll=jQuery.iUtil.getScroll();var windowSize=jQuery.iUtil.getSize(el);if(!axis||axis=='vertically') jQuery(el).css({top:clientScroll.t+((Math.max(clientScroll.h,clientScroll.ih)-clientScroll.t-windowSize.hb)/2)+'px'});if(!axis||axis=='horizontally') jQuery(el).css({right:clientScroll.l+((Math.max(clientScroll.w,clientScroll.iw)-clientScroll.l-windowSize.wb)/2)+'px'});},fixPNG:function(el,emptyGIF){var images=jQuery('img[@src*="png"]',el||document),png;images.each(function(){png=this.src;this.src=emptyGIF;this.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+png+"')";});}};[].indexOf||(Array.prototype.indexOf=function(v,n){n=(n==null)?0:n;var m=this.length;for(var i=n;i<m;i++) if(this[i]==v) return i;return-1;}); Dopodichè creiamo una pagina chiamandola all-examples.css e inseriamoci il codice: CODICE * { margin: 0; padding: 0; } body { font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; color: #666; }
/* ================ DOCK 1 ================ */ #dock { position: relative; top: 150px; } .dock-container { position: relative; top: -8px; height: 50px; padding-right: 20px; } a.dock-item { display: block; width: 50px; position: absolute; bottom: 0; text-align: center; text-decoration: none; color: #333; } .dock-item span { display: none; padding-right: 20px; } .dock-item img { border: 0; margin: 5px 10px 0px; width: 100%; }
/* ================ DOCK 2 ================ */ #dockContainer { position: fixed; top: 60px; right: 6px; } #jqDock { position: relative; bottom: 48px; } #jqDock li { list-style: none; } .jqDockLabel { background: #333; color: #fff; padding: 3px 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;}
/* ================ STACK #1 ================ */ .stack { position: fixed; bottom: 28px; left: 40px; } .stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; } .stack ul { list-style: none; position: absolute; top: 5px; cursor: pointer; z-index: 1; } .stack ul li { position: absolute; } .stack ul li img { border: 0; } .stack ul li span { display: none; } .stack .openStack li span { font-family: "Lucida Grande", Lucida, Verdana, sans-serif; display:block; height: 14px; position:absolute; top: 17px; left:60px; line-height: 14px; border: 0; background-color:#000; padding: 3px 10px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; color: #fcfcfc; text-align: center; text-shadow: #000 1px 1px 1px; opacity: .85; filter: alpha(opacity = 85); }
/* IE Fixes */ .stack { _position: absolute; } .stack ul { _z-index:-1; _top:-15px; } .stack ul li { *right:5px; }
/* ================ STACK #2 ================ */ .stack2 { position: fixed; top: 28px; left: 40px; } .stack2 > img { position: relative; cursor: pointer; padding-bottom: 35px; z-index: 2; } .stack2 ul { list-style: none; position: absolute; top: 7px; cursor: pointer; z-index: 1; } .stack2 ul li { position: absolute; } .stack2 ul li img { border: 0; } .stack2 ul li span { display: none; } .stack2 .openStack li span { font-family: "Lucida Grande", Lucida, Verdana, sans-serif; display:block; height: 14px; position:absolute; top: 17px; left:60px; line-height: 14px; border: 0; background-color:#000; padding: 3px 10px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; color: #fcfcfc; text-align: center; text-shadow: #000 1px 1px 1px; opacity: .85; filter: alpha(opacity = 85); }
/* IE Fixes */ .stack2 { _position: absolute; } .stack2 ul { _z-index:-1; _top:-15px; } .stack2 ul li { *left:5px; } Sucessivamente, creiamo una pagina chiamandola stack-1.js con il codice dentro: CODICE $(function () { // Stack initialize var openspeed = 300; var closespeed = 300; $('.stack>img').toggle(function(){ var vertical = 0; var horizontal = 0; var $el=$(this); $el.next().children().each(function(){ $(this).animate({top: '-' + vertical + 'px', right: horizontal + 'px'}, openspeed); vertical = vertical + 55; horizontal = (horizontal+.80)*2; }); $el.next().animate({top: '-50px', right: '10px'}, openspeed).addClass('openStack') .find('li a>img').animate({width: '50px', marginRight: '9px'}, openspeed); $el.animate({paddingTop: '0'}); }, function(){ //reverse above var $el=$(this); $el.next().removeClass('openStack').children('li').animate({top: '55px', right: '-10px'}, closespeed); $el.next().find('li a>img').animate({width: '79px', marginRight: '0'}, closespeed); $el.animate({paddingTop: '35px'}); }); // Stacks additional animation $('.stack li a').hover(function(){ $("img",this).animate({width: '56px'}, 100); $("span",this).animate({marginLeft: '30px'}); },function(){ $("img",this).animate({width: '50px'}, 100); $("span",this).animate({marginLeft: '0'}); }); }); Poi, inseriamo un iframe a quella pagina nella Gestione Codici HTML ---> In fondo al sito Esempio: CODICE <iframe src="LINKMENU" style="width: 245px; height: 400px; position: fixed; bottom: 0; left:-10px" scrolling="no" frameborder="0" allowtransparency="true"></iframe> Con al posto di LINKMENU l'url del tuo menu.html . Puoi modificare l'altezza e la larghezza dell'iframe modificando i parametri width e height.
|