Ciao.
Mi piacevo così tanto il menu di mootools
che ne ho fatto una semplice versione
la potete trovare qui.
Che ne pensate ?
Ciao.
Mi piacevo così tanto il menu di mootools
che ne ho fatto una semplice versione
la potete trovare qui.
Che ne pensate ?
Without faith, nothing is possible. With it, nothing is impossible
http://ilwebdifabio.it
Without faith, nothing is possible. With it, nothing is impossible
http://ilwebdifabio.it
scusami se ti faccio questa richiesta, ma non potremmo fare in modo di dare un effetto "Morph" all'evento di apertura e chiusura delle colonne in modo che sia piu' gradevole e rallentato ???Originariamente inviato da whisher
Ciao.
Mi piacevo così tanto il menu di mootools
che ne ho fatto una semplice versione
la potete trovare qui.
Che ne pensate ?
Con una closure:
Se ho capito bene il significato di :Codice PHP:function getTab(e){
var currentLink= getTarget(e);
fire(currentLink);
};
function fire(el){
if (counter < maxWidth){
el.style.width =getPixel(counter);
counter= counter+ 10;
timeoutID= window.setTimeout(function(){fire(el)},5);
}
stopCount();
}
function stopCount(){
if (counter == maxWidth){
clearTimeout(timeoutID);
counter=defaultWidth;
}
}
scusami se ti faccio questa richiesta, ma non potremmo fare in modo di dare un effetto "Morph" all'evento di apertura e chiusura delle colonne in modo che sia piu' gradevole e rallentato ???
Ps.
Nb data la mia scarsa conoscenza delle closure
non garantiscoquindi occhio
Without faith, nothing is possible. With it, nothing is impossible
http://ilwebdifabio.it
scusami:
getTab(e){
//---
}
esiste gia' la sostituisco o la incollo e le faccio coesistere ???
la variabile counter non è definita la dichiaro pubblica e basta cosi ???
Scusa il ritardo ma .........
Codice PHP:<!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">
<head>
<title>Easy mootools menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* Main */
* {
margin:0px;
padding:0px
}
body {
background-color: #000000;
text-align:center;
}
a:link, a:visited,a:hover,a:active {
text-decoration: none;
}
#heading{
height:60px;
margin-bottom:50px;
border-bottom:2px solid #fe633a;
background-color:#DC2301;
}
#heading h1{
line-height:60px;
text-align:center;
background-color:#FE3704;
}
#container{
margin: 0 auto;
text-align: left;
background-color:#FFFFFF;
width: 730px;
}
#content{
background-color:#CCC;
}
#footer{
margin-top:50px;
border-top:2px solid #fe633a;
background-color:#d41e00;
}
#footer p{
text-align:center;
background-color:#d41e00;
font-weight:700;
}
#navigation{
text-align:center;
height:70px;
border-left:2px solid #fe633a;
background-color:#d41e00;
}
/* Easy mootools menu */
ul#easy-mootools-menu {
list-style-type:none;
background-color:#d41e00;
}
ul#easy-mootools-menu li {
float:left;
}
ul#easy-mootools-menu li a,ul#easy-mootools-menu li a:hover{
display:block;
width:180px;
height:70px;
line-height:70px;
border-right:2px solid #fe633a;
font-family:"Trebuchet MS",Helvetica,Arial,Geneva,sans-serif;
font-weight:bold;
text-align:center;
text-transform:uppercase;
text-decoration:none;
letter-spacing:1px;
}
ul#easy-mootools-menu li a {
background-color:#d41e00;
color:#fff;
}
ul#easy-mootools-menu li a:hover {
background-color:#d41e00;
color:#C1FF6A;
}
</style>
<script type="text/javascript">
/*
You may use this script on your web site without seeking my permission.
A link back to [url]www.blogial.net[/url] is always appreciated.
The content provided in this article is not warranted or guaranteed by [url]www.blogial.net.[/url]
*/
function easyMooToolsMenu(){
var counter= 180;
var defaultWidth= 180;
/*
* - maxWidth -
* Width status tab over must be the same
* of the background image.
* The different between defaultWidth and maxWidth
* must be divisible by tabs number - 1.
* Larghezza del tab quando lo status è hover
* che deve essere la stessa dell'immagine
* di background.
* Deve essere divisibile per tabs number - 1.
*/
var maxWidth= 240;
var listIdLength= 0;
var ext= '.png';
/* Don't touch, please ;) */
var listId= [];
/* Utility Events */
function addEvent(elm, evType, fn, useCapture){
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
return r;
} else {
elm['on' + evType] = fn;
}
};
function getTarget( evt ){
evt = evt || window.event || null;
return evt?(evt.target||evt.srcElement||null):null;
};
/* Utility Dom */
function $(element){
return document.getElementById(element);
}
function getPixel(n){
return +n + 'px';
};
function getTab(e){
var currentLink= getTarget(e);
currentLinkId= currentLink.getAttribute('id');
var newImage = "url(images/"+currentLinkId+ext+")";
currentLink.style.backgroundImage= newImage;
fire(currentLink);
};
function fire(el){
if (counter <= maxWidth){
counter= counter+5;
var diff= ((defaultWidth*listIdLength)- counter)/(listIdLength-1);
diff1= Math.floor(diff);
diff2= Math.ceil(diff);
/*
Serve a pareggiare il valore di counter dopo l'arrotondamento
*/
el.style.width= getPixel(counter+diff2-diff1);
for(var i=0;i<listIdLength;i++){
if(currentLinkId != listId[i]){
$(listId[i]).style.width= getPixel(diff1);
}
}
timeoutID= window.setTimeout(function(){fire(el)},5);
}
stopCount();
}
function stopCount(){
if (counter == maxWidth){
clearTimeout(timeoutID);
counter=defaultWidth;
}
}
function resetWidthTabs(){
var target= $('easy-mootools-menu');
if(target==null){return;}
var aList= target.getElementsByTagName('a');
for(var i=0;i<aList.length;i++){
aList.item(i).style.width =getPixel(defaultWidth);
}
};
function init(){
if(!document.getElementById || !document.getElementsByTagName || !document.createTextNode){return;}
var target= $('easy-mootools-menu');
if(target==null){return;}
var aList= target.getElementsByTagName('a');
for(var i=0;i<aList.length;i++){
var currentId= aList.item(i).getAttribute('id');
listId.push(currentId);
var newImage = "url(images/"+ currentId+ext +")";
aList.item(i).style.backgroundImage= newImage;
aList.item(i).style.width =getPixel(defaultWidth);
addEvent(aList.item(i),'mouseover',getTab,false);
addEvent(aList.item(i),'mouseout',resetWidthTabs,false);
}
listIdLength= listId.length;
};
addEvent(window,'load',init,false);
};
easyMooToolsMenu();
</script>
</head>
<body>
<div id="heading"><h1>Easy mootools menu</h1></div>
<div id="container">
<div id="navigation">
<ul id="easy-mootools-menu">
[*]
[url="index.htm"]Home[/url]
[*]
[url="index.htm"]About[/url]
[*]
[url="index.htm"]Contact[/url]
[*]
[url="index.htm"]Credits[/url]
[/list]
</div>
<div id="content"></div>
</div>
<div id="footer">
by Whisher</p></div>
</body>
</html>
Without faith, nothing is possible. With it, nothing is impossible
http://ilwebdifabio.it
PERFETTO!!!
solo un ultima cosa, per ffare ritornare alle dimenzioni originali la cella in maniera lenta come quando si allarga come posso fare ?
Un caffè non so una pastaOriginariamente inviato da w_t
PERFETTO!!!
solo un ultima cosa, per ffare ritornare alle dimenzioni originali la cella in maniera lenta come quando si allarga come posso fare ?
Tanto prova questa nuova versione:
Codice PHP:<!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">
<head>
<title>Easy mootools menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* Main */
* {
margin:0px;
padding:0px
}
body {
background-color: #000000;
text-align:center;
}
a:link, a:visited,a:hover,a:active {
text-decoration: none;
}
#heading{
height:60px;
margin-bottom:50px;
border-bottom:2px solid #fe633a;
background-color:#DC2301;
}
#heading h1{
line-height:60px;
text-align:center;
background-color:#FE3704;
}
#container{
margin: 0 auto;
text-align: left;
background-color:#FFFFFF;
width: 730px;
}
#content{
background-color:#CCC;
}
#footer{
margin-top:50px;
border-top:2px solid #fe633a;
background-color:#d41e00;
}
#footer p{
text-align:center;
background-color:#d41e00;
font-weight:700;
}
#navigation{
text-align:center;
height:70px;
border-left:2px solid #fe633a;
background-color:#d41e00;
}
/* Easy mootools menu */
ul#easy-mootools-menu {
list-style-type:none;
background-color:#d41e00;
}
ul#easy-mootools-menu li {
float:left;
}
ul#easy-mootools-menu li a,ul#easy-mootools-menu li a:hover{
display:block;
width:180px;
height:70px;
line-height:70px;
border-right:2px solid #fe633a;
font-family:"Trebuchet MS",Helvetica,Arial,Geneva,sans-serif;
font-weight:bold;
text-align:center;
text-transform:uppercase;
text-decoration:none;
letter-spacing:1px;
}
ul#easy-mootools-menu li a {
background-color:#d41e00;
color:#fff;
}
ul#easy-mootools-menu li a:hover {
background-color:#d41e00;
color:#C1FF6A;
}
</style>
<script type="text/javascript">
/*
You may use this script on your web site without seeking my permission.
A link back to [url]www.blogial.net[/url] is always appreciated.
The content provided in this article is not warranted or guaranteed by [url="http://www.blogial.net."][url]www.blogial.net.[/url][/url]
*/
function easyMooToolsMenu(){
var tabList= null;
var speed= 5;
var counter= 180;
var defaultWidth= 180;
/*
* - maxWidth -
* Width status tab over must be the same
* of the background image.
* The different between defaultWidth and maxWidth
* must be divisible by tabs number - 1.
* Larghezza del tab quando lo status è hover
* che deve essere la stessa dell'immagine
* di background.
* Deve essere divisibile per tabs number - 1.
*/
var maxWidth= 240;
var listIdLength= 0;
var ext= '.png';
/* Utility Events */
function addEvent(elm, evType, fn, useCapture){
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
return r;
} else {
elm['on' + evType] = fn;
}
};
function getTarget( evt ){
evt = evt || window.event || null;
return evt?(evt.target||evt.srcElement||null):null;
};
/* Utility Dom */
function $(element){
return document.getElementById(element);
}
function getPixel(n){
return +n + 'px';
};
function getTab(e){
var currentLink= getTarget(e);
currentLinkId= currentLink.getAttribute('id');
var newImage = "url(images/"+currentLinkId+ext+")";
currentLink.style.backgroundImage= newImage;
fire(currentLink);
};
function fire(el){
if(counter <= maxWidth){
counter= counter+5;
var diff= ((defaultWidth*listIdLength)- counter)/(listIdLength-1);
diff1= Math.floor(diff);
diff2= Math.ceil(diff);
/*
Serve a pareggiare il valore di counter dopo l'arrotondamento
*/
for(var i=0;i<tabList.length;i++){
if(tabList.item(i) == el){
tabList.item(i).style.width= getPixel(counter+diff2-diff1);
}
else{
tabList.item(i).style.width= getPixel(diff1);
}
}
timeoutID= window.setTimeout(function(){fire(el)},speed);
}
if(counter == maxWidth){
clearTimeout(timeoutID);
counter=defaultWidth;
}
}
function resetWidthTabs(){
for(var i=0;i<tabList.length;i++){
tabList.item(i).style.width =getPixel(defaultWidth);
}
};
function init(){
if(!document.getElementById || !document.getElementsByTagName || !document.createTextNode){return;}
var target= $('easy-mootools-menu');
if(target==null){return;}
tabList= target.getElementsByTagName('a');
var listId= [];
for(var i=0;i<tabList.length;i++){
var currentId= tabList.item(i).getAttribute('id');
listId.push(currentId);
var newImage = "url(images/"+ currentId+ext +")";
tabList.item(i).style.backgroundImage= newImage;
tabList.item(i).style.width =getPixel(defaultWidth);
addEvent(tabList.item(i),'mouseover',getTab,false);
addEvent(tabList.item(i),'mouseout',resetWidthTabs,false);
}
listIdLength= listId.length;
};
addEvent(window,'load',init,false);
};
easyMooToolsMenu();
</script>
</head>
<body>
<div id="heading"><h1>Easy mootools menu</h1></div>
<div id="container">
<div id="navigation">
<ul id="easy-mootools-menu"> [*]
[url="index.htm"]Home[/url]
[*]
[url="index.htm"]About[/url]
[*]
[url="index.htm"]Contact[/url]
[*]
[url="index.htm"]Credits[/url]
[/list]
</div>
<div id="content"></div>
</div>
<div id="footer">
by Whisher</p></div>
</body>
</html>
Per la velocità anche onmouseover adesso ci dò un occhio
con calma
Without faith, nothing is possible. With it, nothing is impossible
http://ilwebdifabio.it
Dacci un occhio
ho dovuto togliere il bordo
al tag a
Codice PHP:<!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">
<head>
<title>Easy mootools menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* Main */
* {
margin:0px;
padding:0px
}
body {
background-color: #000000;
text-align:center;
}
a:link, a:visited,a:hover,a:active {
text-decoration: none;
}
#heading{
height:60px;
margin-bottom:50px;
border-bottom:2px solid #fe633a;
background-color:#DC2301;
}
#heading h1{
line-height:60px;
text-align:center;
background-color:#FE3704;
}
#container{
margin: 0 auto;
text-align: left;
background-color:#FFFFFF;
width: 732px;
}
#content{
background-color:#CCC;
}
#footer{
margin-top:50px;
border-top:2px solid #fe633a;
background-color:#d41e00;
}
#footer p{
text-align:center;
background-color:#d41e00;
font-weight:700;
}
#navigation{
text-align:center;
height:70px;
border-left:2px solid #fe633a;
border-right:2px solid #fe633a;
background-color:#d41e00;
}
/* Easy mootools menu */
ul#easy-mootools-menu {
list-style-type:none;
background-color:#d41e00;
}
ul#easy-mootools-menu li {
float:left;
}
ul#easy-mootools-menu li a,ul#easy-mootools-menu li a:hover{
display:block;
width:180px;
height:70px;
line-height:70px;
/* border-right:2px solid #fe633a; */
font-family:"Trebuchet MS",Helvetica,Arial,Geneva,sans-serif;
font-weight:bold;
text-align:center;
text-transform:uppercase;
text-decoration:none;
letter-spacing:1px;
}
ul#easy-mootools-menu li a {
background-color:#d41e00;
color:#fff;
}
ul#easy-mootools-menu li a:hover {
background-color:#d41e00;
color:#C1FF6A;
}
.debug{
background-color:#FF0000;
color:#FFFFFF
}
</style>
<script type="text/javascript">
/*
You may use this script on your web site without seeking my permission.
A link back to [url]www.blogial.net[/url] is always appreciated.
The content provided in this article is not warranted or guaranteed by [url="http://www.blogial.net."][url]www.blogial.net.[/url][/url]
*/
function easyMooToolsMenu(){
var checker= 0;
var debug= false;
var tabList= null;
var speed= 5;
var counter= 180;
var counter2= 180;
var defaultWidth= 180;
/*
* - maxWidth -
* Width status tab over must be the same
* of the background image.
* The different between defaultWidth and maxWidth
* must be divisible by tabs number - 1.
* Larghezza del tab quando lo status è hover
* che deve essere la stessa dell'immagine
* di background.
* Deve essere divisibile per tabs number - 1.
*/
var maxWidth= 240;
var listIdLength= 0;
var ext= '.png';
/* Utility Events */
/* Debug */
function _debug(str){
var span= document.createElement('span');
span.className= 'debug';
span.appendChild(document.createTextNode(str));
$('content').appendChild(span);
}
function addEvent(elm, evType, fn, useCapture){
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
return r;
} else {
elm['on' + evType] = fn;
}
};
function getTarget( evt ){
evt = evt || window.event || null;
return evt?(evt.target||evt.srcElement||null):null;
};
/* Utility Dom */
function $(element){
return document.getElementById(element);
}
function getPixel(n){
return +n + 'px';
};
function resizeTabs(e){
var currentLink= getTarget(e);
currentLinkId= currentLink.getAttribute('id');
var newImage = "url(images/"+currentLinkId+ext+")";
currentLink.style.backgroundImage= newImage;
fire(currentLink);
};
function fire(el){
if(counter < maxWidth){
counter= counter+5;
var diff= ((defaultWidth*listIdLength)- counter)/(listIdLength-1);
diff1= Math.floor(diff);
diff2= Math.ceil(diff);
/*
Serve a pareggiare il valore di counter dopo l'arrotondamento
*/
for(var i=0;i<tabList.length;i++){
if(tabList.item(i) == el){
tabList.item(i).style.width= getPixel(counter+diff2-diff1);
}
else{
tabList.item(i).style.width= getPixel(diff1);
}
}
var timeoutID= window.setTimeout(function(){fire(el)},speed);
if(debug){
checker++;
_debug('Resize'+counter);
}
}
else if(counter == maxWidth){
window.clearTimeout(timeoutID);
counter2=counter;
counter=defaultWidth;
}
}
function resetTabs(){
fire2();
};
function fire2(){
if(counter2 > defaultWidth){
counter2= counter2-5;
var diff= ((defaultWidth*listIdLength)- counter2)/(listIdLength-1);
diff1= Math.floor(diff);
diff2= Math.ceil(diff);
for(var i=0;i<tabList.length;i++){
if(tabList.item(i).style.width == getPixel(counter2)){
tabList.item(i).style.width= getPixel(counter2);
}
else{
tabList.item(i).style.width= getPixel(diff1);
}
}
var timeoutID= window.setTimeout(fire2,speed);
if(debug){
checker++;
_debug('Reset'+counter2);
}
}
else if(counter2 == defaultWidth){
window.clearTimeout(timeoutID);
counter2=defaultWidth;
}
}
function init(){
if(!document.getElementById || !document.getElementsByTagName || !document.createTextNode){return;}
var target= $('easy-mootools-menu');
if(target==null){return;}
tabList= target.getElementsByTagName('a');
var listId= [];
for(var i=0;i<tabList.length;i++){
var currentId= tabList.item(i).getAttribute('id');
listId.push(currentId);
var newImage = "url(images/"+ currentId+ext +")";
tabList.item(i).style.backgroundImage= newImage;
tabList.item(i).style.width =getPixel(defaultWidth);
addEvent(tabList.item(i),'mouseover',resizeTabs,false);
addEvent(tabList.item(i),'mouseout',resetTabs,false);
}
listIdLength= listId.length;
};
addEvent(window,'load',init,false);
};
easyMooToolsMenu();
</script>
</head>
<body>
<div id="heading"><h1>Easy mootools menu</h1></div>
<div id="container">
<div id="navigation">
<ul id="easy-mootools-menu"> [*]
[url="index.htm"]Home[/url]
[*]
[url="index.htm"]About[/url]
[*]
[url="index.htm"]Contact[/url]
[*]
[url="index.htm"]Credits[/url]
[/list]
</div>
<div id="content"></div>
</div>
<div id="footer">
by Whisher</p></div>
</body>
</html>
Without faith, nothing is possible. With it, nothing is impossible
http://ilwebdifabio.it
quando esco dalla cella mi salta tutto(...brilla...) e poi si restringe come dovuto...
Permessi di invio
Rispondi quotando