Menüleiste links einklappbar?

Hallo,

suche nach einem Template/Beispiel-Anwendung oder ähnliches wo erklärt wird wie man eine Sidebar (links) Implementiert die auch ein und aus geblendet werden kann.

Vorzugsweise:

Bootstrap 5
Blazor Server
Kein JS
Basic, nichts Komplexes, es sollte eine einfache Sidebar sein die ein und ausklappbar ist.

2 Antworten

FaTech

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, programmieren, Programmieren & Softwareentwicklung

16.08.2022, 15:44

Kein JS geht, ist aber unschön. Du solltest auf JS zurückgreifen. Alternativ geht mit CSS target ein # in der URL zu setzen. http://bla.de/seite.html#sidebar-auf zum beispiel. Das ist aber echt hässlich. Da bleibt nur JavaScript. Bootstrap selber hat keine Sitebar, du müsstest selber eine entwickeln, kannst aber zum stylen auf Bootstrap zurückgreifen.

<style>
.sidebar {
  width: 300px;
  position: fixed;
  right: 0;
  top: 0;
  margin: 0;
  transition: all 2s;
}
</style>
<div class="sidebar">
  <!--Hier die sidebar Elemente-->
</div>
<script>
let sidebar = document.getElementsByClassName("sidebar")[0];
ButtonClickFunktion() { // Musst du selber implementieren, kannst du googlen, wenn du nicht weißt wie
  if (sidebar.style.right == 0) {
    sidebar.style.right = -300;
  }
  else {
    sidebar.style.right = 0;
  }
}
</script>

Das script ist natürlich nur so dahin geschrieben. Du musst es noch testen

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite, programmieren

16.08.2022, 19:18

Dieser Artikel zeigt verschiedene, einfache Sidebars mit Bootstrap: Bootstrap Sidebar.

Ansonsten gibt es auch eine zusätzliche Komponente für Bootstrap, mit der du eine Sidebar erstellen kannst: OffCanvas.

Eine Lösung ohne JavaScript hingegen könnte man mit einer versteckten Checkbox implementieren. Ein an sie gebundenes Label de-/aktiviert die Box. Das Label kann irgendwo im body platziert werden, die Checkbox hingegen muss immer vor dem Sidebar-Container liegen.

<label for="sidebar-toggle">Click me</label>
<input id="sidebar-toggle" type="checkbox">
<aside class="sidebar-container"><!-- ... --></aside>

Aufbauend auf dem Checkboxstatus können dann entsprechende CSS-Regeln erstellt werden.

#sidebar-toggle + .sidebar-container {
  bottom: 0;
  left: -100px;
  position: fixed;
  transition: left 1s;
  top: 0;
  width: 100px;
}
                
#sidebar-toggle:checked + .sidebar-container {
  left: 0;
}

Der Nachteil an diesem Lösungsweg ist, dass er nicht barrierefrei ist. Die Änderung der Box wird nur visuell kommuniziert.

Hallo, ich hätte eine allgemeine Frage zum Thema Templates. Wie setzt Ihr beispielsweise ein fertiges Template was als Theme in Wordpress eingesetzt werden soll um? Nutzt Ihr Tools wie Divi-Theme etc.? Oder schreibt Ihr den Code komplett selbst? Kleine statische Internetseiten kann man schnell mit HTML, CSS und JS coden, aber ein Template komplett in Wordpress zu implementieren ist da ja schon etwas aufwendiger, da auch PHP mit einbezogen wird und mehr.

Danke für die Informationen. LG

...zur Frage

Kann man im CSS Gridraster die Sidebar per Anmimation von links nach rechts ändern?

Hallo,

wäre es irgendwie machbar per Mausklick mit :checked oder :target die Anordnung im Gridraster umzuändern und somit die Sidebar z.b. von links nach rechts zu verändern? Am Besten auch mit einer Animation.

Und welche Beachtung müsste man hier dem Befehl postion schenken?

...zur Frage

HTML/CSS/JS: Warum funktioniert meine bindDelete-Funktion nicht und wie kann ich die Preisangaben untereinander formatieren?

Hi, ich habe an einen Spezialisten eine Frage:

import Order from './Order.js';
import ArticleModel from './ArticleModel.js';

export default function UserOrderViewHandler(articleModel) {
  this.articleModel = articleModel;
  this.order = new Order(-1, null, [], 0, 0, 0, 0, 0, false);
}

