nicht angemeldet
Hallo Gunnar,
erst mal danke für die Antwort, ich hoffe ich mach es diesmal richtig.
Ich hab die Dateien mal so angepasst, dass ich sie hochladen kann.
Der erste Code ist die index.html, der zweite ist menu.js und der dritte ist style.css. Wenn du alles in einen Ordner abspeicherst und index.html ausführst sollte es funktionieren.
Beim klicken auf die Menüpunkte öffnen sich jetzt natürlich keine Seiten, da die lokal auf meinem PC gespeichert sind.
Von CMS bzw. PHP oder SSI hab ich keine Ahnung. Ich bräuchte nur eine grobe Anleitung, wie ich vorgehen sollte, den Rest schaff ich schon irgendwie (hoffentlich).
index.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body style="font-family: Arial">
<script src="menu.js"></script>
<footer>
<div style="padding: 2px">Bei Fragen oder Anmerkungen bitte an .... wenden.</div>
</footer>
<div style="text-align: right;font-family: arial">Created by C....</div>
</body>
</html>
menu.js:
document.write(`
<p>
<header>
<h1 style="color:rgb(0, 0, 0);font-family:Arial;font-size:25px;text-align: left;margin-left: 25px">
<img alt=Logo witdh=80 height=80 src="./Logo.png"> Überschrift</h1>
</header>
<!--Sidebar-Menü-->
<div class="wrapper">
<nav>
<ul class="menu-area">
<li><a href="index.html"><strong>Startseite</strong></a></li>
<li><a href="#"><strong>1</strong></a>
<ul>
<li><a href="1.1.html">Übersicht 1.1</a></li>
<li><a href="#">1.2</a>
<ul>
<li><a href="1.2.1.html">1.2.1</a></li>
</ul>
</ul>
</li>
<li><a href="#"><strong>2</strong></a>
<ul>
<li><a href="2.1.html">2.1</a></li>
<li><a href="2.2.html">2.2</a></li>
<li><a href="#">2.3</a>
<ul>
<li><a href="2.3.1.html">2.3.1</a></li>
<li><a href="2.3.2">2.3.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><strong>3</strong></a>
<ul>
<li><a href="#">3.1</a></li>
<li><a href="#">3.2</a>
<ul>
<li><a href="#">3.2.1</a></li>
<li><a href="#">3.2.2</a></li>
<li><a href="#">3.3.3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" style="font-size: 20px">Menüpunkt hizufügen</a></li>
</ul>
</nav>
</div>
</p>
`);
style.css
header{
text-align: center;
border-radius: 7px;
padding: 5px 5px 5px 5px;
box-shadow: 0 5px 15px rgba(0,0,0,.15);
margin-bottom: 0px;
width: 100%
}
footer{
position: relative;
clear: both;
color: #0e0d0d;
text-align: center;
font-family: arial;
font-size: 20px;
border-radius: 7px;
padding: 25px;
box-shadow: 0 5px 15px rgba(0,0,0,.08);
margin: 25px 25px 25px 0px;
width: 100%
}
/*Menü*/
nav{
margin-top: 5px;
position: relative;
float: left;
box-shadow: 0 5px 15px rgba(0,0,0,.30);
}
/*Frame*/
article{
margin-top: 0px;
margin-bottom: 75px;
float: left;
width: 70%;
height: 80%;
}
iframe { border: none;
}
/*main*/
body{
overflow-x: hidden;
height: 100vh;
}
.wrapper{
position: relative;
margin-left:0px;
padding: 5px;
}
.menu-area{
list-style: none;
padding: 0;
margin: 0;
background: #3d3d3d;
width: 250px;
}
.menu-area li{
position: relative;
}
/*Mainmenu*/
.menu-area li a{
font-family: Arial;
font-size: 25px;
text-align: center;
height: 36px;
position: relative;
border-bottom: 1px solid #ddd;
display: block;
text-decoration: none;
padding: 12px 12px;
color: #fff;
}
/*Mainmenu*/
.menu-area li a strong{
display: block;
text-transform: uppercase;
font-family: Arial;
font-size: 25px;
letter-spacing: 2px;
}
/*Hoverfarbe*/
.menu-area li:hover > a{
color: rgb(255, 0, 0);
}
/*Animation*/
.menu-area li ul,
.menu-area li ul li ul{
background: #3d3d3d;
opacity: 0;
visibility: hidden;
transition: 300ms;
z-index: 999;
left: 280px;
top: 0;
list-style: none;
position: absolute;
height: auto;
min-width: 250px;
padding: 0;
margin: 0;
}
/*Position der PopupMenüs*/
.menu-area li:hover > ul, .menu.area li ul li:hover > ul{
display: block;
opacity: 1;
visibility: visible;
left: 250px;
}
/*Schrifteinstellungen der PopupMeüs*/
.menu-area li ul li a{
text-transform: uppercase;
font-family: Arial;
font-size: 20px;
letter-spacing: 2px;
padding: 10px;
text-align: center;
border: 0;
border-bottom: 1px solid #ddd;
border-left: 1px solid #ddd;
height: auto;
}
/*Ka*/
.menu-area li ul li ul{
left: 230px;
top: 0;
border: 0;
}
Gunnar Bittersmann
Der Martin
MudGuard
Rolf B
JürgenB
Matthias Scharwies