Wie stelle ich einen Bootstrap Navbar Menüpunkt auf Active, wenn die Navbar per PHP eingebunden wird?

Hallo, ich nutze in meiner Website bootstrap.

Den Header sowie die Navigation-Bar binde ich per PHP in die Website ein. Ist es möglich, einen Menüpunkt in dieser Konstellation auf active zu stellen?

Wenn ich es in meiner nav.php ändere (class="active") ist es ja dauerhaft, ich würde aber gerne den aktuellen menüpunkt aktivieren.

Vielen Dank im Voraus Nico

4 Antworten

phlinther1

27.02.2017, 21:09

Ich kenne mich nicht mit Bootstrap aus, aber vielleicht kann ich trotzdem helfen. Wann genau soll er auf active gestellt werden? Wenn man mit der Maus drüber fährt oder wenn man gerade auf der Seite des Menüpunkts ist?

Beast20

Beitragsersteller

27.02.2017, 21:10

wenn man gerade auf der Seite des Menüpunkts ist!

Einfach gesagt erfolgt die Schaltung auf Active, indem man zum <li> Tag in der navbar die class="active" hinzufügt. also <li class="active">

phlinther1

27.02.2017, 21:13

@Beast20

Da ich mich nicht mit Bootstrap auskenne, kann ich wohl doch nicht wirklich helfen. Prinzipiell kannst du mithilfe von javascript bei einem Klick auf den Menüpunkt die Klasse hinzufügen, was aber in diesem Fall auszuprobieren wäre.

BootstrapWorld

12.04.2017, 22:24

Hallo Nico,

ich kann dir helfen, bräuchte aber bitte noch weitere Infos. Wie sieht den eine Url aus, wenn ein aktueller Menüpunkt (z. B. Kontakt) aufgerufen wird?

Steffile

27.02.2017, 21:20

In die einzelnen Seiten schreibst du ganz oben den jeweiligen Namen, z.B.

<?php $thisPage="home"; ?>

und ins Menue:

<ul>
<li <?php if ($thisPage=="home") echo " id=\"active\"" ;?>>
<a href="pfad.php">Home</a></li>
...
</ul>

Wahrscheinlich gibt es elegantere/globale Loesungen, aber dies funktioniert... und das ist jetzt auch nicht bootstrap-spezifisch.

Beast20

Beitragsersteller

27.02.2017, 21:39

danke, leider erkennt die nav dann die Variable nicht an.. wie muss ich das einbinden?

kuechentiger

28.02.2017, 13:02

@Beast20

http://php.net/manual/de/language.variables.scope.php

DragonFireX

21.04.2017, 16:59

Arbeite mit JQuery und entferne die Klasse "active" von einem div und füge sie bei einem neuen hinzu

$(object).removeClass("active");
$(object).addClass("active");

Ähnliche Beiträge

weiße Ecken bei border-radius?

Hi,

ich habe eine Navbar von Bootstrap auf meiner Website und ein Accountsystem, bei dem das Profilbild oben rechts angezeigt wird. Aus irgendeinem Grund werden, trotz, dass ich einmal per Bootstrap Klasse rounded-circle und auch selbst:

border-radius: 50%;

weiße Ecken angezeigt. Das Bild ist eigentlich transparent. Am Bild selber kanns aber net liegen, weil ich unterschiedliche getestet habe...

Mein Code:

<img src="/img/profile-images/donut.png" alt="user-img" class="user-img-navbar rounded-circle shadow-lg">

So sieht das dann aus:

Ich weiß nicht ob´s man gut erkennen kann aber direkt um das bild sind so weiße ecken. ich habe auch schon die hintergrundfarbe der navbar auf weiß geändert... man sieht die ecken aber trotzdem noch...

Jemand ne idee warum da weiße ecken sind? :D

...zum Beitrag

JS Navbar klappt nicht, Hilfe?

Hallo,

Ich wollte mal nach Hilfe fragen, da mein Mobile Menu für die Navigation nicht klappt.

Ich kann das Menu öffnen wenn ich beim Event Listener den . durch ein , ersetze aber kann dann nichts anklicken da es sich direkt Schließt

const selectElement = (element) => document.querySelector(element);


selectElement('.nav-menu-icons').addEventListener('click', () => {
    selectElement('nav').classList.toggle('active');
});

...zum Beitrag

Wie kann ich diese Navbar fixieren?

Hallo,

ich mache gerade meine erste Website und kenne mich noch sehr wenig mit HTML/CSS aus. Ich schaffe es leider nicht, dass meine Navigation beim runter scrollen oben fixiert bleibt. Wie kann man das ausschließlich mit HTML und CSS (also kein Javascript oder so) beheben?

