Как сделать такой всплывающий текст?

Question

[Shuboanator]

https://www.choice.studio

На этом сайте при нажатии на меню и наведении на блок расскрывается текст и кнопка подробней, при этом центрирование не ломается. Подскажите как так сделать?

Comments

[dicem]

Ни черта не понял, при наведении на кнопку "меню" не раскрывается никакой текст. При нажатии на него нет ни единой кнопки "Подробнее". Лучше будет если ты скриншотами покажешь какой элемент на сайте тебя интересует.

[Shuboanator]

dicem, ну вот если открыть меню и навести на "Все проекты" всплывет текст и кнопка. Мне это интересно

Answer 1

[dicem]

Вобще запилил без анимации https://jsfiddle.net/cm29kzbg/
Но я наткнулся на шикарный пример без js

Comments

[Кристина]

dicem Зачем здесь эти два отбитых примера? Кто вообще лайки ставит таким ответам... руки нужно отрывать, а не лайкать.

[dicem]

Кристина, ну если ты их не можешь применить в проект или не знаешь как, то видимо отбитый не пример, а твоя голова.

[Кристина]

dicem, Понятно, какой хозяин, такие и примеры.

[dicem]

Кристина, Деточка, первая начала изводиться на говно, другого отношения к себе ждала?

[Кристина]

dicem, Да мне вообще до потолка, что ты там мне говоришь и думаешь, мне больше не нравится, что такие как ты советы дают людям. А другие за деньги такие советы продают на каждом шагу. Как ни посмотришь на вопросы, понимаешь, что они учились у таких же умников как ты.

[dicem]

Кристина, слушай, прмиер рабочий, рабочий, чего тебе не нравится?

Answer 2

[Кристина]

Да хотя бы вот так. https://codepen.io/kris-iris/pen/YJGJJL

А вот тебе с их сайта код поковырять

function first_open_menu(){
	// heigt menu_block_content
	if( menu_block_content_height_first_load == 1){

		// calculate size crop block content height
		menu_block_heading_height = menu_block_heading.getBoundingClientRect().height;
		menu_block_content_height_first_load = 0;

		// crop block content height
		for(i=0; i < menu_block_content.length; i++){
			menu_block_content_height[i] = menu_block_content[i].getBoundingClientRect().height;
			menu_block_content[i].style.height = menu_block_heading_height + 'px';
		}
	}
}


// hover effects menu block
menu_block_1.addEventListener('mouseover', menu_block_1_mouseover);
menu_block_1.addEventListener('mouseout', menu_block_1_mouseout);

menu_block_2.addEventListener('mouseover', menu_block_2_mouseover);
menu_block_2.addEventListener('mouseout', menu_block_2_mouseout);

menu_block_3.addEventListener('mouseover', menu_block_3_mouseover);
menu_block_3.addEventListener('mouseout', menu_block_3_mouseout);

menu_block_4.addEventListener('mouseover', menu_block_4_mouseover);
menu_block_4.addEventListener('mouseout', menu_block_4_mouseout);

function menu_block_1_mouseover(event){ if(stop_function_desktop == 0) return;  menu_block_content[0].style.height = menu_block_content_height[0] + 'px'; }
function menu_block_1_mouseout(event){ if(stop_function_desktop == 0) return; menu_block_content[0].style.height = menu_block_heading_height + 'px'; }

function menu_block_2_mouseover(event){ if(stop_function_desktop == 0) return; menu_block_content[1].style.height = menu_block_content_height[1] + 'px'; }
function menu_block_2_mouseout(event){ if(stop_function_desktop == 0) return; menu_block_content[1].style.height = menu_block_heading_height + 'px'; }

function menu_block_3_mouseover(event){ if(stop_function_desktop == 0) return; menu_block_content[2].style.height = menu_block_content_height[2] + 'px'; }
function menu_block_3_mouseout(event){ if(stop_function_desktop == 0) return; menu_block_content[2].style.height = menu_block_heading_height + 'px'; }

function menu_block_4_mouseover(event){ if(stop_function_desktop == 0) return; menu_block_content[3].style.height = menu_block_content_height[3] + 'px'; }
function menu_block_4_mouseout(event){ if(stop_function_desktop == 0) return; menu_block_content[3].style.height = menu_block_heading_height + 'px'; }

Comments

[Shuboanator]

а можно как то, что бы .menu_wrap была не 50%, а auto?

[dicem]

Shuboanator, можно, сейчас запилю скину тебе, только с твоего позволения с jQuery это запилю

[Кристина]

dicem, Может ещё фреймворк подтянуть из-за этой анимации?)

[dicem]

Кристина, хз к чему это, а вобще да, вполне можно было бы рипнуть все с сайта

[Shuboanator]

Кристина, просто проблема в том, что если ставить высоту не 50%, а авто, то анимация проходит не плавно. Как данный момент можно исправить?

[Кристина]

Shuboanator, Если говорить о css, то никак, transition не работает на auto. Можно тысячу способов придумать, если немного подумать. Если на js делать, то тут всё проще. Но такие вещи делать на js, странно. Я просто увидела пост и сразу самый простой вариант за минуту написала. Принцип же понятен.

Если прям никак не придумывается, пиши, я тебе самое простое готовое решение напишу :)

[Shuboanator]

Кристина, ну вот на сайте с примера с помощью js. Буду благодарен, если подскажете как реализовать с помощью jQwery. Или вообще туториал какой нибудь по jq на эту тему) Заранее спасибо)

[Shuboanator]

Кристина, Просто я перфекционист и задать высоту 50 и потом крутить вертеть 1000 раз не хочу)