UserOrderViewHandler.prototype.renderPage = function() {
  let body = document.getElementsByTagName('body')[0];
  body.innerHTML = "";
  body.innerHTML = `<div class="container">
    <sidebar>
      <h1 class="mb-4">Unser Sortiment</h1>
      <div id="articleList">
        <div class="row space-between">
          <div class="col-md-4 mb-4">
            <div class="card" data-index="0">
              <div>
                <h2>Salamipizza</h2>
                <p>Halbe hausgemachte Pizza mit Käse und regionaler Salami</p>
                <p><strong>6.50 €</strong></p>
                <button class="addBtnClss btn btn-primary">Artikel hinzufügen</button>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-4">
            <div class="card" data-index="1">
              <div>
                <h2>Hamburger</h2>
                <p>Burger mit österreichischem Rindfleisch, Ketchup und Senf</p>
                <p><strong>6.00 €</strong></p>
                <button class="addBtnClss btn btn-primary">Artikel hinzufügen</button>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-4">
            <div class="card" data-index="2">
              <div>
                <h2>Wochenmenü</h2>
                <p>Frittatensuppe --- Spaghetti Bolognese --- Muffin</p>
                <p><strong>12.50 €</strong></p>
                <button class="addBtnClss btn btn-primary">Artikel hinzufügen</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </sidebar>
    <sidebar>
      <h1 class="mb-4 extramargin">Bestellung</h1>
      <ul id="order"></ul>
      <div class="form-group">
        <label for="pickupTime">Gewünschte Abholzeit:</label>
        <input type="time" id="pickupTime" class="form-control">
      </div>
    </sidebar>
  </div>`;
}

UserOrderViewHandler.prototype.renderOrder = function() {
  let orderElement = document.getElementById('order');
  orderElement.innerHTML = "";
  orderElement.className = "list-group";

  let i = 0;

  for (let article of this.order.articleList) {
    let articleElement = document.createElement('li');
    articleElement.className = "list-group-item d-flex justify-content-between align-items-center";
    articleElement.innerHTML = `
      <div>1 x ${article.name} &emsp; &emsp; &emsp;${article.price.toFixed(2)} €</div>
      <button class="delBtn btn btn-danger btn-sm" data-index="${i}">Entfernen</button>
    `;
    orderElement.appendChild(articleElement);
    i++;
  }
}

UserOrderViewHandler.prototype.bindAddBtn = function() {
  let buttons = document.getElementsByClassName('addBtnClss');
  const that = this;

  for (let button of buttons) {
    button.addEventListener('click', function() {
      let index = this.closest('.card').getAttribute('data-index');
      let article = that.articleModel.getByIndex(index);

      if (article) {
        that.order.addArticle(article);
        that.renderOrder();
      }
    });
  }
}

UserOrderViewHandler.prototype.bindDeleteBtn = function() {
  let orderElement = document.getElementById('order');
  orderElement.addEventListener('click', function(event) {
    if (event.target.classList.contains('delBtn')) {
      let index = event.target.getAttribute('data-index');
      that.order.deleteArticle(index);
      that.renderOrder();
    }
  });
}

Warum funktioniert meine bindDelete-Funktion nicht, um die li-Elemente wieder zu löschen?
Wie kann ich es schaffen, dass der Preis von jedem li-Element genau so untereinander ist, sodass man ihn schön zusammenrechen könnte:

Danke für die Hilfe.

...zur Frage

MudBlazor Hintergrundfarbe Content Page ändern?

Hallo,

ich arbeite mich gerade in MudBlazor ein. Es ist wirklich ein sehr gutes Framework, mit einer überragenden Dokumentation.

Allerdings stoße ich auf ein Problem, auf das ich einfach keine Lösung finden kann.

Wie kann ich die Hintergrundfarbe im MainLayout ändern?

Ich könnte das auch für jede Seite machen, was ja aber irgendwie sinnfrei wäre, wenn alle dieselbe Hintergrundfarbe haben sollen.

Meine MainLayout.cs sieht momentan so aus.

Ich habe es auch schon mit style Background-color probiert, leider ohne Erfolg.

Hat jemand eine Idee?

...zur Frage

Welches JavaScript Framework?

Hallo zusammen,

