Показать сообщение отдельно
Непрочитано 12.02.2010, 08:35   #4
Аватар для PuShKinG

Cool Re: PuShKinG выручай =)

Да, идея хорошая, только у меня сейчас нет времени.
Если есть желание сделать самому, то вот тебе небольшой урок по созданию выпадающих меню на jQuery, которое можно переделать под всё что угодно.

Шаг №1 - XHTML, врезаем его туда, где должно находится меню.

Код HTML:
<li class="menu">
<ul>
<li class="button"><a href="#"><img src="skins/Happy/img/stat.png" width="242" height="82" alt="Realms Info"></a></li>
<li class="dropdown">
<ul><!-- Этот список содержит опции, которые выпадают с помощью jQuery -->
<li><?php include("./blocks/stat.php") ?></li><!-- Содержимое меню -->
</ul>
</li>
</ul>
</li>
Шаг №2 - CSS, сохраняем его как demo.css в шапке сайта.

PHP код:
ul{
margin:0;
padding:0;
}

ul.container{
/* главный UL */
width:242px;
margin:0 auto;
padding:50px;
}

li{
list-
style:none;
text-align:left;
}

li.menu{
/* Главные элементы списка */
width:100%;
}

li.button a{
display:block;
height:82px;
overflow:hidden;
padding:10px 20px 0;
position:relative;
width:242px;
}

li.button a:hover{
text-decoration:none;
}

.
dropdown{
/* Расширяющиеся списки */
display:none;
width:100%;
}

.
dropdown li{
/* Каждый элемент в таких списках */
color:#CCCCCC;

Шаг №3 - jQuery, подключаем все необходимые скрипты в шапке документа.

Код HTML:
<link rel="stylesheet" type="text/css" href="demo.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="jquery.easing.1.3.js"></script>

<script type="text/javascript" src="script.js"></script>
Содержимое файла jquery.easing.1.3.js, сохраняем его в шапке сайта.

PHP код:
// t: current time, b: begInnIng value, c: change In value, d: duration
jQuery.easing['jswing'] = jQuery.easing['swing'];

jQuery.extendjQuery.easing,
{
    
def'easeOutQuad',
    
swing: function (xtbcd) {
        
//alert(jQuery.easing.default);
        
return jQuery.easing[jQuery.easing.def](xtbcd);
    },
    
easeInQuad: function (xtbcd) {
        return 
c*(t/=d)*b;
    },
    
easeOutQuad: function (xtbcd) {
        return -
*(t/=d)*(t-2) + b;
    },
    
easeInOutQuad: function (xtbcd) {
        if ((
t/=d/2) < 1) return c/2*t*b;
        return -
c/* ((--t)*(t-2) - 1) + b;
    },
    
easeInCubic: function (xtbcd) {
        return 
c*(t/=d)*t*b;
    },
    
easeOutCubic: function (xtbcd) {
        return 
c*((t=t/d-1)*t*1) + b;
    },
    
easeInOutCubic: function (xtbcd) {
        if ((
t/=d/2) < 1) return c/2*t*t*b;
        return 
c/2*((t-=2)*t*2) + b;
    },
    
easeInQuart: function (xtbcd) {
        return 
c*(t/=d)*t*t*b;
    },
    
easeOutQuart: function (xtbcd) {
        return -
* ((t=t/d-1)*t*t*1) + b;
    },
    
easeInOutQuart: function (xtbcd) {
        if ((
t/=d/2) < 1) return c/2*t*t*t*b;
        return -
c/* ((t-=2)*t*t*2) + b;
    },
    
easeInQuint: function (xtbcd) {
        return 
c*(t/=d)*t*t*t*b;
    },
    
easeOutQuint: function (xtbcd) {
        return 
c*((t=t/d-1)*t*t*t*1) + b;
    },
    
easeInOutQuint: function (xtbcd) {
        if ((
t/=d/2) < 1) return c/2*t*t*t*t*b;
        return 
c/2*((t-=2)*t*t*t*2) + b;
    },
    
easeInSine: function (xtbcd) {
        return -
Math.cos(t/* (Math.PI/2)) + b;
    },
    
easeOutSine: function (xtbcd) {
        return 
Math.sin(t/* (Math.PI/2)) + b;
    },
    
easeInOutSine: function (xtbcd) {
        return -
c/* (Math.cos(Math.PI*t/d) - 1) + b;
    },
    
easeInExpo: function (xtbcd) {
        return (
t==0) ? Math.pow(210 * (t/1)) + b;
    },
    
easeOutExpo: function (xtbcd) {
        return (
t==d) ? b+* (-Math.pow(2, -10 t/d) + 1) + b;
    },
    
easeInOutExpo: function (xtbcd) {
        if (
t==0) return b;
        if (
t==d) return b+c;
        if ((
t/=d/2) < 1) return c/Math.pow(210 * (1)) + b;
        return 
c/* (-Math.pow(2, -10 * --t) + 2) + b;
    },
    
easeInCirc: function (xtbcd) {
        return -
* (Math.sqrt(- (t/=d)*t) - 1) + b;
    },
    
easeOutCirc: function (xtbcd) {
        return 
Math.sqrt(- (t=t/d-1)*t) + b;
    },
    
easeInOutCirc: function (xtbcd) {
        if ((
t/=d/2) < 1) return -c/* (Math.sqrt(t*t) - 1) + b;
        return 
c/* (Math.sqrt(- (t-=2)*t) + 1) + b;
    },
    
easeInElastic: function (xtbcd) {
        var 
s=1.70158;var p=0;var a=c;
        if (
t==0) return b;  if ((t/=d)==1) return b+c;  if (!pp=d*.3;
        if (
Math.abs(c)) { a=c; var s=p/4; }
        else var 
p/(2*Math.PI) * Math.asin (c/a);
        return -(
a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/)) + b;
    },
    
easeOutElastic: function (xtbcd) {
        var 
s=1.70158;var p=0;var a=c;
        if (
t==0) return b;  if ((t/=d)==1) return b+c;  if (!pp=d*.3;
        if (
Math.abs(c)) { a=c; var s=p/4; }
        else var 
p/(2*Math.PI) * Math.asin (c/a);
        return 
a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/) + b;
    },
    
easeInOutElastic: function (xtbcd) {
        var 
s=1.70158;var p=0;var a=c;
        if (
t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!pp=d*(.3*1.5);
        if (
Math.abs(c)) { a=c; var s=p/4; }
        else var 
p/(2*Math.PI) * Math.asin (c/a);
        if (
1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/)) + b;
        return 
a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/)*.5 b;
    },
    
easeInBack: function (xtbcds) {
        if (
== undefined1.70158;
        return 
c*(t/=d)*t*((s+1)*s) + b;
    },
    
easeOutBack: function (xtbcds) {
        if (
== undefined1.70158;
        return 
c*((t=t/d-1)*t*((s+1)*s) + 1) + b;
    },
    
easeInOutBack: function (xtbcds) {
        if (
== undefined1.70158
        if ((
t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*s)) + b;
        return 
c/2*((t-=2)*t*(((s*=(1.525))+1)*s) + 2) + b;
    },
    
easeInBounce: function (xtbcd) {
        return 
jQuery.easing.easeOutBounce (xd-t0cd) + b;
    },
    
easeOutBounce: function (xtbcd) {
        if ((
t/=d) < (1/2.75)) {
            return 
c*(7.5625*t*t) + b;
        } else if (
< (2/2.75)) {
            return 
c*(7.5625*(t-=(1.5/2.75))*.75) + b;
        } else if (
< (2.5/2.75)) {
            return 
c*(7.5625*(t-=(2.25/2.75))*.9375) + b;
        } else {
            return 
c*(7.5625*(t-=(2.625/2.75))*.984375) + b;
        }
    },
    
easeInOutBounce: function (xtbcd) {
        if (
d/2) return jQuery.easing.easeInBounce (xt*20cd) * .5 b;
        return 
jQuery.easing.easeOutBounce (xt*2-d0cd) * .5 c*.5 b;
    }
}); 
Содержимое script.js, сохраняем его в шапке сайта.

PHP код:
$(document).ready(function(){
    
/* This code is executed after the DOM has been completely loaded */

    /* Changing thedefault easing effect - will affect the slideUp/slideDown methods: */
    
$.easing.def "easeOutBounce";

    
/* Binding a click event handler to the links: */
    
$('li.button a').click(function(e){
    
        
/* Finding the drop down list that corresponds to the current section: */
        
var dropDown = $(this).parent().next();
        
        
/* Closing all other drop down sections, except the current one */
        
$('.dropdown').not(dropDown).slideUp('slow');
        
dropDown.slideToggle('slow');
        
        
/* Preventing the default event (which would be to navigate the browser to the link's address) */
        
e.preventDefault();
    })
    
}); 
Всё
PuShKinG вне форума Отправить сообщение для PuShKinG с помощью ICQ Ответить с цитированием