Как сделать меню вкладками как у МВидео?

Ссылка скопирована
CSS HTML PHP
7 февраля 2026 1 ответ

Посоветуйте плагин для Wordpress для меню вкладками, как у МВидео, которое открывается при клике на кнопку Каталог.
https://www.mvideo.ru/

Дополнительно:

нет такого, верстай ручками

Ответы:

Это делается с помощью т.н. мега меню.

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Роман IT Ответ

Для создания меню вкладками как у МВидео, вам понадобится использовать HTML, CSS и возможно JavaScript. Ниже приведен пример кода на HTML и CSS, который поможет вам создать подобное меню:

HTML:

<div class="tabs">
  <button class="tablink">Tab 1</button>
  <button class="tablink">Tab 2</button>
  <button class="tablink">Tab 3</button>
</div>
 
<div id="tab1" class="tabcontent">
  Content for Tab 1...
</div>
 
<div id="tab2" class="tabcontent">
  Content for Tab 2...
</div>
 
<div id="tab3" class="tabcontent">
  Content for Tab 3...
</div>

<div class="tabs"> <button class="tablink">Tab 1</button> <button class="tablink">Tab 2</button> <button class="tablink">Tab 3</button> </div> <div id="tab1" class="tabcontent"> Content for Tab 1... </div> <div id="tab2" class="tabcontent"> Content for Tab 2... </div> <div id="tab3" class="tabcontent"> Content for Tab 3... </div>

CSS:

.tabs {
  display: flex;
}
 
.tablink {
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  padding: 10px 15px;
  cursor: pointer;
}
 
.tabcontent {
  display: none;
  padding: 20px;
}
 
.tabcontent.active {
  display: block;
}

.tabs { display: flex; } .tablink { background-color: #f1f1f1; border: 1px solid #ccc; padding: 10px 15px; cursor: pointer; } .tabcontent { display: none; padding: 20px; } .tabcontent.active { display: block; }

JavaScript (для переключения вкладок):

function openTab(tabName) {
  var i, tabcontent, tablinks;
 
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i &lt; tabcontent.length; i++) {
    tabcontent[i].style.display = &quot;none&quot;;
  }
 
  tablinks = document.getElementsByClassName(&quot;tablink&quot;);
  for (i = 0; i &lt; tablinks.length; i++) {
    tablinks[i].classList.remove(&quot;active&quot;);
  }
 
  document.getElementById(tabName).style.display = &quot;block&quot;;
  event.currentTarget.classList.add(&quot;active&quot;);
}

function openTab(tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i &lt; tabcontent.length; i++) { tabcontent[i].style.display = &quot;none&quot;; } tablinks = document.getElementsByClassName(&quot;tablink&quot;); for (i = 0; i &lt; tablinks.length; i++) { tablinks[i].classList.remove(&quot;active&quot;); } document.getElementById(tabName).style.display = &quot;block&quot;; event.currentTarget.classList.add(&quot;active&quot;); }

Вы можете дополнить данный код своими стилями и функционалом, чтобы сделать меню вкладками более похожим на то, что использует МВидео. Также не забудьте настроить содержимое вкладок (Content for Tab 1, Content for Tab 2, Content for Tab 3) под ваши нужды.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

Веб-разработка Какие особенности разработки сайтов под тор/даркнет? 1 ответ Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ Google Как подтвердить аккаунт Google? 1 ответ