ich bringe mir seit ein paar Monaten HTML, CSS und JavaScript bei, habe mir ein Portfolio aufgebaut und lade dort die Projekte hoch, die ich privat entwickle, um einen einfacheren Berufseinstieg zu erhalten. Aktuell fühle ich mich in den drei oben genannten Bereichen fit genug, dass ich mich gerne in ein Framework einarbeiten würde.

Es gibt da draußen mehrere Videos über das Thema Angular, React, Vue.js, aber ich würde gerne von euch, die wirklich beruflich damit arbeiten und eventuell auch vom Hörensagen anderer Entwickler, wissen, was so im deutschen Arbeitsmarkt angesagt ist.

React ist ja, was die Rankings angeht, immer auf Platz 1, weswegen ich in diese Richtung gehen wollte. Jedoch, wenn ich auf Stepstone und anderen Plattformen schaue, werden öfters Angular-Stellen gesucht. Deswegen hat sich mir die Frage gestellt, ob React vielleicht eher im Rest der Welt populär ist und in Deutschland eventuell eher Angular oder gar ein ganz anderes Framework.

Ich bedanke mich im Voraus für eure Zeit und Hilfe.

...zur Frage

Mir fehlt auf dem Iphone die Sidebar rechts die es bei Samsung gibt um die wichtigstens Apps direkt aufrufen zu können. Gibt es für iOS App für eine Sidebar?

...zur Frage

CSS transition mit JavaScript onclick ausfuehren?

Ich wuerde gerne in einer NavBar (oben fixiert), links einen Button erstellen, der mit onclick eine CSS ausfuehrt, die eine SideBar (von links) drauflegt.

Also, sobald links oben das Onclick geklickt wird -> Sidebar wird von links aus reingeschoben, indem eine CSS ausgefuehrt wird.

Das einzige was Ich nicht wuesste ist wie Ich das JS onclick dazu bringe, entweder eine CSS auszufuehren, oder gar zu erstellen/auszuwechseln (zu replacen). Bzw. alternativ, was mir noch in den Sinn kaeme, koennte das CSS in default ja in einem Kommentar stehen, und bei Ausfuehrung wird zwischen zwei CSS gewechselt (das eine wird in Kommentar gesetzt (default) und das andere, was normal in Kommentar steht, steht nun ohne Kommentar, und bei wegklicken wird das wieder zurueckgesetzt) - aber wie wuerde das gehen, Ich habe naemlich keinerlei Idee dazu..

...zur Frage

Frage zu Xamarin/.NET MAUI und Blazor Hybrid?

Servus,

ich will eine Hybride App mit Blazor Hybrid für iOS 6 machen.
Das Problem ist, Blazor Hybrid Unterstützt iOS 14 und neuer.

Es gibt ja Xamarin.iOS 6, ich hab aber kaum Erfahrung mit XAML etc.

Meine Fragen:

Auf was basiert Blazor Hybrid? MAUI oder Xamarin?
Wäre es möglich die iOS 14 SDK durch die von iOS 6 im Source Code zu ersetzen?
Wäre das praktisch machbar?

...zur Frage

Wo kommt diese Sidebar oder was immer das ist her und wie kann ich diese entfernen?

Seit gestern habe ich diese Sidebar oder was immer das ist unten links im Bildschirm. Das nervt mich und ich will das unbegingt entfernen. Mit einem Rechtklick kommt folgende Auswahl: Seite teilen Seite speichern Seite bei Pocket speichern Hintergrundgrafik anzeigen Alles markieren Seitenquelltext anzeigen Seiteninformationen anzeigen Element untersuchen Adblock plus: Grafik blockieren

Versucht habe ich schon: Adblock plus: Grafik blockieren

Das hat aber keine Erfolg gebracht. Wie kann ich das Teil endgültig löschen? Ich habe Windows 10 benutze Firefox.

...zur Frage

Blazor @media?

Guten Abend,

irgendwie funktioniert @media bei mir nicht.
ich nutze das Web Framework Blazor.

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }

Mit freundlichen Grüßen

...zur Frage

Sidebar alternative für mobile?

Hey, ich betreibe eine Wordpress-Webseite und zwischen 50-60% meiner Nutzer sind mobile unterwegs. Ich finde das Theme was ich benutze (baskerville) macht seinen Job schon ganz gut im responsive sein, aber die Sidebar ist halt einfach komplett weg und da sind zum Teil sachen wie "Beiträge nach Kategorie", und ein Text für erstbesucher drin.