Hier der HTML-Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Unser Shop</title>
  <link rel="stylesheet" href="styles.css" type="text/css">
</head>


<body>


<div class="topnav">
  <img src="test.png" alt="test" width="100" height="40" style="float:left; margin-right:25px;">
  <a class="active" href="index.html">Willkommen</a>
  <a href="products.html">Unsere Produkte</a>
  <a href="about-us.html">Über uns</a>
</div>


<div class="page">
<p> Willkommen! </p>
</div>




</body>
</html>

Und hier der CSS-Code:

body {
  background-color: green;
  margin: 0px;
}


/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}


/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}


.page {
  background-color: white;
  margin-right: 125px;
  margin-left: 125px;
  padding-bottom: 85%;
}

...zum Beitrag

Warum funktioniert das Materialize-Framework nicht?

Hallo zusammen

In einigen meiner Projekte habe ich Bootstrap angewendet. Nun wollte ich aber mal was Neues ausprobieren. Auch, weil mir das Design von Bootstrap nicht so gut gefällt. Darum habe ich das Materialize-Framework entdeckt, welches mir wirklich sehr gut gefällt. Ich würds gerne anwenden. Doch immer da, wo Javascript ins Spiel kommt, funktioniert gar nichts mehr.

Als Einstieg wollte ich einfach nur eine Navbar einrichten. Dazu habe ich 1:1 alles kopiert, wies in der Dokumentation steht. Zuerst habe ich von dieser Seite das HTML-Setup übernommen und Materialize heruntergeladen.

Dann habe ich von dieser Seite die "Extended Navbar with Tabs" kopiert. So sollte sie aussehen:

Mein Quellcode sieht dann am Ende so aus:

Meine Seite sieht aber so aus:

Die Test-Div's 1-4 sollten ja nur angezeigt werden, wenn sie in der Navbar angeklickt werden. Es ist ja klar, dass sie angezeigt werden, weil sie nicht durch CSS versteckt werden. Das bedeutet wohl, dass die Dokumentation von Materialize nicht vollständig ist. Wenn ich nicht alle Infos in der Dokumentation finde, muss ich das Framework in Frage stellen und ggf. darauf verzichten.

...zum Beitrag

PHP Website online stellen mit Xampp

hay Leute :) Ich möchte um etwas anschaulicher darzustellen eine PHP Website für kurze Zeit online stellen. Benutzen würde ich dafür am Liebsten dafür Xampp nur Leider kann ich nicht auf die Website zugreifen wenn ich zum Beispiel in den Browser (Google Chrome) Meine ip/ Localhost oder 127.0.0.1 Eingebe. Die Dinste von Xampp sind alle gestartet. Ich hoffe ihr könnt mir helfen. Meine Betriebssystemart :Windows 7 64bit

...zum Beitrag

Wie kann ich iframe Cookies speichern?

Hallo zusammen, ich bin neu hier im Forum und hoffe, dass meine Frage / mein Problem hier richtig platziert ist: ich möchte für eine Auftragsarbeit (Insektenschutz-Website) eine Website mit einem iframe der url https://www.neher.de/produkte erstellen.

Zur Erstellung nutze ich bootstrap. Den iframe habe ich in die html eingebunden, es wird auch alles angezeigt und geladen - so weit so gut.

Jetzt ist es aber so, dass auf der eingebundenen neher.de Website Cookies abgefragt werden. Wie schaffe ich es möglichst mit JavaScript diese Cookies zu speichern?

Sonst muss ich ja wenn ich z.B. auf das Produkt "Pendeltür" klicke, wieder die Cookies akzeptieren, obwohl ich das ja schon getan habe - ich hoffe ihr versteht was ich damit meine.

Leider habe ich keine Ahnung von JS - ich hoffe es kann mir hier jemand helfen.

Schon mal vielen Dank dafür - VG Felix

Das ist der html Code:

<!DOCTYPE html><html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>Bootstrap demo</title>
    <link rel="stylesheet" href="bootstrap.css" />
    <style> main iframe { width: 100%; height: 65vh; }</style>
  </head>
  <body>
    <main>
      <iframe src="https://www.neher.de/produkte" frameborder="0></iframe>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
       crossorigin="anonymous"></script>
    </main>
  </body>
</html>

...zum Beitrag

Nginx php höer stellen geht nicht?

Guten Tag ich wollte auf meinen Server die upload begrenzung auf 100M stellen aber es geht nicht habe client_max_body_size 100M; in die nginx.conf gepackt und in die einzelnen dateien für dei Websites habe es natürlich auch in die /etc/php/8.1/fpm/php.ini

upload_max_filesize = 20M
post_max_size = 25M

reingepackt habe alles neu gestartet aber es geht nicht voran kann es liegen

...zum Beitrag

