Как "подвесить" блок меню на кнопку
 

Добрый день.

К сожалению, знаний не хватает по программированию. Проконсультируйте, пожалуйста, по вопросу, создание мобильного меню для магазина:
Есть сайт магазина, на нем меню - каталог и ссылка на корзину. Каталог слишком большой, не помещается в мобильный экран.
1. Сделали кнопку и ссылку, для этого в index.php шаблона сайта добавили:
<p class="right_menu button br1" onclick="openbox()">каталог</p>
<p class="left_menu button br1"><a href="/cart">корзина</a></p>
2. Сделали стили для кнопки и ссылки:
@media screen and (max-width: 520px) .right_menu { left: -24px; top: 151px; margin: -40px 0 0; z-index: 7000;}
...
Если ширина экрана меньше 520 px, меню каталога не показывается.
Стили устраивают. С сылкой всё нормально, работает как надо. С кнопкой "каталог" проблемы, после его нажатия не выходит меню каталога:
Написали небольшую функцию для показывания модуля каталога и добавили его в index.php шаблона:

<script type="text/javascript">
function openbox(){
document.getElementById('126').style.display='bloc k';
}
</script>
где, 126 - id меню каталога.
Всё равно не срабатывает, что не так делаем?

Подскажите пожалуйста.

gandreyev, в слове «block» пробела не должно быть.

gandreyev,
Если все - как написано, то должно работать.

<div id='126' style='display:none'>Меню каталога</div>
<p class="right_menu button br1" onclick="openbox()">каталог</p>
<script type="text/javascript">
function openbox(){
document.getElementById('126').style.display='block';
}
</script>

Каким образом скрывается меню каталога при маленькой ширине экрана?

Nexus. эти пробелы появляются при непосредственной вставке скриптов в сообщение - без обрамления тегами

Dilettante_Pro, спасибо, буду знать.

Господа, спасибо, что пытаетесь помочь.

1. В слове block ошибки в коде нет. Я в посте неправильно написал. Вот весь кусок:

<p class="right_menu button br1" onclick="openbox('126')">каталог</p>
		<p class="left_menu button br1"><a href="/cart">корзина</a></p>

<script type="text/javascript">
function openbox(id){
	document.getElementById('126').style.display='block';
}
</script>

2. Блок скрываем вот так:

#left {display:none;}

Соттветственно меню каталога в позиции #left

gandreyev, если элемент с id "126" является дочерним для элемента с id "left", то родителя тоже нужно отображать.

Ага, вот может быть. А как же отобразить тогда #left? Точнее узнать его id?

gandreyev, «left» - это и есть ID элемента.

<script type="text/javascript">
function openbox(id){
    document.getElementById(id).style.display='block';
    document.getElementById('left').style.display='block';
}
</script>

Может у меня глаз "замылылся".

Вот модули:


Кнопка:
<p class="right_menu button br1" onclick="openbox('126')">каталог</p>

Вот код полностью:

<script type="text/javascript">
function openbox(id){
	document.getElementById('126').style.display='block';
	document.getElementById('left').style.display='block';
	document.getElementById('tab1').style.display='block';
}
</script>

Там небольшой нюанс есть. Сам каталог состоит из 2 вкладок - "Каталог" и "Авторы". В мобильной версии достаточно просто Каталог.

gandreyev, я, к сожалению, не обладаю способностями распознавать верстку по изображению.