Ich könnte die Sidebar vielleicht mit ein bisschen rumfrickeln unter dem content platzieren, aber ob das so die perfekte Lösung ist... Was macht man denn im Normalfall? Ich kann ja nicht die einzige Person mit dem Problem sein, aber google sagt mir genau das.

...zur Frage

C# AES Problem?

Servus,

habe in Blazor einen AesEncrypter gecodet.

Problem is, wenn ich jz was verschlüsseln oder entschlüsseln muss krieg ich dir folgende Fehlermeldungen.

error CS0103 "AesOperation' does not exist in the current context

errorCS0103: "AesOperation' does not exist in the current context

An was könnte es liegen?
Code ist auf dem Bild.

...zur Frage

WordPress Sidebar rechts neben Content?

Hallo Leute, ich möchte gerne meine Webseite im Boxed Layout betreiben, und ich suche ein Plugin, welches es mir ermöglicht die Widgets rechts vom Content anzeigen zu lassen.

Hier einmal ein Bild wie ich mir das vorstelle: http://prntscr.com/cir6t1

Super wäre es, wenn das Plugin mit Plugins welche es ermöglichen für jede Seite eine spezifische Sidebar einzustellen kombinierbar ist, und wenn es beim Scrollen auch mit kommt, wobei mir das mit den Scrollen nicht ganz so wichtig ist.

...zur Frage

Wie zeichne ich einen Graph in Javascript D3.js?

Ich möchte ein Graphendiagramm erstellen. Dazu habe ich eine JSON-Datei erstellt. Die Skills ("java, python, HTML, json") sind die Knoten und die Indexe (KayO, BenBeck, Borea usw.) sind die Kanten. Der Knoten muss eine Mindestgröße haben und darf nicht zu groß werden. Anschließend möchte ich mit einem Klick auf den Knoten die Liste der Publikationen auf der rechten Seite aufrufen können. Dabei soll der aktuell ausgewählte Knoten in der Visualisierung hervorgehoben werden. Ich habe bereits aus diesem Beispiel (https://bl.ocks.org/heybignick/3faf257bbbbc7743bb72310d03b86ee8) was implementiert. Aber leider komme ich nicht weiter.

Diese ist meine JSON Datei:

const persona = {
    "KayO": {
      firstname: "Kay",
      lastname: "Ohran",
      City: "California",
      skills: "java, python, HTML, json",
    },
    BenBeck: {
      firstname: "Ben",
      lastname: "Beckamm",
      City: "New York",
      skills: "css, ruby, php, training, simulator, java, web, webgl, json",
    };

Das ist mein Code

    const bib = persona;
    console.table(bib);
    const graph = {nodes: [{id: "a"}, {id: "b"}], links: [{source: "a", target: "b"}]};
    const linkColor = d3.scaleLinear().domain([0, 1]).range(["#eee", "#000"]);

    const svg = d3.select("svg");
    const width = +svg.attr("width");
    const height = +svg.attr("height");

    const simulation = d3
      .forceSimulation()
      .force("link", d3.forceLink().id(function (d) { return d.id; }))
      .force("charge", d3.forceManyBody())
      .force("center", d3.forceCenter(width / 2, height / 2));

      //linien -> Kanten
      var link = svg.append("g").attr("class", "links")
      .selectAll("line")
      .data(graph.links).enter().append("line")
      .attr("stroke", "#aaa");

      //kreise -> Knoten
    var node = svg.append("g")
      .attr("class", "nodes")
      .selectAll("circle").data(graph.nodes).enter().append("circle")
      .attr("r", 5).call(d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended));

    node.append("title").text(d => d.id);


    simulation.nodes(graph.nodes).on("tick", ticked)
simulation.force("link").links(graph.links);

    function ticked() {
      link
        .attr("x1", d => d.source.x)
        .attr("y1", d => d.source.y)
        .attr("x2", d => d.target.x)
        .attr("y2", d => d.target.y);
      node.attr("cx", d => d.x).attr("cy", d => d.y);
    }

    function dragstarted(event) {
      if (!event.active) simulation.alphaTarget(0.3).restart();
      event.subject.fx = event.subject.x;
      event.subject.fy = event.subject.y;
    }

    function dragged(event) {
      event.subject.fx = event.x;
      event.subject.fy = event.y;
    }

    function dragended(event) {
      if (!event.active) simulation.alphaTarget(0);
      event.subject.fx = null;
      event.subject.fy = null;
    }

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen