Превратить меню в раскрывающееся по клику

Главные вкладки

Аватар пользователя Runica Runica 15 июня 2016 в 10:33

Возникла проблема отображения содержимого меню сайта на планшетах и других сенсорных устройствах. А точней: меню раскрывается при наведении на пункт меню и закрывается при отведении. Нужно сделать, чтобы меню раскрывалось и закрывалось при клике. Не сильна в программировании, сама не справляюсь, буду благодарна за помощь.
CSS темы и javascript модуля прилагаю. Если надо что-то еще скажите.

CSS:

/*** MEGAMENU STYLES ***/

.no-touch #mainmenu li:hover > .dropdown,
.touch #mainmenu li.js-hover > .dropdown
{
    display: block;
}

.touch #mainmenu li.full-width > .top-heading {
  pointer-events: none;
}

.no-touch #mainmenu li:hover, .touch #mainmenu li.js-hover
{
   background: #dc5562;
   cursor: pointer;
}

 #topbottom, #topbottom-front {
    left: 0px;
    top: 435px;
    position: absolute;
        z-index: 1;
        height: 40px;
 }
 
 #topbottom {
    top: 150px;
 }
 
 #megamenu-menu-mainmenu {
        padding-top: 12px;
        padding-left: 0px;
 }
 
 
 .megamenu-skin-itas2 a,
 .megamenu-skin-itas2 li a,
 .megamenu-skin-itas2 li a.active,
 .megamenu-skin-itas2 a:hover,
 .megamenu-skin-itas2 li.hovering a {
        text-decoration:none;
}

 .megamenu-skin-itas2 .megamenu-parent-title a {
        padding:11px 17px;
        margin:10px 6px 0 0;
        font: 11px Arial;
        font-weight:bold;
        text-transform:uppercase;
        color: #8e00fc;
        line-height:1em;
        /***background-image:url(arrow-inactive.png);
        background-repeat:no-repeat;***/

}

.megamenu-skin-itas2 .megamenu-parent-title a,
.megamenu-skin-itas2 .megamenu-parent-title a:hover {
        color: #fff;
}

.megamenu-skin-itas2 .megamenu-bin a:hover {
        color: #f00;
}
 
.megamenu-skin-itas2 li.hovering .megamenu-parent-title a {
        color:#777;
        background-color:#fff;
        /*** background-image:url(arrow-active.png);***/
        -moz-border-radius:2px;
        -webkit-border-radius:2px;
        border-radius:2px;
}

 .megamenu-skin-itas2 .megamenu-bin  {
        z-index: -1;
        padding: 15px;
        background-color: #fff;
        margin-top: 11px;
        //margin-left: -20px;
        width: 960px !important;
        left: 0px !important;
        display: block;
        -moz-box-shadow: 0px 0px 10px #555;
        -webkit-box-shadow: 0px 0px 10px #555;
        box-shadow: 0px 0px 10px #555;
 }

 .megamenu-menu .megamenu-parent {
    position: static;
  }

 .megamenu-skin-itas2 .megamenu-slot {
        list-style-type: none;
        width: 178px;
        border-left:1px dotted #bbbbbb;
        padding-left: 10px;
 }

 .megamenu-skin-itas2 .megamenu-slot ul.megamenu-items {
        margin-left: 20px;
 }

 .megamenu-skin-itas2, .megamenu-slot.first {
        padding-right: 0;
        border-left:none
 }

 .megamenu-skin-itas2 .megamenu-slot-title a {
        color:#888888;
        font-weight:bold;
        text-transform:uppercase;
}
.megamenu-skin-itas2 .megamenu-items li {
        list-style:outside url("../images/small_marker.png");
        /***list-style:inside url(arrow.png);***/
}
/*** END OF MEGAMENU STYLES ***/

JAVASCRIPT:

$(document).ready(function() {

        var timeout                     = 500;
        var sizewait            = 250;
        var hoverwait           = 400;
        var hovertimer          = null;
        var sizetimer           = null;
        var closetimer          = null;
        var hoverParent         = null;
        var hoverBin            = null;
        var hoverSlots          = null;
        var megaSlots           = null;
        var megaParents         = null;
        var hideOffset          = -9000;

        megaParents = $('.megamenu-menu').find('.megamenu-parent');
        var megaParentTitles = $('.megamenu-menu').find('.megamenu-parent-title');
        var megaBins = $('.megamenu-menu').find('.megamenu-bin');
        var oldParentIdx = -1;
        var hoverParentIdx = -2;
        var clickParentIdx = -2;

        megaBins.css('top', hideOffset);
 

        // Открытие по клику!
  /*$(function(){
    $('#top-nav span').click(function(){
        divTrigger = $('#top-nav span').index(this);
        thisMegaMenu = $('.megamenu:eq('+divTrigger+')');
        $('.megamenu').slideUp(200);
        megamenu_display();
        if(thisMegaMenu.is(":not(':visible')")){
        thisMegaMenu.slideDown(200);
        }
});
    $('.megamenu').append("<a href=# id=closeButton>x</a>");
    $('#closeButton').live('click',function(){
        thisMegaMenu.slideUp(200);
        megamenu_display();
    });
});*/

 
  function megamenu_open(){
                megamenu_canceltimer();

                if ($(this).hasClass('megamenu-parent-title')) {
                        hoverParentIdx = megaParentTitles.index($(this));
                }
                else if ($(this).hasClass('megamenu-bin')) {
                        hoverParentIdx = megaParents.index($(this).parents('.megamenu-parent'));
                }

                hoverParent = megaParents.eq(hoverParentIdx);

                if (hoverParentIdx != oldParentIdx) {
                        megamenu_close();
                        megamenu_hovertimer();
                } else {
                        megamenu_display();
                }
        }

        function megamenu_display() {
                if (hoverParent) {
                        // If the display doesn't have hover yet - trigger event
                        if (!hoverParent.hasClass('hovering')) {
                                hoverParent.trigger('megamenu_open');
                        }
                        hoverParent.addClass('hovering');
                        hoverBin = hoverParent.find('.megamenu-bin');
                        //display position
                        hoverBin.css('top', 'auto');
        //display position end
                }
        }

        function megamenu_close(){
                if (hoverParent) {
                        oldParentIdx = $('.megamenu-parent').index(hoverParent);
                }
                for ( var i=0 ; i < megaParents.length ; i++ ) {
                        megaParents.trigger('megamenu_close');
                        megaParents.eq(i).removeClass('hovering');
                }
                if(hoverBin) hoverBin.css('top', hideOffset);
        }

        function megamenu_closeAll(){
                if(hoverBin) hoverBin.css('top', hideOffset);
                for ( var i=0 ; i < megaParents.length ; i++ ) {
                        megaParents.trigger('megamenu_close');
                        megaParents.eq(i).removeClass('hovering');
                }
                oldParentIdx = -1;
        }

        function megamenu_stopPropagation(event){
                event.stopPropagation();
        }

        function megamenu_timer(){
                megamenu_canceltimer();
                megamenu_cancelhovertimer();
                closetimer = window.setTimeout(megamenu_closeAll, timeout);
        }

        function megamenu_canceltimer(){
                if (closetimer) {
                        window.clearTimeout(closetimer);
                        closetimer = null;
                }
        }

        function megamenu_hovertimer(){
                megamenu_cancelhovertimer();
                hovertimer = window.setTimeout(megamenu_display, hoverwait);
        }

        function megamenu_cancelhovertimer(){
                if (hovertimer) {
                        window.clearTimeout(hovertimer);
                        hovertimer = null;
                }
        }

        function megamenu_sizetimer(){
                // waits to resize on initial call to accomodate browser draw
                sizetimer = window.setTimeout(megamenu_sizer, sizewait);
        }

        function megamenu_sizer(){

                for ( var k=0 ; k < megaBins.length ; k++ ) {

                        // resets to bin sizes and position before sizing
                        megaBins.eq(k).css('left', 0 + 'px');
                        megaBins.eq(k).css('width', 0 + 'px');

                        var megaSlots = megaBins.eq(k).find('.megamenu-slot');

                        // auto bin width start

                        var i = 0;

                        if(megaBins.eq(k).hasClass('megamenu-slots-columnar')) {
                                var slotTotalWidth = 0;
                                for ( i=0 ; i < megaSlots.length ; i++ ) {

                                        slotTotalWidth += megaSlots.eq(i).outerWidth(true);

                                        if (slotTotalWidth > $(window).width()) {
                                                slotTotalWidth = 0;
                                                for (var j=0 ; j < i ; j++) {
                                                        slotTotalWidth += megaSlots.eq(i).outerWidth(true);
                                                }
                                                break;
                                        }
                                }
                                megaBins.eq(k).css( 'width' , slotTotalWidth);
                                megaBins.eq(k).width(slotTotalWidth);
                        }
                        else {
                                //set bin width for vertical slots
                                megaBins.eq(k).css( 'width' , megaSlots.eq(0).outerWidth(true) );
                        }
                        // auto bin width end

                        // off-page shift start  
                        var edgeOverlap = ($(window).width() - (megaBins.eq(k).offset().left + megaBins.eq(k).outerWidth(true)));

                        if (edgeOverlap < 0) {
                                megaBins.eq(k).css('left',(edgeOverlap) + 'px');
                        }
                // off-page shift end
       
                }
        }

        // Open Mega Menu Function - bound
        function megamenu_open_progress() {
                if ($(this).find('ul.megamenu-bin').get(0)) {
                        $(this).find('h2').addClass('megamenu-active');
                }
        }
        function megamenu_close_progress() {
                $(this).find('h2').removeClass('megamenu-active');
        }

        $('.megamenu-parent').bind('megamenu_open', megamenu_open_progress);
        $('.megamenu-parent').bind('megamenu_close', megamenu_close_progress);

        $('.megamenu-parent-title').bind('mouseover', megamenu_open);
        $('.megamenu-parent-title').bind('mouseout', megamenu_timer);

        $('.megamenu-bin').bind('mouseover', megamenu_open);
        $('.megamenu-bin').bind('mouseout', megamenu_timer);

        $("body").bind('click', megamenu_closeAll);
        $(".megamenu-menu").bind('click', megamenu_stopPropagation);

        $(window).bind('resize', megamenu_sizer);
        megamenu_sizetimer();
});

