Dieses Forum nutzt Cookies
Dieses Forum verwendet Cookies, um deine Login-Informationen zu speichern, wenn du registriert bist, und deinen letzten Besuch, wenn du es nicht bist. Cookies sind kleine Textdokumente, die auf deinem Computer gespeichert sind; Die von diesem Forum gesetzten Cookies düfen nur auf dieser Website verwendet werden und stellen kein Sicherheitsrisiko dar. Cookies auf diesem Forum speichern auch die spezifischen Themen, die du gelesen hast und wann du zum letzten Mal gelesen hast. Bitte bestätige, ob du diese Cookies akzeptierst oder ablehnst.

Ein Cookie wird in deinem Browser unabhängig von der Wahl gespeichert, um zu verhindern, dass dir diese Frage erneut gestellt wird. Du kannst deine Cookie-Einstellungen jederzeit über den Link in der Fußzeile ändern.

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Frames?
#1
Hallo,

jaja, ich weiß, Frames sind tot Smile
Ich hab das letzte mal mit HTML was vor 15 Jahren gemacht...aber jetzt muss ich beruflich nochmal ran.
Ich soll ein Webinterface bauen, mit dem sich Hardware von uns konfigurieren lässt.
Das ganze soll auf der linken Seite ein Menü haben, rechts sollen dann die Konfigurationen gemacht werden.
Ich möchte aber nicht in jeder Datei das Menü mitschleifen.
Früher hätte man sowas wohl mit Frames gemacht. Wie erschlägt man sowas heute mit Bootstrap? Hat mir jemand ein paar Stichworte?

Gruß

Daniel
Zitieren
#2

Benenne deine Dateien in PHP dateien um. Bsp.: index.php kontakt.php usw.
Dann erstellst du dir eine menu.php
Nun kannst du mit den Befehl:
HTML5
  1. <?php include_once("menu.php"); ?>


Die Datei an Jeder beliebigen Stelle in deine Seite laden.

Beispiel index.php

HTML5
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4.    <meta charset="utf-8">
  5.    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6.    <meta name="description" content="">
  7.    <meta name="author" content="">
  8.    <link rel="icon" href="../../../../favicon.ico">
  9.    <title>Menu PHP include</title>
  10.  
  11. Im Anhang ist ein Entwurf mit Sidebar und included Menu!
  12.  
  13.  
  14. Im Anhang ist ein Entwurf mit Sidebar und included Menü!
  15.    <!--Template based on URL below-->
  16.    <link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/starter-template/">
  17.  
  18.    <!-- Bootstrap core CSS -->
  19.    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  20.  
  21.    <!-- Place your stylesheet here-->
  22.    <link href="/css/stylesheet.css" rel="stylesheet" type="text/css">
  23. </head>
  24.  
  25.  
  26.    <header>
  27.        <?php include_once("menu.php"); ?>
  28.    </header>
  29.  
  30.    <main role="main" class="container">
  31.  
  32.        <div class="text-center mt-5 pt-5">
  33.            <h1>Bootstrap starter template</h1>
  34.            <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  35.        </div>
  36.  
  37.    </main><!-- /.container -->
  38.  
  39.  
  40.    <!-- Bootstrap core JavaScript
  41.    ================================================== -->
  42.    <!-- Placed at the end of the document so the pages load faster -->
  43.    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  44.    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  45.    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  46.  
  47. </body>
  48.  
  49. </html>



Beispiel menu.php

HTML5
  1. <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  2.    <a class="navbar-brand" href="#">Navbar</a>
  3.    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
  4.        <span class="navbar-toggler-icon"></span>
  5.    </button>
  6.  
  7.    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
  8.        <ul class="navbar-nav mr-auto">
  9.            <li class="nav-item">
  10.                <a class="nav-link" href="#">Home</a>
  11.            </li>
  12.            <li class="nav-item">
  13.                <a class="nav-link" href="#">Link</a>
  14.            </li>
  15.            <li class="nav-item">
  16.                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  17.            </li>
  18.            <li class="nav-item dropdown">
  19.                <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
  20.                <div class="dropdown-menu" aria-labelledby="dropdown01">
  21.                    <a class="dropdown-item" href="#">Action</a>
  22.                    <a class="dropdown-item" href="#">Another action</a>
  23.                    <a class="dropdown-item" href="#">Something else here</a>
  24.                </div>
  25.            </li>
  26.        </ul>
  27.        <form class="form-inline my-2 my-lg-0">
  28.            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
  29.            <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
  30.        </form>
  31.    </div>
  32. </nav>



Im Anhang ist ein Entwurf mit Sidebar und included Menu.
siehe Demo


Angehängte Dateien
.rar   Sidebar.rar (Größe: 4,41 KB / Downloads: 0)
Zitieren
#3
Danke schon mal.

Dann wird aber die Sidebar jedesmal neu geladen wenn ich einen Link aus der Sidebar klicke, oder? Wenn ich also nach unten gescrollt habe (können ja mehrere Menüpunkte sein) komme ich nach dem klicken wieder oben raus.

Gruß

Daniel
Zitieren
#4
ja so ist das. wenn du das nicht willst soltest die Seiten mit Ajax laden.

jQuery Ajax Load
Zitieren
#5
Habs jetzt wirklich mit nem Include gelöst.
Der aktive Link wird dann per PHP auF "active" gesetzt und gut. Reicht mir vorerst.

Danke Smile
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
[-]
Willkommen im ersten deutschen Bootstrap-Forum
You have to register before you can post on our site.

Benutzername/E-Mail:


Passwort:





[-]
Letzte Beiträge
Schacteln 2er div s nebneinander
Last Post: The-Error
Gestern 11:37
» Replies: 3
» Views: 69
Navbar Dropdown 2 columns funktioniert n...
Last Post: Niamh
Gestern 11:29
» Replies: 2
» Views: 20
PostgreSQL oder mariaDB bei sehr grossen...
Last Post: rustybatman
Gestern 09:18
» Replies: 0
» Views: 8

[-]
Private Messages
Please login or register to use this functionality.

[-]
Statistics
» Members: 271
» Latest member: havor99
» Forum threads: 237
» Forum posts: 962

Full Statistics

[-]
Tutorials
Get Started
Text/Typography
Gridsystem
Dropdowns
Navigation Bar
Modal
Farben
Jumpotron
Popover
Formulare
Carousel (Slider)
Die Höhe von Elementen mit Klassen h-*
Flip Cards
Bild Overlay-Hover-Effekt
Google Fonts einbinden
Flexbox Bootstrap 4
Responsive Breakpoints

[-]
Wer ist online
There are currently no members online.

>