HTML Archive - Webdesign Tipps / Webdesign Blog

Sticky Menu, Feststehendes Menü

avs — Fri, 07 Aug 2020 09:57:21 +0000

Ein Sticky Menu bzw. feststehendes Menü mit HTML als Mobile Menü realisieren, welches sich beim scrollen dynamisch anpasst: Realisation eines Sticky Header Menu.

Lässt sich eine Sticky Menu bzw. feststehendes Menü mit HTML und CSS realisieren, ohne JavaScript einzusetzen? Die Antwort lautet: Ja.

Diese Anleitung stellt eine Sticky Menu Lösung vor, die zugleich responsive ist. Auf mobilen Geräten wie dem Smartphone passt sich das Menü an und wird zum Mobile Menü.

In diesem Fall setzen wir allerdings die jquery und etwas JavaScript-Code ein, um überprüfen zu können, ob der Benutzer nach unten scrollt. Ist dies der Fall, so wird über CSS das Erscheinungsbild des Sticky Menu angepasst: die Höhe des Navigationsbereichs im Header reduziert sich, um mehr Platz für die Darstellung des Contents zur Verfügung zu haben.

BEISPIEL ANSEHEN

Realisation eines Sticky Menu / feststehenden Menü mit HTML

Prinzipiell können wir den Code natürlich auch „verschlanken“, den JavaScript-Teil entnehmen und mit einigen kleineren Änderungen am CSS den Navigationsbereich im Header fixieren. Dadurch fehlt zwar die Möglichkeit, das Scrollverhalten des Benutzers zu prüfen und entsprechend zu interagieren. Im Gegenzug hätten wir jedoch ein schnelles und schlankes responsives Sticky Menu, welches einige Vorteile bietet:

Es konzentriert sich auf das Wesentliche, ohne dass der Code aufgebläht wird und trägt damit der Idee des Mobile First Rechnung. Denn seit Oktober 2016 prüft auch Google zuerst, ob es eine mobile Version der Website gibt und ob diese über eine hohe Usability verfügt. Dazu gehören unter anderem auch kleine Datenmengen und schnelle Ladezeiten.
Schlanke Webseiten mit geringen Datenmengen und schnellen Ladezeiten erhalten von Suchmaschinen einen Bonus, der sich positiv auf das Ranking auswirkt.

Ein solches schlankes Mobile Menü ohne JavaScript stellen wir hier vor.

Der Animationseffekt für das Mobile Menü besteht übrigens auch ohne den Einsatz von JavaScript fort, da er über CSS3-Transitions erzielt wird.

Wie lässt sich das Design unseres Beispiels umsetzen?
Der Aufbau für das Mobile Menu entspricht der unter Mobile Menü ohne JavaScript vorgestellten Lösung und wird dort ausführlich erklärt.

Nachfolgend stellen wir daher den Code vor, beschränken uns bei den Erläuterungen aber auf die Bereiche, die zusätzlich zu integrieren sind, um nicht nur ein Mobile Menü zu kreieren, sondern dieses auch als Sticky Menu bzw. feststehende Menü zu realisieren:

Bereich: Head

/*Einbinden der jquery*/

HTML (Body)

	
  
    
    
    
		
    
      Abschnitt 1
      Abschnitt 2
      Abschnitt 3
      Abschnitt 4
      Abschnitt 5
    
  

  
    
      
        Abschnitt 1

	    BLINDTEXT
      
    
    
      
        Abschnitt 2

	    BLINDTEXT
      
    
    
      
        Abschnitt 3

	    BLINDTEXT
      
    
    
      
        Abschnitt 4

	    BLINDTEXT
      
    
    
      
        Abschnitt 5

	    BLINDTEXT

CSS: Allgemeine Auszeichnungen und Logo

/*----- General Formating -----*/
body, html {
  font-family: Verdana, Arial, sans-serif;
  font-size: 0.95em;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

a:active, a:focus {outline: none;}

main {
  line-height: 180%;
}
/*------------------------------*/


/*----- Logo -----*/
.brand {
  float: left;
  padding: 0.5em 1em 0 0.5em;
}
/*----------------*/

CSS: Menü

/*----- Menu -----*/
nav {
  margin: 0 auto;
  width: 100%;
  height: 11em;
  text-align: right;
  position: relative;
  background: rgba(255, 255, 255, 1.0);
  border-bottom: 1px solid white;
}

nav ul {
  margin: 0;
  padding: 8.1em 0 0 0;
  height: 100vh;
}

nav ul li {
  list-style: none;
  margin: 0;
  display: inline;
}

nav ul li a {
  color: #009999;
  position: relative;
  padding: 0 0 0.5em 0;
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
}

nav ul.menu li a:hover {
  color: #03405f;
  border-bottom: 2px solid #03405f;
}
/*----------------*/

/*----- Fixed Menu -----*/
nav#menu.fixed {
  position: fixed;
  top: 0;
  padding: 0;
  height: 6em;
}
nav#menu.fixed ul {
  padding: 0.75em 0 0 0;
  font-size: 90%;
}			
nav#menu.fixed .brand img {
  margin-top: 0em;
  height: 5em;
}		
nav#menu.fixed a {
  padding: 1em 0;
}	
/*--------------------------------------*/

CSS: Content

/*----- Content Sections -----*/
#abschnitt1, #abschnitt2, #abschnitt3, #abschnitt4, #abschnitt5 {
  min-height: 100%;
  width: 100%;
}
#abschnitt1 {
  color: #555;
  background: #caced2;
}
#main.fixed #abschnitt1 {
  margin-top: 150px;
}
#abschnitt2 {
  color: #333;
  background: #b1b8be;	
}
#abschnitt3 {	
  color: #000;
  background: #95a1ae;
}
#abschnitt4 {
  color: #fff;
  background: #778899;
}	
#abschnitt5 {
  color: #fff;
  background: #525f6d;
}	
#abschnitt1 .content,
#abschnitt2 .content,
#abschnitt3 .content,
#abschnitt4 .content,
#abschnitt5 .content {
  padding: 1.5em 1.5em 3em 1.5em;
}
#a1{
  padding-top: 14em;
}
#a2, #a3, #a4, #a5 {
  padding-top: 8.1em;
}
/*--------------------------------------*/

CSS: Media Queries

/*----- Media Queries -----*/
@media screen and (min-width: 961px) {
  nav a#nav-m,
  nav a.close {
    display: none;
  }
  nav #menu.fixed ul {
    margin-top: 2.25em;
  }	
  nav ul li {
    margin: 0 30px 0 0;
  }
}

@media screen and (max-width: 960px) {
  /*Formatierung Mobiles Menue*/
  nav ul {
    top: 11.15em;
    position: absolute;
    background: #ccc;
    width: 100%;
    left: -100%;

    list-style-type:none;
    margin: 0;
    padding: 0;

    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
  }
  nav#menu.fixed ul {
    top: 6.8em;
  }
  nav ul li{
    display: block;
    text-align: left;
    padding: 0em 0.5em;
    border-bottom: 1px solid #fff;
  }
  nav ul li a {
    color: #555;
    padding: 1em 0;
  }
  nav ul.menu li a:hover {
    border-bottom: 0;
  }

  /*Hamburger-Icon*/
  nav a#nav-m img,
  nav a.close img {
    width: 40px;
    height: auto;
  }
  nav > .close,
  nav a#nav-m:target {
    display: none;
  }
  nav a:target ~ ul,
  nav a:target ~ .close {
    display: inline-block;
  }
  nav nav#menu.fixed a:target ~ .close {	
    margin-top: -14px;
  }
  nav a:target ~ .close {
    position: absolute;
    margin-left: -40px;
  }
  nav a:target ~ ul {
    left: 0;
  }
}
/*--------------------------------------*/

Erläuterung des CSS für die Erstellung des Sticky Menu / festehenden Menüs

Die drei vorstehenden Codebereiche HTML (Body), CSS: Allgemeine Auszeichnungen und Logo sowie CSS: Media Queries werden bereits in der Anleitung Mobile Menü ohne JavaScript erklärt.

Ergänzungen bzw. Erweiterungen für das Sticky Menu finden sich in den drei Codeblöcken Bereich: Head, CSS: Menü sowie CSS: Content.

Wir blicken hinter die Kulissen

Bereich: Head
Zunächst wird die jquery über googleapis.com eingebunden.
Mit einigen Zeilen JavaScript wird erreicht, dass ab einem Scrollen um 150 Pixel nach unten die Bezeichner mit der ID #menu sowie #main um die Klasse .fixed ergänzt werden.
Beträgt das Scrollen weniger als 150 Pixel, so greift die ELSE-Anweisung und die Klasse .fixed wird wieder entfernt.Damit erhalten wir die Möglichkeit, beim Scrollen um mehr als 150 Pixel nach unten den Bereich über CSS der Form #menu.fixed anzusprechen.
CSS: Menü
Ergänzend zum Mobile Menü ohne JavaScript findet sich hier der Bereich
/*—– Fixed Menu —–*/
Das CSS teilt dem Browser mit, wie das Sticky Menu bzw. feststehende Menü behandelt werden soll, wenn die zuvor erwähnten mehr als 150 Pixel nach-unten-scrollen erreicht sind.
CSS: Content
Dieser Bereich ist weitestgehend selbsterklärend. Das für Demonstrationszwecke erstellte Demo Sticky Menu referenziert nicht auf eigene (neue) Inhaltsseiten. Sondern beim Anklicken der Menüpunkte wird Mittels Anchor (= Anker) zu dem entsprechenden Bereich auf der Seite gesprungen und der jeweilige Bereich entsprechend über das CSS formatiert.

Fazit: die Anleitung zur Erstellung eines Sticky Menu / feststehenden Menüs inklusive Mobile Menu für mobile Endgeräte basiert auf der unter Mobile Menü ohne JavaScript vorgestellten Lösung. Ergänzend wurde noch ein Sticky Menu integriert und zur besseren Visualisieren ein Anker-Menü zu Inhaltsbereichen mit unterschiedlichen Hintergrundfarben integriert

Stichworte: Sticky Menu, Sticky Header Menu, Feststehendes Menü HTML

Der Beitrag Sticky Menu, Feststehendes Menü erschien zuerst auf Webdesign Tipps / Webdesign Blog.

Texte proportional mit Bildern skalieren

avs — Fri, 01 Dec 2017 18:59:36 +0000

Texte proportional mit Bildern skalieren. Ändert sich der Viewport, skalieren responsive Websites auch die Bilder. Texte werden jedoch nicht mit skaliert.

Texte proportional mit Bildern skalieren: Die Bildgröße in Abhängigkeit vom zur Verfügung stehenden Platz anzupassen gehört zu den Grundlagen responsiver Websites. Umgesetzt wird das mit wenigen Zeilen CSS-Code.

Gibt es jedoch innerhalb des Bildes auch Textinhalte, dann haben statische Schrift-Größenangaben wie px oder em zur Folge, dass die Textgröße konstant bleibt, während das Bild proportional zur Browserfensterbreite bzw. zum Viewport skaliert wird.

Dadurch können zwei Probleme entstehen:

Oft weisen Bildhintergründe keine einheitliche Helligkeit auf. Sie sind in einigen Bereichen hell, in anderen dunkel. Im Zug der Bildskalierung ändert sich häufig auch die Lesbarkeit des Textes, wenn sich die Größe des Hintergrundbildes reduziert, die Textgröße jedoch konstant bleibt.

Zur Veranschaulichung:
Reduziert sich der zur Verfügung stehende Platz, so kommt es zu Textumbrüchen. Dadurch kann das gewünschte Design aus Text und Bild gegebenenfalls nicht aufrecht erhalten werden.

Manche Webdesigner behelfen sich damit, die Texte in Photoshop direkt ins Bild zu integrieren und so das Skalierungsproblem zu umschiffen. Aus Gründen der Suchmaschinenoptimierung ist ein solches Vorgehen aber meist unerwünscht. Zudem ist die Änderung der Texte verhältnismäßig aufwendig, da dafür ein neues Bild erstellt und eingebaut werden muss.

Texte proportional mit Bildern skalieren

Mittels der Einheiten vw (= Viewport Width) beziehungsweise vh (= Viewport Height) lassen sich Text proportional mit Bildern skalieren. Indem die Schriftgröße mit der Einheit vw definiert wird, erfolgt proportional zur Größe des Viewports eine Textvergrößerung bzw. Textverkleinerung.

Die Einheiten lassen sich auch auf andere Elemente wie padding anwenden.

BEISPIEL ANSEHEN




  
  
  
  Texte proportional skalieren - Beispiel ansehen

  



  
    
    
      Sunset | Sonnenuntergang
      Die schönste Stunde.
      Zur Sonne

Stichworte: Texte proportional mit Bildern skalieren

Der Beitrag Texte proportional mit Bildern skalieren erschien zuerst auf Webdesign Tipps / Webdesign Blog.

Anchor bzw. Anker auf einer Website setzen

avs — Mon, 03 Jul 2017 11:56:15 +0000

Anker setzen: Anchor auf einer Website setzen: Anker sind Sprungmarken, die es dem Besucher ermöglichen zu einem bestimmten Ort zu springen. Wie werden sie eingefügt?

Was ist ein Anker / Anchor?

Anker setzen: Einen Anker (englisch: „Anchor“) zu setzen, ist keine besonders schwierige Angelegenheit.

Ein Beispiel:
Ziel ist es, einen In-Link zu einer umfangreichen Inhaltsseite zu setzen, wo sich weitere Informationen zum Thema befinden. Dummer Weise stehen diese Informationen nicht am Anfang der Zielseite, sondern im mittleren oder unteren Bereich.

Dann kann dem Link eine Information mitgegeben werden, zu welchem Bereich der Zielseite gesprungen werden soll. Das ist ein sogenannter „Anker“ bzw. „Anchor“.

https://meineurl.de/der-artikel.html#anker

Nun muss auf der Inhaltsseite „der-artikel.html“ noch ein Anker vorhanden sein, damit der Browser „weiß“, zu welcher Stelle er springen soll:

Hier befindet sich das anzuspringende Ziel.

Manuell lässt sich ein solcher Anker also sehr leicht umsetzen. Da die meisten Webseiten heute auf einem Content Management System basieren, sind Anker systemabhängig zu integrieren.

Wie setze ich Anker in TYPO3?

Jedes Inhaltselement – beispielsweise vom Typ „Text & Medien“ – erhält in TYPO3 eine eindeutige Kennung. Diese lässt sich einfach ermitteln, indem mit dem Mauszeiger über das entsprechende Inhaltselement gefahren wird:

Bei der Eingabe der URL mit dem gewünschten Anker ist im TYPO3-Backend zu schreiben:

https://meineurl.de/?id=123#416

Wobei „id=123“ die ID der Zielseite ist und „#416“ darüber informiert, welcher Inhaltscontainer auf der Zielseite angesprungen werden soll.

Zur Ermittlung der Seiten-ID im TYPO3 Backend, wird im Seitenbaum („Page Tree“) mit der Maus über das Icon der entsprechenden Seite gefahren.

Anker in TYPO3 mittels RTE setzen

Kommt im TYPO3 Backend der RTE (Rich Text Editor) zum Einsatz, so lässt sich folgendermaßen auf einen Anker verlinken:

Der zu verlinkende Text wird markiert und „Link einfügen“ gewählt:
Anschließend erfolgt die Verlinkung:

Dazu wird (1.) die Anzeige der Inhaltselemente der gewünschten Zielseite geöffnet und (2.) auf den Text rechts neben dem Icon des entsprechenden Inhaltscontainers geklickt.

Der Beitrag Anchor bzw. Anker auf einer Website setzen erschien zuerst auf Webdesign Tipps / Webdesign Blog.