Discuti il tutorial sul forum !
Sliding top con mootools
Step 1: HTML Code
HTML code is very simple: we have a DIV with ID "top-panel" which is the and a another layer with ID sub-panel which contains a link to slide up/dow our panel:
<div id="top-panel">
<!– Top Panel content here –>
</div>
<div id="sub-panel">
<a href="#" id="toggle"><span>Show Panel</span<</a>
</div>
<!– Top Panel content here –>
</div>
<div id="sub-panel">
<a href="#" id="toggle"><span>Show Panel</span<</a>
</div>
…remember to add mootools framework in the page <head> tag:
<script type="text/javascript" src="mootools.svn.js"></script>
Step 2: Css code
This is only a proposal about the look of your panel, but you can customize it how you prefer:
#top-panel{
background:#e8f3c6;
border-bottom:3px solid #a6c34e;
padding:14px 20px;
text-align:right;
}
#sub-panel{
text-align:center;
}
#sub-panel a{
width:150px;
float:right;
color:#FFFFFF;
text-decoration:none;
margin-right:30px;
font-weight:bold;
background:url(img/sub-left.png) bottom left no-repeat #a6c34e;
}
#sub-panel a span{
padding:6px;
background:url(img/sub-right.png) right bottom no-repeat;
display:block;
}
background:#e8f3c6;
border-bottom:3px solid #a6c34e;
padding:14px 20px;
text-align:right;
}
#sub-panel{
text-align:center;
}
#sub-panel a{
width:150px;
float:right;
color:#FFFFFF;
text-decoration:none;
margin-right:30px;
font-weight:bold;
background:url(img/sub-left.png) bottom left no-repeat #a6c34e;
}
#sub-panel a span{
padding:6px;
background:url(img/sub-right.png) right bottom no-repeat;
display:block;
}
Step 3: JavaScript Function
Add this simple JavaScript in the <head> tag of the page:
<script type="text/javascript">
window.addEvent(‘domready’, function(){
var mySlide = new Fx.Slide(‘top-panel’);
$(‘toggle’).addEvent(‘click’, function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>
window.addEvent(‘domready’, function(){
var mySlide = new Fx.Slide(‘top-panel’);
$(‘toggle’).addEvent(‘click’, function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>
Sito web: http://woork.blogspot.com/2008/03/sliding-top-panel-using-mootools_05.html
March 14, 2008 | Scritto in tutorials, script ajax
Letto:385 volte
Correlati
- Top 10 Web Developer Libraries
- Top 20 blog design
- Top 71 CSS Menus Navigation Tabs
- Pageflakes AJAX online desktop
- Hostingblog l'unico blog sull'hosting in italia
- Top 25 PHP template engines
- MooTools Mocha UI
- Le chiavi di ricerca più popolari del 2007 in Italia
- Top 10 Javascripts per manipulazione di immagini
- download 6900 comuni italiani
- Sliding top con mootools
- Top 12 CSS Frameworks
- sliding tabs
- sliding date picker
Commenti
Scrivi un commento
-
NETWORK
RSS
Iscrivi Feed Rss
Newsletter
Iscriviti alla newsletter e tieniti sempre aggiornato!
Blogroll
- AG web solutions
- Assistenza legale - Assistenza legale strategica in tutto il settore della proprietà intellettuale e del diritto commerciale
- bitportal.it
- blogmap.it - Blogmap.it è una directory di blogs in cui potrai inserire il tuo blog e far vedere ai tuoi amici dove si trova nel mondo.
- Cartucce per stampanti - Cartucce per stampanti
- css galleries - css galleries
- derienzo.net
- desmm design e multimedia - desmm design e multimedia
- drwhois.org - drWhois verifica se il tuo dominio è libero
- ecommerce open source - ecommerce open source php mysql
- emanueleferonato.com blog - http://www.emanueleferonato.com/
- flash2blog.com
- form generator
- free script
- htaccess.it - web 2.0 , applicazioni web , software, web tool
- http://wordpress.templates20.net - free wordpress templates
- iconfinder.net - motore di ricerca per icone
- juliusdesign
- morpheusweb.it
- motore ricerca open source
- online giochi - online giochi
- pastrugni.com
- persefone.it - realizzazione siti web
- realizzazione siti
- Social bookmarking - Social bookmarking
- spcnet.it
- taormina sicilia - taormina sicilia
- technorati.it
- tutorial flash - tutorial flash
- tutorials ajax - tutorials ajax
- ui patterns
- videoconferenza - software videoconferenza open source
- webmaster risorse
- webmasterpoint.org
- www.net-free.it
Commenti recenti:
- Djfrenkios: Hello , chto eto za forum takoij? intersnio tut u vas
- Leonardo: Prima di pubblicare questi codici impara il php che questa pagina è piena di errori
- Vittorio: Ciao, ho installato MySQL ver 5.0.51b ma non mi funzionano le funzioni DATE_DIFF, TO_DAYS,TO_NUMBER...
- edo: Ciao Come posso fare per leggere dei dati su un sito web è riportarli nel mio sito web? esistono degli esempi di...
- sdfsfdsaf: s
Ultimi dal forum
Scaricare correttore ortografico italianoVari problemi
Installazione su server remoto
Installazione
Problema aggiornamento quantità prodotti carrello
Info
Bug utente + suggerimento formattazione
Problema cancellazione dalla mailing list
Problemi login
Problemi di visualizzazione nella home page
Fireworks appiattisce livelli quando salvo in png
Errore carrello
Requisiti server
Problema con le immagini
Problemi installazione
Realizzato con WordPress 
Hosting web by: 
Vietata la riproduzione anche parziale