Раскрывающееся контактное меню

Пример можно увидеть в правом нижнем углу страницы

HTML:

<div class="contact-fab">
	<div class="fab-children" id="floatingButtons">
		<a href="#phone" 
		class="fab-child phone" 
		data-tooltip="Позвонить +7 (000) 000-00-00">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M497.39 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.66 370.66 0 0 1 130.6 204.11l60.6-49.6a23.94 23.94 0 0 0 6.9-28l-48-112A24.16 24.16 0 0 0 122.6.61l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.29 24.29 0 0 0-14.01-27.6z"/></svg>
		</a>
		<a href="#telegram" 
		class="fab-child telegram" 
		data-tooltip="Написать в Telegram"
		target="_blank" 
		rel="noopener noreferrer">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M446.7 98.6l-67.6 318.8c-5.1 22.5-18.4 28.1-37.3 17.5l-103-75.9-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9 190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8 284 16.2 252.2c-22.1-6.9-22.5-22.1 4.6-32.7L418.2 66.4c18.4-6.9 34.5 4.1 28.5 32.2z"/></svg>
		</a>
		<a href="#max" 
		class="fab-child max" 
		data-tooltip="Написать в Max"
		target="_blank" 
		rel="noopener noreferrer">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320" width="512" height="512">
				<path fill-rule="evenodd" clip-rule="evenodd" d="M164.0085602,318.8161011 c-31.5135651,0-46.1585617-4.6004944-71.614769-23.002594c-16.1018295,20.7023315-67.0909348,36.8808594-69.3145142,9.2010498 c0-20.7790222-4.6005192-38.337677-9.8144436-57.5065155C7.054132,223.8920135,0,197.5923615,0,159.484726 C0,68.4710846,74.6817856,0,163.1651459,0c88.5600128,0,157.9512177,71.8448029,157.9512177,160.3281403 C321.4136047,247.443161,251.1228333,318.3513794,164.0085602,318.8161011z M165.3120422,78.6689148 c-43.0915375-2.2235794-76.6753464,27.6031265-84.112854,74.3750916 c-6.1340332,38.7210541,4.7538681,85.8764038,14.0315857,88.3300018 c4.4471664,1.0734558,15.6417694-7.9742432,22.6192245-14.9516907 c11.5375748,7.9704437,24.9729691,12.7574768,38.9510727,13.8782349 c44.6499329,2.1477356,82.80159-31.8444214,85.7997131-76.4453125c1.7453156-44.6953049-32.6325836-82.551918-77.2887573-85.109642 L165.3120422,78.6689148z"/>
			</svg>
		</a>
	</div>
	<div class="fab-main" id="mainButton" data-tooltip="Открыть контакты">
		<svg class="envelope-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
			<path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"/>
		</svg>
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/></svg>
	</div>
</div>

<a href="#phone"

class="fab-child phone"

data-tooltip="Позвонить +7 (000) 000-00-00">

</a>

<a href="#telegram"

class="fab-child telegram"

data-tooltip="Написать в Telegram"

target="_blank"

rel="noopener noreferrer">

</a>

<a href="#max"

class="fab-child max"

data-tooltip="Написать в Max"

target="_blank"

rel="noopener noreferrer">

</svg>

</a>

</div>

</svg>

</div>

CSS:

/* Основной контейнер */
.contact-fab * {
	box-sizing: border-box;
}
.contact-fab {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 1000;
	--button-size: 64px;
	--icon-size: 28px;
}
/* Главная кнопка */
.fab-main {
	width: var(--button-size);
	height: var(--button-size);
	border-radius: 50%;
	background: linear-gradient(135deg, #5f9dd2 0%, #337AB7 100%);
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	z-index: 2;
	border: 3px solid white;
}
.fab-main:hover {
	transform: scale(1.1);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
/* Подсказка */
.fab-main::before,
.fab-child::before {
	content: attr(data-tooltip);
	position: absolute;
	right: calc(var(--button-size) + 10px);
	background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
	color: white;
	padding: 8px 15px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	will-change: transform;
}
.fab-main::after,
.fab-child::after {
	content: '';
	position: absolute;
	right: calc(var(--button-size) + 4px);
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 6px solid #2d3748;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}
.fab-main:hover::before,
.fab-main:hover::after,
.fab-child:hover::before,
.fab-child:hover::after {
	opacity: 0.8;
}
/* Иконка главной кнопки - конверт */
.fab-main svg {
	width: var(--icon-size);
	height: var(--icon-size);
	transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
	fill: white;
	position: absolute;
}
/* Конверт (обычное состояние) */
.fab-main .envelope-icon {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}
/* Крестик (скрыто в обычном состоянии) */
.fab-main .close-icon {
	opacity: 0;
	transform: scale(0) rotate(45deg);
}
/* Анимация при открытии */
.fab-main.active .envelope-icon {
	opacity: 0;
	transform: scale(0) rotate(-45deg);
}
.fab-main.active .close-icon {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}
/* Контейнер дочерних кнопок */
.fab-children {
	position: absolute;
	bottom: calc(var(--button-size) + 15px);
	right: 0;
	display: flex;
	flex-direction: column;
	gap: 15px;
	opacity: 0;
	transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
	pointer-events: none;
	z-index: 1;
}
.fab-children.active {
	opacity: 1;
	pointer-events: all;
}
/* Дочерние кнопки */
.fab-child {
	width: var(--button-size);
	height: var(--button-size);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) var(--delay), box-shadow 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0s;           
	position: relative;
	border: 3px solid white;
	transform: translateY(200px) scale(2); 
	text-decoration: none;
	opacity: 0;
}
.fab-children.active .fab-child {
	transform: translateY(0) scale(1);
	opacity: 1;
}
/* Просто задержки для всей анимации */
.fab-child:nth-child(1) { --delay: 0.2s; }
.fab-child:nth-child(2) { --delay: 0.1s; }
.fab-child:nth-child(3) { --delay: 0s; }
.fab-children.active .fab-child:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
/* Иконки дочерних кнопок */
.fab-child svg {
	width: var(--icon-size);
	height: var(--icon-size);
	fill: white;
	transition: 0.5s;
	will-change: transform;
}      
.fab-children.active .fab-child:hover svg {
	transform: scale(1.1);
}
/* Цвета кнопок */
.fab-child.phone {
	background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
}
.fab-child.telegram {
	background: linear-gradient(135deg, #2CA9DC 0%, #1C7EB6 100%);
}
.fab-child.max {
	background: linear-gradient(135deg, #3E5CFC 0%, #8043D9 100%);
}
/* Адаптивность */
@media (max-width: 768px) {
	.contact-fab {
		--button-size: 60px;
		--icon-size: 24px;
		bottom: 15px;
		right: 15px;
	}           
	.fab-children {
		bottom: calc(var(--button-size) + 10px);
		gap: 10px;
	}
}
@media (max-width: 480px) { 
	.contact-fab {
		--button-size: 55px;
		--icon-size: 22px;
		bottom: 10px;
		right: 10px;
	}           
	.fab-main::before,
	.fab-child::before {
		font-size: 13px;
		padding: 6px 12px;
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

/* Основной контейнер */

.contact-fab * {

box-sizing: border-box;

}

.contact-fab {

position: fixed;

bottom: 20px;

right: 20px;

z-index: 1000;

--button-size: 64px;

--icon-size: 28px;

}

/* Главная кнопка */

.fab-main {

width: var(--button-size);

height: var(--button-size);

border-radius: 50%;

background: linear-gradient(135deg, #5f9dd2 0%, #337AB7 100%);

display: flex;

justify-content: center;

align-items: center;

box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

cursor: pointer;

transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

position: relative;

z-index: 2;

border: 3px solid white;

}

.fab-main:hover {

transform: scale(1.1);

box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);

}

/* Подсказка */

.fab-main::before,

.fab-child::before {

content: attr(data-tooltip);

position: absolute;

right: calc(var(--button-size) + 10px);

background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);

color: white;

padding: 8px 15px;

border-radius: 8px;

font-size: 14px;

font-weight: 500;

white-space: nowrap;

opacity: 0;

transition: opacity 0.3s ease;

pointer-events: none;

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

will-change: transform;

}

.fab-main::after,

.fab-child::after {

content: '';

position: absolute;

right: calc(var(--button-size) + 4px);

width: 0;

height: 0;

border-top: 6px solid transparent;

border-bottom: 6px solid transparent;

border-left: 6px solid #2d3748;

opacity: 0;

transition: opacity 0.3s ease;

pointer-events: none;

}

.fab-main:hover::before,

.fab-main:hover::after,

.fab-child:hover::before,

.fab-child:hover::after {

opacity: 0.8;

}

/* Иконка главной кнопки - конверт */

.fab-main svg {

width: var(--icon-size);

height: var(--icon-size);

transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

fill: white;

position: absolute;

}

/* Конверт (обычное состояние) */

.fab-main .envelope-icon {

opacity: 1;

transform: scale(1) rotate(0deg);

}

/* Крестик (скрыто в обычном состоянии) */

.fab-main .close-icon {

opacity: 0;

transform: scale(0) rotate(45deg);

}

/* Анимация при открытии */

.fab-main.active .envelope-icon {

opacity: 0;

transform: scale(0) rotate(-45deg);

}

.fab-main.active .close-icon {

opacity: 1;

transform: scale(1) rotate(0deg);

}

/* Контейнер дочерних кнопок */

.fab-children {

position: absolute;

bottom: calc(var(--button-size) + 15px);

right: 0;

display: flex;

flex-direction: column;

gap: 15px;

opacity: 0;

transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

pointer-events: none;

z-index: 1;

}

.fab-children.active {

opacity: 1;

pointer-events: all;

}

/* Дочерние кнопки */

.fab-child {

width: var(--button-size);

height: var(--button-size);

border-radius: 50%;

display: flex;

justify-content: center;

align-items: center;

box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

cursor: pointer;

transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) var(--delay), box-shadow 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0s;

position: relative;

border: 3px solid white;

transform: translateY(200px) scale(2);

text-decoration: none;

opacity: 0;

}

.fab-children.active .fab-child {

transform: translateY(0) scale(1);

opacity: 1;

}

/* Просто задержки для всей анимации */

.fab-child:nth-child(1) { --delay: 0.2s; }

.fab-child:nth-child(2) { --delay: 0.1s; }

.fab-child:nth-child(3) { --delay: 0s; }

.fab-children.active .fab-child:hover {

box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);

}

/* Иконки дочерних кнопок */

.fab-child svg {

width: var(--icon-size);

height: var(--icon-size);

fill: white;

transition: 0.5s;

will-change: transform;

}

.fab-children.active .fab-child:hover svg {

transform: scale(1.1);

}

/* Цвета кнопок */

.fab-child.phone {

background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);

}

.fab-child.telegram {

background: linear-gradient(135deg, #2CA9DC 0%, #1C7EB6 100%);

}

.fab-child.max {

background: linear-gradient(135deg, #3E5CFC 0%, #8043D9 100%);

}

/* Адаптивность */

@media (max-width: 768px) {

.contact-fab {

--button-size: 60px;

--icon-size: 24px;

bottom: 15px;

right: 15px;

}

.fab-children {

bottom: calc(var(--button-size) + 10px);

gap: 10px;

}

@media (max-width: 480px) {

.contact-fab {

--button-size: 55px;

--icon-size: 22px;

bottom: 10px;

right: 10px;

}

.fab-main::before,

.fab-child::before {

font-size: 13px;

padding: 6px 12px;

}

Переменные:

--button-size - размер кнопок
--icon-size - размер иконок

JS:

document.addEventListener('DOMContentLoaded', function() {
	const mainButton = document.getElementById('mainButton');
	const floatingButtons = document.getElementById('floatingButtons');
	let isOpen = false;
	function toggleButtons() {
		isOpen = !isOpen;
		floatingButtons.classList.toggle('active', isOpen);
		mainButton.classList.toggle('active', isOpen);               
		if (isOpen) {
			mainButton.setAttribute('data-tooltip', 'Закрыть контакты');
			} else {
			mainButton.setAttribute('data-tooltip', 'Открыть контакты');
		}
	}
	mainButton.addEventListener('click', function(e) {
		e.stopPropagation();
		toggleButtons();
	});
	document.addEventListener('click', function(e) {
		if (isOpen && !e.target.closest('.contact-fab')) {
			toggleButtons();
		}
	});
	document.addEventListener('keydown', function(e) {
		if (isOpen && e.key === 'Escape') {
			toggleButtons();
		}
	});
});

document.addEventListener('DOMContentLoaded', function() {

const mainButton = document.getElementById('mainButton');

const floatingButtons = document.getElementById('floatingButtons');

let isOpen = false;

function toggleButtons() {

isOpen = !isOpen;

floatingButtons.classList.toggle('active', isOpen);

mainButton.classList.toggle('active', isOpen);

if (isOpen) {

mainButton.setAttribute('data-tooltip', 'Закрыть контакты');

} else {

mainButton.setAttribute('data-tooltip', 'Открыть контакты');

}

mainButton.addEventListener('click', function(e) {

e.stopPropagation();

toggleButtons();

});

document.addEventListener('click', function(e) {

if (isOpen && !e.target.closest('.contact-fab')) {

toggleButtons();

}

});

document.addEventListener('keydown', function(e) {

if (isOpen && e.key === 'Escape') {

toggleButtons();

}

});

HTML:

CSS:

JS:

Смотрите также:

Добавить комментарий:

Комментарии: