Seifenblasen... 

Beschreibung


Eine Entdeckung der Möglichkeit zum Schreiben von "Zettelchen" für mich und andere
.....

"A blog a day keeps the blogger to stay." ^^ (Tamaro)

28.08.2013

Das seitlich feststehende Menü

Zum Aufbau eines seitlich feststehenden Menüs braucht man zwei Anteile.

Einen HTML-Teil, in welchem das eigentliche Menü steht, und einen CSS-Teil, in welchem die Position festlegt wird.

Am einfachsten fügt man bei Blogspot eine HTML-Box in der Sidebar ein. Diese wird an die unterste Position verschoben, damit alle anderen Elemente in der Sidebar an ihrer bisherigen Position bleiben.

Vom Dashboard den Blog und Layout wählen.
Gadget hinzufügen wählen.
HTML/JavaScript Gadget hinzufügen und an die unterste Position in der Sidebar verschieben.

Das Menü in der HTML-Box könnte z.B. so aussehen, wenn eine Liste verwendet wird:

<ul>
<li><a href="url1">Text1</a>
<li><a href="url2">Text2</a>
<li><a href="url3">Text3</a>
</ul>

Statt url1, url2 und url3 werden die gewünschten Link-Adressen eingesetzt und statt Text1, Text2 und Text3 die entsprechenden Link-Titel.

Um jetzt das Menü bzw. die Box an eine andere Position zu bringen. muss zunächst ermittelt werden, welche "id" die HTML-Box als Element besitzt.
Mit Chrome geht es so: Dafür mit der rechten Maustaste auf die Box klicken und "Element untersuchen" wählen.

Im unteren Fensterteil wird nun ein Teil des HTML-Codes angezeigt. Markiert ist die Zeile des aktuellen Elements.
Jetzt wird die übergeordnete Zeile gesucht, in welcher <div class="widget HTML" id="HTML[x]">
steht.

Statt [x] steht die Nummer der HTML-Box, z.B.: HTML15.
HTML15 wäre in diesem Fall die gesuchte id.

Diese id wird in ein kurzes CSS-Codeteil eingesetzt.

#HTML15 {
  position: fixed;
  right: 0;
  top: 50%;
  width: 8em;
  margin-top: -2.5em;
}

Hinweis:
Die 'id's sind case-sensitiv. Das heißt, es müssen die Groß- und Kleinbuchstaben genau so übernommen werden, wie sie im Element bei id angegeben sind, sonst funktioniert es nicht.

Dieser Codeteil muss jetzt in den CSS-Bereich des Blogs eingesetzt werden.
Dies geht am einfachsten im Vorlagendesigner.

Vom Dashboard den Blog und "Vorlage" wählen.
Dort "Anpassen" anklicken, um den Vorlagendesigner aufzurufen.

"Erweitert" anklicken und "CSS hinzufügen" wählen.

In dem Feld, was sich jetzt rechts öffnet, wird der CSS-Codeteil eingefügt:

#id {
  position: fixed;
  right: 0;
  top: 50%;
  width: 8em;
  margin-top: -2.5em;
}

Im Beispiel oben also:

#HTML15 {
  position: fixed;
  right: 0;
  top: 50%;
  width: 8em;
  margin-top: -2.5em;
}

In der HTML-Box kann jetzt bei Bedarf der Inhalt noch passend angepasst werden.

Bei mir ist hier auf der Seite rechts ein Beispiel zu sehen.

Keine Kommentare:

Kommentar veröffentlichen

Danke für den Kommentar! :)

...