HTML:

<!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>  
    <?php print $head ?>  
    <title><?php print $head_title ?></title>
    <link href="http://itas.irk.ru/rss.xml" title="Официальный сайт Иркутского Техникума Архитектуры и Строительства г. Иркутска RSS" type="application/rss+xml" rel="alternate"/>    
   
    <?php print $styles ?>
    <?php print $scripts ?>

<script type="text/javascript">
$(document).ready(function() {

$('a.tooltip-basic').cluetip({

splitTitle: '|',
sticky: true,
closePosition: 'title',
dropShadow: true,
positionBy: 'mouse',
closeText: 'Закрыть'
});

$('a.tooltip-title').cluetip({
splitTitle: '|',
dropShadow: true,
positionBy: 'mouse'
});

$('a.tooltip-wide').cluetip({
sticky: true,
closePosition: 'title',
width: '1024px',
closeText: 'Закрыть'
});
});

</script>

<!--[if lt IE 7]>
<![if gte IE 5.5]>
<script type="text/javascript" src="<?php print base_path() . path_to_theme() ?>/js/fixpng.js"></script>
<style type="text/css">
.iePNG, img { filter:expression(fixPNG(this)); }
.iePNG A { position: relative; }/* стиль для нормальной работы ссылок в элементах с PNG-фоном */
</style>
<![endif]>
<![endif]-->
   
</head>
   <body onload="javascript: var wowSlider=new WowSlider({effect:'squares',prev:'',next:'',duration:50*100,delay:60*100,outWidth:717,outHeight:285,width:717,height:285,caption:true,controls:true,autoPlay:true,bullets:true});">
    <div id="topwrap">
    <div id="topwrap1">    
        <div id="top-front">
            <div id="header">
                <h1>Иркутский Техникум<br>Архитектуры и Строительства</h1>
                <span><a href="/" title="На главную">На главную</a></span>
            </div>
           
            <div id="mainmenu">

            <?php print $main_menu; ?>                          

            </div>

                       
                        <?php print $header; ?>
   
            <div id="topmenu">
           
            <?php print $top_right; ?>                          
                       
            </div>

                       
            <div id="topbottom-front">

            <?php  print $top_bottom; ?>

            </div>
           
            <div id="search-front">
           
            <?php print $top_search; ?>
           
            </div>
           
        </div>
    </div>
    </div>

 <!--   <div id="banner55">
   </div>-->

    <div id="mainwrap">
        <div id="main">
            <div id="content">

          <?php print $before_content; ?>            
          <?php print $breadcrumb; ?>
          <?php if ($tabs): print '<div id="tabs-wrapper" class="clear-block">'; endif; ?>
          <?php if ($title): print '<h2'. ($tabs ? ' class="with-tabs"' : '') .'>'. $title .'</h2>'; endif; ?>
          <?php if ($tabs): print '<ul class="tabs primary">'. $tabs .'</ul></div>'; endif; ?>
          <?php if ($tabs2): print '<ul class="tabs secondary">'. $tabs2 .'</ul>'; endif; ?>
          <?php if ($show_messages && $messages): print $messages; endif; ?>
          <?php print $help; ?>
          <?php print $content; ?>        
          <?php print $under_content; ?>            
           
           
            </div>
            <div id="rcol">
           
            <?php print $right; ?>
                       
            </div>    
            <div class="clear"></div>        
        </div>    
    </div>

   
    <div id="colswrap">
    <div id="colswrap1">    
        <div id="cols">
            <div id="colslogo">
                <div id="col1" class="cols">
               
                    <?php print $col1; ?>
                   
                </div>

                <div id="col2" class="cols">
               
                    <?php print $col2; ?>

                </div>

                <div id="col3" class="cols">
               
                    <?php print $col3; ?>

           
                </div>

                <div id="col4" class="cols">
               
                    <?php print $col4; ?>
               
                </div>
                <div class="clear"></div>

            </div>    
        </div>
    </div>
    </div>
       

    <div id="footwrap">  
        <div id="foot">
       
            <?php print $footer; ?>
                       
            <div id="copy">
                <?php print $footer_message; ?>            
            </div>          
        </div>
    </div>
   
    <?php print $closure; ?>

    <div id="vk">    
    <a href="http://vk.com/itas_ru" title="Вступай в нашу группу ВКОНТАКТЕ!"></a>
    </div>
   
   </body>
</html>

Комментарии

Аватар пользователя Runica Runica 17 июня 2016 в 10:39

Спасибо! То есть вы предлагаете полностью сменить меню?
Оно нас устраивает, единственно, надо сделать чтобы оно раскрывалось по клику.