Overlay alt

V248-08

Overlay alt is een alternatieve overlay menu. Het geeft standaard de contact gegevens weer en behoud het de menu balk bovenin de pagina.

Het menu heeft de mogelijkheid om tot drie verschillende menu's naast elkaar in te laden.

Hoe te gebruiken?

Voeg in de config onder de optie navbar.style "overlay-alt" in om het menu te gaan gebruiken.

Standaard is er een animatie meegeleverd die het van links boven in laadt schuiven. Hierbij is gebruik gemaakt van keyframes waardoor het makkelijk aangepast kan worden naar elke situatie.

Verder is er ook de mogelijkheid om gemakkelijk een logo to tonen op de achtergrond van het menu. Hiervoor hoeft maar één regel CSS toegevoegd te worden door de webbouwer. Zie de opmaak hieronder voor hoe.

Voorvertoning

Alvast beginnen met een basis opmaak?

PHP
Kopiëren<?php
$config = NCCMS::getInstance('Config');
$multilang = NCCMS::getInstance('Multilang');
?>
<?php if (!empty($config->contact['mail']) || !empty($config->contact['tel'])) { ?>
	<div class="mb-4">
		<div class="title"><?= $multilang->translate('contact_information') ?></div>

		<?php if (!empty($config->contact['mail'])) { ?>
			<div>
				<a href="mailto:<?= $config->contact['mail'] ?>">
					<?= NCCMS::getView('cms/icon', 'fa-envelope fa-fw') ?>
					&#160; <?= $config->contact['mail'] ?>
				</a>
			</div>
		<?php } ?>

		<?php if (!empty($config->contact['tel'])) { ?>
			<div>
				<a href="tel:<?= $config->contact['tel'] ?>">
					<?= NCCMS::getView('cms/icon', 'fa-phone fa-fw') ?>
					&#160; <?= $config->contact['tel'] ?>
				</a>
			</div>
		<?php } ?>
	</div>
<?php } ?>

CSS
Kopiëren/* Place in front of overlay. */
header.nav-header .navbar {
	z-index: 501;
	background-color: transparent !important;
}
/* Hide mock navbar that is part of the overlay. */
header.nav-header .navbar-overlay .navbar {
	visibility: hidden;
	pointer-events: none;
}
/* Setup the overlay. */
header.nav-header .navbar-overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 500;
}
header.nav-header .navbar-overlay > .navbar-overlay-content {
	max-height: 100%;
	overflow-y: scroll;
}
/* Offset for admin bar. */
@media screen and (min-width: 992px) {
	#adminbar + * header.nav-header .navbar-overlay {
		padding-top: 3.5rem;
	}
}
#adminbar + * header.nav-header .navbar-overlay > .navbar-overlay-content {
	max-height: calc(100% - 7rem);
}
/* Position the contact addresses. */
header.nav-header
	.navbar-overlay
	> .navbar-overlay-content
	.contact-addresses
	address {
	display: inline-block;
	margin: 0;
}
header.nav-header
	.navbar-overlay
	> .navbar-overlay-content
	.contact-addresses
	.contact-address-title {
	margin-bottom: 0.25rem;
}
header.nav-header
	.navbar-overlay
	> .navbar-overlay-content
	.contact-addresses
	.contact-address-content {
	margin-bottom: 1rem;
}
header.nav-header
	.navbar-overlay
	> .navbar-overlay-content
	.contact-addresses
	.contact-address-postal-code {
	display: none;
}
/* Adjust the widths of the columns based on device size. */
header.nav-header .navbar-overlay > .navbar-overlay-content > * > .d-flex > * {
	min-width: 100%;
	margin-bottom: 2rem;
}
@media screen and (min-width: 576px) {
	header.nav-header
		.navbar-overlay
		> .navbar-overlay-content
		> *
		> .d-flex
		> * {
		min-width: 50%;
	}
}
@media screen and (min-width: 768px) {
	header.nav-header
		.navbar-overlay
		> .navbar-overlay-content
		> *
		> .d-flex
		> * {
		min-width: auto;
	}
	header.nav-header
		.navbar-overlay
		> .navbar-overlay-content
		> *
		> .d-flex
		> *:nth-child(2) {
		order: 99;
		width: 100%;
	}
}

/* Allow for an image to be added to the center of the overlay. */
header.nav-header .navbar-overlay .navbar-overlay-content::before {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	z-index: 0;
	top: 0;
	left: 0;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

/* Variables for changing the overlay. */
header.nav-header .navbar-overlay,
header.nav-header .navbar-overlay > * {
	background-color: var(--primary-bg) !important;
	/* color: var(--black) !important; */
}
header.nav-header .navbar-overlay a,
header.nav-header .navbar-overlay .btn.btn-link,
header.nav-header .navbar-overlay .nav-link {
	/* color: inherit; */
}

/* Background logo. */
header.nav-header .navbar-overlay .navbar-overlay-content::before {
	opacity: 0.1;
	/* background-image: url('circle.svg'); */
}

/* Transition in animation. */
header.nav-header .navbar-overlay {
	animation-timing-function: ease-out;
	animation-duration: 500ms;
	animation-name: navbar-overlay-hide;

	/* Also add hidden animation properties here to avoid flikkering. */
	opacity: 0;
	transform: translate(-100%, -100%);
}
header.nav-header .navbar-overlay.show {
	animation-name: navbar-overlay-show;

	/* Also add hidden animation properties here to ensure it is shown properly. */
	opacity: 1;
	transform: translate(0, 0);
}
@keyframes navbar-overlay-hide {
	0% {
		opacity: 1;
		transform: translate(0, 0);
	}
	100% {
		opacity: 0;
		transform: translate(-100%, -100%);
	}
}
@keyframes navbar-overlay-show {
	0% {
		opacity: 0;
		transform: translate(-100%, -100%);
	}
	100% {
		opacity: 1;
		transform: translate(0, 0);
	}
}