Einblendbare Seitenleiste

Je nach Layout-Vorlage verfügen Ihre Webseiten über eine oder zwei Seitenleisten, in welchen Sie Blöcke und Menüs unterbringen können. Mittels Bootstrap haben Sie die Möglichkeit, eine weitere Seitenleiste zu nutzen, die nur bei Bedarf als Overlay eingeblendet wird (Sie sind nicht nur auf Seitenleisten beschränkt, sondern können mit dieser Funktionalität auch Header- und Footerleisten erstellen).

Dafür nutzen Sie die Bootstrap-Klasse offcanvas.

Um die Offcanvas-Seitenleiste mit einem Button bei Bedarf zu öffnen, müssen sie ihr ein Id zuweisen.

Sie erzeugen in einem Block einen <div>-Container der Klasse offcanvas:

<div class="offcanvas offcanvas-start" id="<CONTAINER-ID>">
  ...
</div>

Der Inhalt der Sidebar kann mit einem Header versehen werden:

<div class="offcanvas-header">
   <HEADER>
</div>

Außerdem benötigt die Seitenleiste natürlich Inhalt, welcher in einen Container der Klasse offcanvas-body eingebaut wird:

<div class="offcanvas-body">
  ...
</div>

Damit die Seitenleiste eingeblendet werden kann, bietet es sich an, einen Button zu verwenden. Meist werden solche einblendbaren Seitenleisten über einen Klick auf ein “Hamburger-Symbol” geöffnet.

Es muss also eine button-Klasse erzeugt werden, wobei der Button den Container mit der vergebenen Id öffnet:

<button class="btn" type="button" data-bs-toggle="offcanvas" data-bs-target="<CONTINER-ID>">
  ☰
</button>

Wenn Sie diesen Block nun z.B. in den nav-Bereich ihres Layouts einbetten, wird in der Navigationsleiste der Button mit dem ☰ Symbol angezeigt und bei Klick auf den Button wird die Seitenleiste eingeblendet.

Weitere Features zur Offcanvas-Klasse können Sie in der Bootstrap-Dukumentation nachlesen: Offcanvas.

Als Beispiel erstelle ich im Folgenden eine Beispiel-Webseite mit einem Layout vom Typ “full” (Navigationsbereich, Inhaltsbereich, Footerbereich). Die Webseite selbst wird mit eine Platzhalter-Text befüllt. In den Navigationsbereich wird dann der Offcanvas-Block, den ich ebenfalls erstelle, eingesetzt.

Der Block mit dem Offcanvas-Menü erhält den Namen “oc-menu”. Und damit sieht das Layout (mit dem Namen “ocm-layout”) so aus:

[template]full[/template]

[region=nav]
[block]oc-menu[/block]

[/region]

[region=content]
$content

[/region]

[region=footer]

[/region]

Nun erstelle ich den Block “oc-menu” (im dunklen Design), der einige Beispiel-Links enthält und als Header (Heading 1) den Text “OC-Menü”:

<div class="offcanvas offcanvas-start text-bg-dark" id="hamburger">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">OC-Menü</h1>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <ul class="nav flex-column">
      <li class="nav-item"> <a class="nav-link" href="https://pepecyb.hu">PepeCyBs Welt Blog</a> </li>
      <li class="nav-item"> <a class="nav-link" href="https://hubzilla.hu">Join Hubzilla</a> </li>
      <li class="nav-item"> <a class="nav-link" href="https://klacker.org/channel/tutorial01">Kanal-Stream</a> </li>
    </ul>
  </div>
</div>

<div class="container-fluid mt-3">
  <button class="btn" type="button" data-bs-toggle="offcanvas" data-bs-target="#hamburger">
    ☰
  </button>
</div>

Und erzeuge eine Beispielseite “oc-menu-site”, für welche ich das Layout auf “ocm-layout” festlege und welches den Platzhaltertext enthält:

<p>Lorem ipsum dolor sit amet, quem consulatu persecuti eam id. Quas reque tincidunt eu usu, ex pri habeo constituam. Eu liber everti civibus ius. Cum ea oratio alienum quaestio, pri ut quod stet expetenda. Minim aeterno delicata vel ea, est natum putent omnesque no, an vel vitae voluptaria.</p>

<p>Est case veritus ex. Ea vivendum sapientem vim, enim cibo detraxit et usu. Usu appetere sapientem dignissim eu, eum falli feugait reprehendunt et. Cu rebum nullam delicatissimi cum, utinam laoreet vel no. Et eos odio copiosae splendide, id quo porro splendide. Vix dolorum mnesarchum ea, stet omnium fastidii ne ius.</p>

<p>Ad tantas disputationi mel. Modus alienum postulant an vim, ex porro noster qui. Eu ludus pericula inciderint nec, porro dicat probatus qui et, ex suas tempor delenit pri. At eum aeque vivendum, et ceteros persecuti abhorreant cum, ex adhuc autem tempor sea. Novum essent numquam ea sit, te vix quot impedit epicurei, qui ferri inermis sadipscing no.</p>

<p>Eam in dolor vidisse, erant verterem cum ne, vivendum imperdiet in mea. His no quot repudiare consetetur. Fierent explicari et has, pro tantas tamquam qualisque an, ex has graeci verterem sententiae. Ad magna praesent vel, movet molestiae gloriatur sea ei, mel natum illum id.</p>

<p>Id duis aperiam pri, vel veniam definiebas definitiones ex. Qui ex nemore incorrupte, quo ad perfecto maiestatis, agam facete an duo. Cum ei legere malorum officiis, has novum persequeris definitionem te. Cu ceteros epicuri mei. Legendos mandamus an ius. Per movet pericula deseruisse ut, epicurei phaedrum mnesarchum sed eu. Elaboraret dissentiet eu vel, ei expetendis consequuntur pro, nec menandri maluisset ut.</p>

Die Seite bietet nun eine einblendbare Seitenleiste: