webew
Войти » Регистрация
 
JavaScript

Помогите начинающему... menu с выпадающими подменю при наведении и раздвижное при клике

2 октября 2010, 23:21
Автор: bugor
Глубоко уважаемые Webew`чане, прошу Вашей помощи.

Для сайта под joomla`ой нужна менюшка с выпадающими подменю при наведении и раздвижное при клике.
С выделением родительского меню при активном чилде.

Оч прошу помощи. сам только начинаю изучать java Script, а менюшка нужна уже сейчас...

Думал както переделать SBD Accordion Menu:
var AccordionMenu =(function()
{
    var YUD = YAHOO.util.Dom;
    var YUE = YAHOO.util.Event;
    var oMenuSetting = {};
    var oMenuCache = {};
    var dLastHoverTitle ;
    YUD.addClass(document.documentElement,'accordion-menu-js');
   
    function getDT(e)
    {
        var dEl = YUE.getTarget(e);
           
        if( (e.tagName + '').toUpperCase()=='DD' )
        {   
            var dt = e.previousSibling ;
            while(dt)
            {
                if(dt.tagName &&  dt.tagName.toUpperCase() == 'DT'){break;};
                dt = dt.previousSibling
            };
           
            if(!dt || dt.tagName.toUpperCase() != 'DT'){return;}
            else{return (dt.tagName==='DT')?dt:null};
        }
        else if(e.clientX)
        {
            var found = false;
            while( dEl.parentNode)
            {
                if(YUD.hasClass(dEl,'a-m-t')){ found  = true ; break;};
                dEl = dEl.parentNode;
            };
            if(!found){return null}
            else{return (dEl.tagName==='DT')?dEl:null };   
        };     
    };
   
   
   
    function getDD(dt)
    {
        if(!dt){return null;};
        var dd = dt.nextSibling ;
   
        while(dd)
        {   
            if(dd.tagName && dd.tagName.toUpperCase() == 'DD'){break;};
            dd = dd.nextSibling;
           
        };
        if(!dd || dd.tagName.toUpperCase() != 'DD'){return;}
        else{return dd};
    };
   
    function expand(dl,dt,dd)
    {
        dl.hasAnimation +=1;
        YUD.addClass(dd,'a-m-d-before-expand');    
        var oAttr = {height:{from:0,to:dd.offsetHeight }};
       
        YUD.removeClass(dd,'a-m-d-before-expand');
       
        var onComplete = function()
        {   
            oAnim.onComplete.unsubscribe(onComplete);
            oAnim.stop();
            YUD.removeClass(dd,'a-m-d-anim');
            YUD.addClass(dd,'a-m-d-expand');
            onComplete = null
            dl.hasAnimation -=1;
            var dt = getDT(dd)
            YUD.addClass(dt,'a-m-t-expand');
            if( oMenuCache[ dl.id ] &&  oMenuCache[ dl.id ].onOpen && dd.style.height!='' )
            {   
                oMenuCache[ dl.id ].onOpen(  {dl:dl,dt:dt,dd:dd} );                            
            }
            dd.style.height = '';
       
        };
       
        var onTween = function()
        {
            if(dd.style.height)
            {   
                YUD.addClass(dd,'a-m-d-anim');             
                oAnim.onTween.unsubscribe(onTween);
                onTween = null;
                dd.oAnim = null;
            };
           
        };
       
        if(dd.oAnim)
        {
            dd.oAnim.stop();
            dd.oAnim = null;
            dl.hasAnimation -=1;   
        };
        var oEaseType = YAHOO.util.Easing.easeOut;
        var seconds = 0.5;
        if(oMenuCache[ dl.id ] )
        {
            oEaseType = oMenuCache[ dl.id ]['easeOut']?oEaseType:YAHOO.util.Easing.easeIn;
            seconds =  oMenuCache[ dl.id ]['seconds'];
           
            if( !oMenuCache[ dl.id ]['animation'] )
            {
                var oAnim = {onComplete:{unsubscribe:function(){}},stop:function(){}};
                onComplete();
                return;
            };
        };
       
       
        var oAnim = new YAHOO.util.Anim(dd,oAttr,seconds ,oEaseType);
        oAnim.onComplete.subscribe(onComplete)
        oAnim.onTween.subscribe(onTween);
        oAnim.animate();
        dd.oAnim = oAnim ;
   
    };
   
    function collapse(dl,dt,dd)
    {
        dl.hasAnimation +=1;
        YUD.addClass(dd,'a-m-d-anim');
        var oAttr = {height:{from:dd.offsetHeight,to:0}};
       
       
        var onComplete = function()
        {
            oAnim.onComplete.unsubscribe(onComplete);
            YUD.removeClass(dd,'a-m-d-anim');
            YUD.removeClass(dd,'a-m-d-expand');
            dd.style.height = '';
            dd.oAnim = null;
            onComplete = null
            dl.hasAnimation -=1;   
            var dt = getDT(dd)
            YUD.removeClass(dt,'a-m-t-expand')
            if( oMenuCache[ dl.id ] &&  oMenuCache[ dl.id ].onOpen )
            {              
                oMenuCache[ dl.id ].onClose(     {dl:dl,dt:dt,dd:dd} );
            };         
           
        };
       
        if(dd.oAnim)
        {
            dd.oAnim.stop();
            dd.oAnim = null;
            dl.hasAnimation -=1;   
        };
       
        var oEaseType = YAHOO.util.Easing.easeOut;
        var seconds = 0.5;
        if(oMenuCache[ dl.id ] )
        {
            oEaseType = oMenuCache[ dl.id ]['easeOut']?oEaseType:YAHOO.util.Easing.easeIn;
            seconds =  oMenuCache[ dl.id ]['seconds'];
            if( !oMenuCache[ dl.id ]['animation'] )
            {
                var oAnim = {onComplete:{unsubscribe:function(){}},stop:function(){}};
                onComplete();
                return;
            }
        };
       
        var oAnim = new YAHOO.util.Anim(dd,oAttr,seconds ,oEaseType);   
        oAnim.onComplete.subscribe(onComplete)
        oAnim.animate();
        dd.oAnim = oAnim ;
    };
   
    function collapseAll(dl,dt,dd)
    {
        var aOtherDD = YUD.getElementsByClassName('a-m-d-expand','dd',dl);
        for(var i=0;i<aOtherDD.length;i++)
        {
            var otherDD = aOtherDD[i] ;
            if( otherDD !=dd )
            {
                collapse(dl,null,otherDD);
            };             
        };
    }
   
   
    var onMenuMouseover = function(e)
    {
        var dMenuTitle = getDT(e);
        if(!dMenuTitle){return;};
        if(dLastHoverTitle)
        {
            YUD.removeClass(dLastHoverTitle,'a-m-t-hover');
        };     
        YUD.addClass(dMenuTitle,'a-m-t-hover');
        dLastHoverTitle = dMenuTitle ;
        YUE.preventDefault(e);
        return false;      
    };
   
    var onMenuMouseout = function(e)
    {
        var dMenuTitle = getDT(e);
        if(!dMenuTitle){return;};
        if(dLastHoverTitle && dLastHoverTitle!=dMenuTitle)
        {
            YUD.removeClass(dLastHoverTitle,'a-m-t-hover');
            YUD.removeClass(dLastHoverTitle,'a-m-t-down');
        }
        YUD.removeClass(dMenuTitle,'a-m-t-down');   
        YUD.removeClass(dMenuTitle,'a-m-t-hover');
        dLastHoverTitle = null ;
        YUE.preventDefault(e);
        return false;      
    };
   
    var onMenuMousedown = function(e)
    {
        var dMenuTitle = getDT(e);
        if(!dMenuTitle){return;};   
        YUD.addClass(dMenuTitle,'a-m-t-down');
        YUE.preventDefault(e);
        return false;   
    };
   
    var onMenuClick = function(e)
    {
        var dt = getDT(e);
        if(!dt){return;};
        var dd = getDD(dt);
       
   
       
        if(!dd){return;};
        var dl = dt.parentNode;
       
        if(dl.hasAnimation==null)
        {
            dl.hasAnimation = 0;
        }   
        if(dl.hasAnimation > 0 ){return;};
        YUD.removeClass(dt,'a-m-t-down');
       
        if(YUD.hasClass(dd,'a-m-d-expand'))
        {   
            collapse(dl,dt,dd);
        }
        else
        {          
            if( oMenuCache[ dl.id ] &&  oMenuCache[ dl.id ].dependent == false ){}
            else{collapseAll(dl,dt,dd);}
            expand(dl,dt,dd);
        };     
        YUE.preventDefault(e);
        return false;
    };
   
   
    YUE.on( document,'mouseover',onMenuMouseover);
    YUE.on( document,'mouseout',onMenuMouseout);
    YUE.on( document,'mousedown',onMenuMousedown);
    YUE.on( document,'click',onMenuClick);
   
  var oApi = {
 
    openDtById : function(sId)
    {
        var dt = document.getElementById(sId);
        if(!dt){return;};
        if(!YUD.hasClass(dt,'a-m-t')){return;};
        var dl = dt.parentNode;
        var dd = getDD(dt);
        if(dl.hasAnimation==null){dl.hasAnimation = 0;};
       
        if(dl.hasAnimation > 0 ){return;};
        if(YUD.hasClass(dd,'a-m-d-expand')){return;};
        if( oMenuCache[ dl.id ] &&  oMenuCache[ dl.id ].dependent == false ){}
        else{collapseAll(dl,dt,dd);}
        expand(dl,dt,dd);
    },
   
    closeDtById : function(sId)
    {
        var dt = document.getElementById(sId);
        if(!dt){return;};
        if(!YUD.hasClass(dt,'a-m-t')){return;};
        var dl = dt.parentNode;
        var dd = getDD(dt);
        if(dl.hasAnimation==null){dl.hasAnimation = 0;};
        if(dl.hasAnimation > 0 ){return;};
        if(!YUD.hasClass(dd,'a-m-d-expand')){return;};
        collapse(dl,dt,dd);
    },
   
   
    setting : function(id,oOptions)
    {   
        if( !oOptions ){return;};
   
        if( typeof(id)!='string' ){return;};
   
        var setMunu = function(dl)
        {   
            dl = dl || this;
            dl.hasAnimation = 0;
            oMenuCache[ dl.id ] =
            {
                element:dl,
                dependent:true,
                onOpen:function(){},
                onClose:function(){},
                seconds:0.5,
                easeOut:true,
                openedIds:[],
                animation:true
            };
            oMenu =  oMenuCache[ dl.id ] ;
           
            if(typeof(oOptions['animation'])=='boolean')
            {
                oMenu['animation'] = !!oOptions['animation'];
               
            };
           
           
            if(typeof(oOptions['dependent'])=='boolean')
            {
                oMenu['dependent'] = !!oOptions['dependent'];
            };
           
            if(typeof(oOptions['easeOut'])=='boolean')
            {
                oMenu['easeOut'] = !!oOptions['easeOut'];
            };
           
            if(typeof(oOptions['seconds'])=='number')
            {
                oMenu['seconds'] = Math.max(0 , oOptions['seconds'] );
            };
           
            if(typeof(oOptions['onOpen'])=='function')
            {
                oMenu['onOpen'] = oOptions['onOpen'];
            };
           
            if(typeof(oOptions['onClose'])=='function')
            {
                oMenu['onClose'] = oOptions['onClose'];
            };
       
            if(oOptions['openedIds'].shift)
            {
                oMenu['openedIds'] = oOptions['openedIds'];
            };
           
           
            for(var i=0;i<oMenu['openedIds'].length;i++)
            {
                var sId = oMenu['openedIds'][i];
                var dt = document.getElementById( sId  );
               
                if(dt && dt.tagName.toUpperCase() == 'DT')
                {
                    var dl = dt.parentNode;
                    var dd = getDD(dt);
                    expand(dl,dt,dd);
                }
                else if(!dt)
                {
                    function onDtAvailable()
                    {
                        var dt = this;
                        if(dt.tagName.toUpperCase() == 'DT')
                        {
                            var dl = dt.parentNode;
                            var dd = getDD(dt);
                            expand(dl,dt,dd);
                        }
                    };
                   
                    YUE.onAvailable(sId,onDtAvailable);
                }          
            };
           
           
        };
       
        if(document.getElementById(id))
        {
            setMunu(document.getElementById(id))
        }
        else
        {   
            YUE.onAvailable(id,setMunu);   
        }
    }
 };//endof api
 
 return oApi;
 
})();


var runOk = 1;
var currentId = 0;
function switchRun(){
  runOk = 1;
}


но явно не хватает знаний, он или выпадает при наведении или при клике.

Как сделать что бы работало и mouseover и click для подменю?
что есть > что нужно

заранее Спасибо (icq:230326500 skype:bug_or Игорь)
Добавить комментарий

1234ru

Цитата:
он или выпадает при наведении или при клике


У меня при наведении работает в обоих случаях.
Как можно осуществить клик без наведения - не представляю.


А вообще для таких (и для многих других) вещей удобнее использовать библиотеку jQuery.
(чтобы её подключить, достаточно в HTML-коде написать

<script type="text/javascript"
src="http://code.jquery.com/jquery-1.4.2.min.js">
</script>


лучше это сделать в теге <head> в основном шаблоне - библиотека может быть нужна часто)

О том, как ей пользоваться, написано во многих местах в
интернете, в том числе на официальном сайте. У нас тут про неё тоже
есть статья.
То, что не убивает нас, делает нас инвалидами.
05.10.2010, 19:11
Ответить
© 2008—2017 webew.ru, связаться: x собака webew.ru
Сайт использует Flede и соответствует стандартам WAI-WCAG 1.0 на уровне A.
Rambler's Top100