Есть адаптивное меню, которое отлично работает, за исключением подменю (Квартиры, VIP) где пункт подменю раскрывается по hover, я же хочу сделать с помощью js события click. Но почему-то не выходит... Кто может помочь или подсказать что я сделал не правильно в коде, или что не написал? Короче где тупанул? Спасибо.
<div id="topMenu" class="pagemenucontainer_open"></div>
$( document ).ready(function() {
$("#topMenu").click(function(){
$("#pagemenucontainer").slideToggle(500);
});
var count = 0;
$("#mli_open").parent(".mli_toggle").parent(".mli").click(function(){
count += 1;
if (count==1) {
//$(this).children("a").removeAttr("href");
}
else {
//$(this).children("a").attr("href", "<?php echo $category['href']; ?>");
//$(this).children("a").attr("href", "<?php if($category){ echo $category['href'];} ?>");
}
// $(".mli>a").removeAttr("href");
//$('.mli>.mli_toggle').slideToggle(500);
//$(this).addClass("mli_a");
});
});
также приведу пример кода PHP, который отвечает за меню:
<div id="pagemenucontainer" style=" background-color: #FFF; padding- bottom: 1px; margin-bottom: 10px;">
<div class="container">
<?php if ($categories) { ?>
<div id="menu">
<ul>
<li><a href="/"><?php echo $text_home; ?></a></li>
<?php foreach ($categories as $category) { ?>
<li class="mli" ><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
<?php if ($category['children']) { ?>
<div class="mli_toggle">
<?php for ($i = 0; $i < count($category['children']);) { ?>
<ul id="mli_open">
<?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
<?php for (; $i < $j; $i++) { ?>
<?php if (isset($category['children'][$i])) { ?>
<li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>
<?php } ?>
<?php } ?>
</ul>
<?php } ?>
</div>
<?php } ?>
</li>
<?php } ?>
<li><a href="http://royal-apartment.kiev.ua/index.php?route=information/contact">Инфо</a></li>
Ссылка на сам проект (сразу сообщаю что ПКМ не работает, смотреть только через консоль разработчика в браузере.)
код CSS (меню)
/* menu */
#menu {
height: 37px;
padding: 0px 5px;
margin-bottom: 7px;
margin-left: 25px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu > ul > li {
position: relative;
float: left;
z-index: 20;
padding: 6px 5px 5px 0px;
}
#menu > ul > li:hover {
}
#menu > ul > li > a {
font-size: 16px;
color: #2c3e50;
border-right: 1px solid #2c3e50;
text-transform: uppercase;
display: block;
padding: 6px 15px;
margin-bottom: 5px;
z-index: 6;
position: relative;
}
#menu > ul > li:last-child > a, #menu > ul > li:last-child:hover > a {
border-right: none;
}
#menu > ul > li:hover > a {
color: #e15153;
text-decoration: underline;
border-right: 1px solid #e15153;
}
#menu > ul > li > div {
display: none;
background: #FFFFFF;
position: absolute;
z-index: 5;
padding: 5px;
border: 1px solid #000000;
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-khtml-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
background: url('../image/menu.png');
}
#menu > ul > li:hover > div {
display: table;
}
#menu > ul > li > div > ul {
display: table-cell;
}
#menu > ul > li ul + ul {
padding-left: 20px;
}
#menu > ul > li ul > li > a {
text-decoration: none;
padding: 4px;
color: #FFFFFF;
display: block;
white-space: nowrap;
min-width: 120px;
}
#menu > ul > li ul > li > a:hover {
background: #000000;
}
#menu > ul > li > div > ul > li > a {
color: #FFFFFF;
padding-left: 10px;
}
@media screen and (max-width: 500px)
#menu > ul > li > div {
position: relative;
width: 95%;
margin-left: 1% !important;
background: #919191 !important;
border: 1px solid #919191;
}