HEADER (Globale Elemente )

src/app/core/components/header/templates

Demo Section

Each variation will be presented in the following section.

Default

Readme

header (coreComponent)

Description

This blueprint is based on the blueprint of Veams.

JIRA

Requirements

Installation

Installation with Veams from local machine

veams install bp absolute/filepath/to/header

Fields

header.hbs

Settings

Parameter Type Default Description
settings.headerClasses String '' Modifier classes for component
settings.headerJsOptions Object null JavaScript options object which gets stringified

Content

Parameter Type Description
content.logoLinkHref String Link for logo
content.logoImageSrc String Logo image source
content.logoImageAltText String Logo image alternative text

JavaScript Options

The module gives you the possibility to override default JS options:

Option Type Default Description
classes.scrolled String 'is-scrolled' Class which is set to header as soon as page is scrolled considering offset option
offsetTop Number 100 Top offset to be considered

Templates

header.hbs

<header id="header" class="c-header{{#if settings.headerClasses}} {{settings.headerClasses}}{{/if}}"
    data-js-module="header"{{#if settings.headerJsOptions}}
    data-js-options='{{stringify settings.headerJsOptions}}'{{/if}} data-js-item="header">
	{{#wrapWith "grid__container"}}
		{{#wrapWith "grid__row"}}
			<div class="header__wrapper">
				<a class="header__logo-wrapper" href="index.html"><img class="header__logo" src="./img/Logo_LMU.svg" alt="Logo Ludwig Maximilians Universität München"/></a>

				<div class="header__facilities-title">
					<span>10 Fakultät für Philosophie, Wissenschaftstheorie und Religionswissenschaft</span>
				</div>

				<div class="header__navigation-wrapper">
					{{#with @root.main-navigation.variations.default }}
						{{> main-navigation }}
					{{/with}}
				</div>
			</div>
		{{/wrapWith}}
	{{/wrapWith}}
</header>

Data File

header.hjson

{
	"title": "Header",
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default"
			},
			"settings": {
				"headerClasses": false,
				"headerJsOptions": {}
			},
			"content": {
				"logoLinkHref": "index.html",
				"logoImageSrc": "../img/Logo_LMU.svg",
				"logoImageAltText": "Logo Ludwig Maximilians Universität München",
				"facilitiesTitle": "10 Fakultät für Philosophie, Wissenschaftstheorie und Religionswissenschaft"
			}
		}
	}
}

Styles

header.scss

/* ===================================================
coreComponent: header
=================================================== */
.c-header {
	@include clearfix();

	position: relative;
	background-color: $color-white;
	width: 100%;
	z-index: 998;
	height: 72px;

	@include bp($bp-tablet-p) {
		position: fixed;
		top: 0;
		left: 0;
		height: 72px;
	}

	@include print() {
		height: auto;
		position: relative;
	}

	/*
	MODIFIERS
	----------------------- */
	&.is-scrolled {

		.header__logo {
			/*
			MODIFIERS
			----------------------- */
			.is-frontpage &, .is-frontpage-w-txt & {
				transform: translate3d(0, 0, 0);
				width: 125px;
			}
		}

		.header__logo-wrapper {
			/*
			MODIFIERS
			----------------------- */
			.is-frontpage &, .is-frontpage-w-txt & {
				width: 125px;
			}
		}
	}

	.header__wrapper {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 7px 0;
		height: 72px;

		.is-frontpage &, .is-frontpage-w-txt & {
			height: 72px;
		}
	}

	.header__logo-wrapper {
		position: relative;
		flex: 0 1 auto;
		width: 125px;
		align-self: flex-start;

		/*
		MODIFIERS
		----------------------- */
		&.a11y-focus-key {
			outline: none !important; // FORCE HIDING OF OUTLINE

			.header__logo {
				@include a11y-focus-key();
			}
		}

		/*
		MODIFIERS
		----------------------- */
		.is-frontpage & { // ANIMATE LOGO ONLY ON FRONTPAGE

			width: 180px;

			@include bp($bp-tablet-p) {
				width: 250px;
				transition: width 150ms ease-in-out;

				@include print() {
					width: 125px;
				}
			}

			@include print() {
				width: 125px;
			}
		}

		.is-frontpage-w-txt & {
			width: 125px;

			@include bp($bp-mobile-p) {
				width: 160px;
			}

			@include bp($bp-tablet-p) {
				width: 250px;
				transition: width 150ms ease-in-out;
			}

			@include print() {
				width: 125px;
			}
		}
	}

	.header__logo {
		position: relative;
		transform: translate3d(0, 0, 0);
		width: 125px;
		transition: transform 150ms ease-in-out, width 150ms ease-in-out;

		/*
		MODIFIERS
		----------------------- */
		.is-frontpage & { // ANIMATE LOGO ONLY ON FRONTPAGE

			width: 180px;

			@include bp($bp-tablet-p) {
				position: absolute;
				top: 0;
				left: 0;
				display: block;
				width: 250px;
			}

			@include print() {
				width: 125px;
			}
		}

		.is-frontpage-w-txt & {
			width: 125px;

			@include bp($bp-mobile-p) {
				width: 160px;
			}

			@include bp($bp-tablet-p) {
				width: 250px;
				position: absolute;
				top: 0;
				left: 0;
				display: block;
			}

			@include print() {
				width: 125px;
			}
		}
	}

	.header__navigation-wrapper {
		flex: 0 1 auto;
	}

	.header__facilities-title {
		display: flex;
		width: calc(100% - 190px);
		height: 100%;
		max-width: 260px;
		color: #232323;
		font-size: 1.1rem;
		line-height: 1.2;
		font-family: "Roboto-bold", sans-serif;
		font-weight: 700;
		text-transform: uppercase;
		margin-left: 7px;
		margin-right: auto;

		& > span {
			align-self: flex-end;
		}

		@include bp($bp-tablet-p) {
			font-size: 1.2rem;
			line-height: 1.3;

			width: calc(100% - 125px);
		}
	}
}

Scripts

header.js

/**
 * Description of Header.
 *
 * @module Header
 * @version v1.0.0
 *
 * @author Christian Rohowski
 */

// Imports
import $ from 'jquery';
import Component from '@veams/component'; // Only use that in combination with browserify

class Header extends Component {
	$el = $(this.el);

	/**
	 * Constructor for our class
	 *
	 * @see module.js
	 *
	 * @param {Object} obj - Object which is passed to our class
	 * @param {Object} obj.el - element which will be saved in this.el
	 * @param {Object} obj.options - options which will be passed in as JSON object
	 */
	constructor(obj) {
		let options = {
			classes: {
				scrolled: 'is-scrolled'
			},
			offsetTop: 100
		};

		super(obj, options);
	}

	/**
	 * Get module information
	 */
	static get info() {
		return {
			version: '1.0.0'
		};
	}

	/**
	 * Subscribe handling
	 */
	get subscribe() {
		return {
			'{{context.EVENTS.pagescroll}}': 'onPageScroll'
		};
	}

	/**
	 * Scroll handler
	 *
	 * @param {Object} e - Event object
	 */
	onPageScroll(e) {
		let browserWidth = this.context.detections.width;

		if (parseInt(window.pageYOffset) > this.options.offsetTop && browserWidth >= 768) {
			this.$el.addClass(this.options.classes.scrolled);
		} else {
			this.$el.removeClass(this.options.classes.scrolled);
		}
	}

	/**
	 * Render class
	 */
	render() {
		return this;
	}
}

export default Header;

HTML Output

Default

<header id="header" class="c-header" data-js-module="header" data-js-options='{}' data-js-item="header">
	<div class="grid__container">
		<div class="grid__row">
			<div class="header__wrapper">
				<a class="header__logo-wrapper" href="index.html"><img class="header__logo" src="./img/Logo_LMU.svg" alt="Logo Ludwig Maximilians Universität München" /></a>
				<div class="header__facilities-title">
					<span>10 Fakultät für Philosophie, Wissenschaftstheorie und Religionswissenschaft</span>
				</div>
				<div class="header__navigation-wrapper">
					<nav class="c-main-navigation" data-js-module="main-navigation">
						<h2 class="main-navigation__headline">Hauptnavigation</h2>
						<ul class="main-navigation__list">
							<li class="main-navigation__list-item">
								<a class="main-navigation__list-link" href="#" title="Link öffnet im neuen Fenster">
									<span class="main-navigation__list-link-text">Studium</span>
								</a></li>
							<li class="main-navigation__list-item">
								<a class="main-navigation__list-link" href="#" title="Link öffnet im neuen Fenster">
									<span class="main-navigation__list-link-text">Forschung</span>
								</a></li>
							<li class="main-navigation__list-item">
								<a class="main-navigation__list-link" href="#" title="Link öffnet im neuen Fenster">
									<span class="main-navigation__list-link-text">Die LMU</span>
								</a></li>
							<li class="main-navigation__list-item is-bordered is-language">
								<a class="main-navigation__list-link" href="#" title="Zur Englischen Sprachversion">
									<span class="main-navigation__list-link-text" lang="en">EN</span>
									<span class="main-navigation__list-link-text-a11y" lang="en">Zur englischen Sprachversion / Switch to English</span>
								</a></li>
							<li class="main-navigation__list-item is-bordered is-search">
								<button type="button" class="main-navigation__list-link is-search" data-js-item="toggle-search">
									<span class="main-navigation__list-link-text">Suche öffnen/schließen</span>
								</button></li>
							<li class="main-navigation__list-item is-bordered is-last">
								<button type="button" class="main-navigation__list-link is-burger" data-js-item="toggle-stack-navigation">
									<span class="main-navigation__list-link-text">Erweiterte Navigation öffnen/schließen</span>
								</button></li>
							<li id="hamburgermenu" class="main-navigation__list-item is-bordered is-last">
								<hamburger-menu-app></hamburger-menu-app>
							</li>
						</ul>
					</nav>
				</div>
			</div>
		</div>
	</div>
</header>

Wonach suchst du?

Datenschutzhinweis mit Link