Wie verhindere ich, dass bei PHP-Dateien ein Download automatisch startet (Hoster all-inkl.com)?

Ich habe obiges Problem. Meine Website besteht aus HTML-Code, in der ich Kopf- und Footerzeilen per php einbinde. Ich schreibe den Code noch selber und benutze kein Wordpress.. Per Eintrag in der .htaccess-Datei parse ich diese html-Dateien zu PHP.

Beispieleintrag .htaccess:
AddType application/x-httpd-php .htm .html .php
AddHandler server-parsed .php
Options +Includes

ausprobiert habe ich auch schon:
AddHandler php-script .html . htm

und diverse andere Variationen mit php7...

Das funktioniert insoweit, dass die HTML-Dateien tatsächlich geparsed werden, aber sobald ich eine PHP-Applikation habe, die ich dann aufrufe, der Browser (Chrome, Firefox etc.) ein Download starten will.

Ist irgendwer ebenfalls beim Hoster all-ink.com und weiß, was ich in der .htaccess eintragen muss, so dass HTML-Dateien durch den Parser geschickt werden, aber php-Scripte ganz normal ausgeführt werden? Ich habe nur Webspace, keinen Zugriff auf den Server.

...zum Beitrag

Bootstrap 5 Template für persönlivhe Seite?

Moin!

Ich würd gern langsam an einer persönlivhen Website arbeiten. Im Frontend liegt jedoch nicht gerade meine Stärke.

Die Seite würd ich gern im Backend mit dem PHP Framework Laravel umsetzen, also Laravel 10 :)

Hat da jemand Empfehlungen für mich? Danke!

Ansonsten muss ich's wohl oder übel selbst machen :p

...zum Beitrag

Terminal ausgabe auf einer html seite einbinden ?

Hallo ich habe aus meinem Banana Pi ein Internetradio eingerichtet immoment mit 8 sendern. Es wird geteuert über eine Kleine website im lokalem Netzwerk. senderwechsel und lautstärke sind mittels php script eingebunden.

Mein Problem

Ich würde gerne auf der website sehen was gerade läuft! im Terminal bekomme ich diese ausgabe wenn ich den befehl "mpc" eingebe. wie kann ich diese ausgabe in die html seite einbinden ?

...zum Beitrag

Arduino Daten auf eine Datenbank speichern?

Wir müssen für ein Schulprojekt Daten von unserem Arduino auf eine Datenbank von phpMyAdmin speichern und auf eine php Website ausgeben wir haben unsere Datenbank schon mit der Website verbunden und können Werte die wir per Hand eingegeben haben ausgeben. Unser Problem wir wissen nicht wie wir die Daten vom Arduino direkt speichern und nicht per Hand eintragen müssen um sie auszugeben.

...zum Beitrag

Php Seite zeigt nichts an?

Hi Ich habe eine Website erstellt mit php und wenn ich die index.php Datei in das Verzeichnis /var/www/html stelle wird mir nichts angezeigt im Webbrowser wenn ich in die Datei nur phpinfo (); Reinschreibe führt er es aus bei der Website ist nicht mal ein Quellcode verfügbar

Ein linux Rechner mit Apache mysql und php5

Jemand Ideen woran das liegen könnte?? Vielen Dank im voraus

...zum Beitrag

Zugriff Samba Freigabe von Linux Server über Active Directory steuern?

Hallo zusammen,

wir setzen bei unseren Kunden Linux Server ein. Dort läuft auch ein SMB Dienst, auf den per Windows-Explorer aus dem Kundennetz zugegriffen werden kann.

Meine Frage wäre, ob der Linux Server in Active Directory eingebunden werden kann, sodass über AD der Zugriff auf diese Samba Freigaben auf bestimmte Benutzer eingeschränkt werden kann (aktuell kann jeder aus dem Kundennetz auf diese Freigaben zugreifen).

Alternativ war meine Überlegung, ob nicht einfach eine Gruppe in AD angelegt werden kann, die den Zugriff auf diese Samba Freigaben "blockiert" und die, die darauf zugreifen dürfen, bekommen diese Gruppe auch nicht zugewiesen.

Vielen Dank.

...zum Beitrag

Kann man mit PHP in einer HTML Datei z.B. Div Container hinzufügen?

Hallo, ich möchte ein CMS für eine Website schreiben (Ich weiß, dass es bereits bestehende gibt, aber ich möchte eins aus Neugier schreiben). Wie kann man per PHP neue Elemente (z. B. Div Container) mit Daten aus einer Datenbank befüllen und diese dann als z.B. Artikel anzeigen lassen. Ist das überhaupt möglich mit PHP oder benötigt man dafür JavaScript? Vielen Dank im Voraus. :) hadome

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen