Menu Personalizzabile JavaScript

« Older Newer »

Lazzah

Posted on 22/8/2011, 10:18

Advanced Member

Group:: PA Users

Posts:: 5,045

Reputation:: 0

Status:

Ciao a tutti..oggi vii nsegnerò come creare un menù javascrip tipo questoLINKPrima 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">

<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>


</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 LINK
VOCE#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

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.

www - Contatti