Beispielvorlage
Hier ist zum Download eine auf Bootstrap basierende HTML - Vorlage mit allen benötigten CSS und Javascriptdateien. Im CSS-Ordner findet man eine Datei für eigene Definitionen. Das Menü muss in allen HTML -Dateien gleich sein, die Links(Verweise) müssen entsprechend der Dateinamen angepasst werden.
Download: Beispielvorlage (komplett)
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Verschlüsselung</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" /> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="css/meineDefinitionen.css" /> </head> <body> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand zumachen" href="#"> Verschlüsselung</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> elementar <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#" class="zumachen">Transpositionsverfahren</a></li> <li><a href="#" class="zumachen">monoalphabetische Substitution</a></li> <li><a href="#" class="zumachen">polyalphabetische Substitution</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> historisch<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#" class="zumachen">Cäsar</a></li> <li><a href="#" class="zumachen">Vigenère</a></li> <li><a href="#" class="zumachen">One-Time-Pad</a></li> </ul> </li> <li><a href="#" class="zumachen">Kerckhoffs Prinzip</a></li> <li><a href="#" class="zumachen">symmetrisch</a></li> <li><a href="#" class="zumachen">asymmetrisch</a></li> <li><a href="#" class="zumachen">VeraCrypt</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#" class="zumachen"><span class="glyphicon glyphicon-user"></span> Impressum</a></li> </ul> </div> </div> </nav> <div class="container-fluid"> <!-- die Klasse Container umschließt alles --> <div class="col-xs-12 col-sm-6 col-md-6"> <!-- hier steht der Text --> <h1>Verschlüsselung</h1> <p> Auf diesen Seiten soll ein kleiner Überblick über die Verschlüsselungsverfahren gegeben werden. </p> <!-- Ende der Seite: alles andere muss gleich bleiben, nur die Links im Menü muss auf die richtige Seite verweisen.--> </div> </div><!-- ende der Klasse Container--> <!-- noch ein Script, damit die Menüs geschlossen werden, auch wenn auf die eigene Seite verlinkt wird --> <script> $('.zumachen' ).click(function() { $('#myNavbar').collapse('hide'); }); </script> </body> </html>