Как сделать выпадающие меню в панели навигации?

Question

[supfiger]

Надо сделать такое меню, чтобы при клике на элементы хедера (зеленый блок) менялся список выпадающего меню.
Меню не совсем выпадающее, но оно отображается всегда, и по умолчанию первый пункт выбран.
Активная вкладка должна отображаться серым цветом.

Еще раз: зеленая панель —навигация, серая панель — "выпадающие" меню.

Comments

[WapSter]

"frontend developer" ты такие вопросы задаешь, что скорее верстальщик который никогда не щупал js... Это же обычные табы на которые куча плагинов сделано, куча готового кода в сети. Я и близко не frontend dev смогу это сделать за минут 5-10 из которых больше на css уйдет.

[supfiger]

хааххах, такие простые задачи выполнить не могу, хотя давно с реактом работаю))

[supfiger]

Пашенька, бывает)

[WapSter]

Danil Zinchenko, столько лапши, что она падает на мой стол. Нашел вот тут твой гитхаб https://github.com/supfiger?tab=repositories и названия репозиториев слегка настораживают

todo-list-pure-js, mobx-react-todo react-homework-task-one

на давно чет вообще не похоже

[supfiger]

WapSter, все написано мной, кроме приложения movies-and-directors: писал по видеоуроку от webdev

[supfiger]

WapSter, больше года)

[supfiger]

WapSter, посмотри историю коммитов, если тебя интересует мой гитхаб и если сомневаешься

[supfiger]

Пашенька, браться за одно слово не очень корректно в данном случае. Будто про все остальное вы забыли)

[supfiger]

Пашенька, первый лайк от меня. У вас я то "вы", то "ты"))

[supfiger]

Пашенька, извиняюсь, мой косяк, перепутал с тем человеком.

Answer 1

[qqFE]

Насколько я понимаю тебе подойдет вариант "табсов".

Статья https://webdesign-master.ru/blog/jquery/2015-03-09...
Видео https://www.youtube.com/watch?v=ec_JGcXQ9yo&featur...

HTML

<div class="wrapper">
	<div class="tabs">
		<span class="tab">Вкладка 1</span>
		<span class="tab">Вкладка 2</span>
		<span class="tab">Вкладка 3</span>
	</div>
	<div class="tab_content">
		<div class="tab_item">Содержимое 1</div>
		<div class="tab_item">Содержимое 2</div>
		<div class="tab_item">Содержимое 3</div>
	</div>
</div>

jQuery

$(".tab_item").not(":first").hide();
$(".wrapper .tab").click(function() {
	$(".wrapper .tab").removeClass("active").eq($(this).index()).addClass("active");
	$(".tab_item").hide().eq($(this).index()).fadeIn()
}).eq(0).addClass("active");

CSS
.wrapper .active { color: red; }