Возникла проблема отображения содержимого меню сайта на планшетах и других сенсорных устройствах. А точней: меню раскрывается при наведении на пункт меню и закрывается при отведении. Нужно сделать, чтобы меню раскрывалось и закрывалось при клике. Не сильна в программировании, сама не справляюсь, буду благодарна за помощь.
CSS темы и javascript модуля прилагаю. Если надо что-то еще скажите.
CSS:
.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:
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:
<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 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>
Комментарии
http://www.w3schools.com/css/css_dropdowns.asp
http://cssmenumaker.com/blog/10-free-html-drop-down-menu-navigations
Спасибо! То есть вы предлагаете полностью сменить меню?
Оно нас устраивает, единственно, надо сделать чтобы оно раскрывалось по клику.
Bootstrap Single button http://getbootstrap.com/components/#btn-dropdowns-single
Для меня это проблема, для вас может быть решением http://www.drupal.ru/node/128973