Durchsuche Foren

(Erweiterte Suche)

Foren-Statistiken
» Mitglieder: 43.263
» Neuestes Mitglied: stevenjohns726
» Foren-Themen: 508
» Foren-Beiträge: 2.071

Komplettstatistiken

Benutzer Online
Momentan sind 48 Benutzer online
» 0 Mitglieder
» 46 Gäste
Bing, Google

Aktive Themen
Careprost: Ways To Help E...
Forum: DataTables
Letzter Beitrag: stevenjohns726
Vor 8 Stunden
» Antworten: 0
» Ansichten: 6
Variable aus Funktion zur...
Forum: Javascript
Letzter Beitrag: Kai_Behncke
Gestern, 14:58
» Antworten: 2
» Ansichten: 28
Probleme mit Canvas
Forum: Javascript
Letzter Beitrag: Sempervivum
Gestern, 09:28
» Antworten: 5
» Ansichten: 97
Bildauswahl Reset
Forum: Javascript
Letzter Beitrag: Sempervivum
25.03.2024, 05:38
» Antworten: 6
» Ansichten: 100
HTML Tabelle filtern + Na...
Forum: Javascript
Letzter Beitrag: Sempervivum
24.03.2024, 17:31
» Antworten: 1
» Ansichten: 53
Grid oder Flex
Forum: Css
Letzter Beitrag: Sempervivum
22.03.2024, 16:29
» Antworten: 5
» Ansichten: 139
Class in PHP While anspre...
Forum: Javascript
Letzter Beitrag: saturnus
22.03.2024, 06:55
» Antworten: 4
» Ansichten: 67
Unleashing Potency: The I...
Forum: Javascript
Letzter Beitrag: irenejoshi1717
21.03.2024, 12:03
» Antworten: 0
» Ansichten: 29
CSS Animationen verbinden
Forum: Css
Letzter Beitrag: AndreasB
21.03.2024, 08:23
» Antworten: 8
» Ansichten: 166
Fetch Problem mit Sidebar...
Forum: Javascript
Letzter Beitrag: tiger5nrg
19.03.2024, 14:08
» Antworten: 7
» Ansichten: 166

  Careprost: Ways To Help Eyelashes Grow | Genericvilla
Geschrieben von: stevenjohns726 - Vor 8 Stunden - Forum: DataTables - Keine Antworten

Careprost has established itself as a leading solution for individuals seeking to enhance the growth of their eyelashes. Renowned for its efficacy and reliability, Careprost offers a powerful formula designed to stimulate and nourish lash growth, resulting in longer, thicker, and more beautiful lashes over time. Furthermore, Careprost offers a user-friendly application process, making it convenient for individuals to incorporate into their daily beauty routines. With a simple application to the base of the upper lashes using the provided applicator, Careprost seamlessly fits into your regimen without any hassle. 

To Learn More, Please Visit Our Website: Genericvilla 

Drucke diesen Beitrag

  Variable aus Funktion zurückerhalten
Geschrieben von: Kai_Behncke - Gestern, 11:12 - Forum: Javascript - Antworten (2)

Hallo liebe Leute,

für einige ist diese Aufgabe vielleicht ganz einfach (für mich leider nicht).

Ich nutze eine API, um verschiedene Koordinatensystemsyteme umzuwandeln.

Code:
    require([
          "esri/geometry/projection"
], function(projection) { ....

Zwingend muss die Funktion über ein load().then... aufgerufen werden:
Code:
projection.load().then(function() {
var punkt2=projection.project(punkt1, cs2);
alert ("In Function: "+punkt2.x);
});

alert ("Ausserhalb Function: "+punkt2.x);

Innerhalb dieser Funktion erhalte ich auch die völlig korrekten Koordinaten (hier: punkt2.x). Jedoch: Wie kann ich auf die Variable "punkt2" ausserhalb dieser Funktion zugreifen?
alert ("Ausserhalb Function: "+punkt2.x);  sagt mir, dass die Variable nicht existiert.

Irgendwie stehe ich da völlig auf dem Schlauch. Kann mir da jemand einen Tipp geben?
Danke im voraus :-)

Drucke diesen Beitrag

  Probleme mit Canvas
Geschrieben von: Derbestetv - 25.03.2024, 13:54 - Forum: Javascript - Antworten (5)

Hallo ich habe ein Problem mit canvas 
hier ist der code da hab ich kommentiert welche zeilen der fehler macht
(ich weiß ich bin kein profi und das mit dem einrücken muss ich noch machen das ist je erstmal nur ein test)

Code:
function layout(ctx,x,y,typ,name,richtung,color_top,color_bottom,color_weiche){
console.log(x+" "+y+" "+color_top)
//ctx.fillStyle = '#8b8c7a'; // Roter Hintergrund
//    ctx.fillRect(x+ 1, y+ 1, 139, 71);
if (typ == "Signal"){
    if (richtung == "0"){

console.log("test")
}else{
    ctx.fillStyle = color_top;
            ctx.beginPath();
            ctx.fillRect(x + 1, y + 1, 139, 30);


            ctx.fillStyle = color_bottom;
            ctx.beginPath();
            ctx.fillRect(x + 1, y + 30, 139, 41);

            var xh = x + 120;
            var yh = y + 56;
            ctx.fillStyle = "#000000";
                    ctx.beginPath();
                    ctx.fillRect(xh - 85, yh - 11, 42, 22);

                    ctx.fillStyle = "#FFFFFF";
                    ctx.beginPath();
                    ctx.fillRect(xh - 84, yh - 10, 40, 20);


                    ctx.fillStyle = "#000000";
                    ctx.font = "bold 12px Arial";
                    var width = ctx.measureText(name).width;
                    ////("_______________________");
                    ////(width);
                    ////("_______________________");
                    ctx.fillText(name, xh - 57 - width, yh + 4);
                    var xd = xh + 1;

                    ctx.fillStyle = "#000000";
                    ctx.beginPath();
                    ctx.arc(xd - 30, yh - 40, 7, 300, Math.PI * 2 / 4, false);
                    ctx.fill();
                    ctx.beginPath();
                    ctx.fillRect(xd - 100, yh - 47, 70, 14);
                    ctx.fill();
                    ctx.beginPath();
                    ctx.arc(xd - 100, yh - 40, 7, 900, Math.PI * 2 / 1.3, false);
                    ctx.fill();
                    ctx.beginPath();
                    ctx.fillRect(xd - 25, yh - 42, 10, 4);
                    ctx.fill();
                    ctx.beginPath();
                    ctx.fillRect(xd - 15, yh - 47, 5, 14);
                    var xs = xd - 30;
                    var ys = yh + 4;
ctx.fillStyle = "#000000";
ctx.beginPath();
ctx.arc(xh, yh, 5, 1, Math.PI * 2 / 0.1, false);
ctx.arc(xd, yh - 40, 5, 1, Math.PI * 2 / 0.1, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "#000000";
ctx.fillRect(xd - 120, yh - 25, 139, 10);
ctx.fill();







    ctx.beginPath();
    //ctx.arc(xd, yh, 3.5, 1, Math.PI * 2 / 0.1, false);
    ctx.arc(xd - 78, yh - 40, 5, 1, Math.PI * 2 / 0.1, false);
    ctx.arc(xd - 98, yh - 40, 5, 1, Math.PI * 2 / 0.1, false);

    //ctx.arc(xh, yh, 3.5, 1, Math.PI * 2 / 0.1, false);

    //ctx.arc(xd, yh - 40, 3.5, 1, Math.PI * 2 / 0.1, false);
//ctx.moveTo(xs, ys - 40);
//ctx.lineTo(xs - 8, ys - 48);
//ctx.lineWidth = 3;


ctx.arc(xd, yh, 3.5, 1, Math.PI * 2 / 0.1, false);//diese Zeile und die darunter siend die die das problem verursachen
ctx.arc(xd, yh - 40, 3.5, 1, Math.PI * 2 / 0.1, false);

ctx.moveTo(xd - 30, yh + 4);
                    ctx.lineTo(xd - 40, yh - 0);
                    ctx.lineTo(xd - 30, yh - 4);

ctx.rect(xd - 70, yh - 22, 40, 4);

ctx.arc(xd - 70, yh - 20, 2, 900, Math.PI * 2 / 1.3, false);
ctx.arc(xd - 30, yh - 20, 2, 300, Math.PI * 2 / 4, false);

    ctx.closePath();
    ctx.clip();
}
}
}
Hier ist das Bild von dem Fehler

Drucke diesen Beitrag

  HTML Tabelle filtern + Navigation mit Pfeiltasten
Geschrieben von: anfaenger - 23.03.2024, 17:20 - Forum: Javascript - Antworten (1)

Hallo zusammen,

ich würde mir gerne eine "Link-Liste" in HTML erstellen. In dieser möchte ich alle für mich wichtigen Links eintragen. 
Wenn ich die HTML Seite aufrufe, möchte ich ein Textfeld haben, in dem ich die Tabelle nach dem Suchtext filtern kann.

Soweit habe ich das - als blutiger Anfänger - auch schon zusammen-ge-googelt...  Shy

Code:
<!DOCTYPE html>
<html>
<head>
    <title>Linkliste</title>
<style>
    <!-- color every other table cell background-->
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 10px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
}

th {text-align:center}

tr:nth-child(even) {background-color: #adadad;}
tr:nth-child(odd) {background-color: #dad8d8;}
</style>


</head>
<body>

    <script>
        function searchTable() {
            var input, filter, found, table, tr, td, i, j;
            input = document.getElementById("FilterText");
            filter = input.value.toUpperCase();
            table = document.getElementById("URLTable");
            tr = table.getElementsByTagName("tr");
            for (i = 1; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td");
                for (j = 0; j < td.length; j++) {
                    if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                        found = true;
                    }
                }
                if (found) {
                    tr[i].style.display = "";
                    found = false;
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
        </script>


    <center>
<h1>LINK LISTE</h1>
<p><i>lorem ipsum</i></p>
</center>

<p><br></p>
<p><strong> Filter:</strong>    <input id='FilterText' onkeyup='searchTable()' type='text'autofocus> <button onclick=location.reload()>Clear input field</button> </p>
<p>  </p>
<p><br></p>
<table id='URLTable'>
   
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
            <th>COMMENTS / NOTES</th>
        </tr>
   
    <tbody>
        <tr style=" cursor: pointer;" onclick="window.open('https://www.google.de')">
            <td>Germany</td>
            <td>Earth</td>
            <td>search01.google.com</td>
            <td>physical x86 Server</td>
            <td>Testing</td>
        <tr/>                                             
        <tr style=" cursor: pointer;" onclick="window.open('https://www.google.de')">
            <td>Germany</td>
            <td>Earth</td>
            <td>search02.google.com</td>
            <td>physical x86 Server</td>
            <td>Testing</td>
        <tr/>          
        <tr style=" cursor: pointer;" onclick="window.open('https://www.google.de')">
            <td>Germany</td>
            <td>Earth</td>
            <td>search03.google.com</td>
            <td>Virtual Machine</td>
            <td>Testing</td>
        <tr/>                                                                                
        </tbody>   
</table>

</body>
</html>

Der nächste Schritt wäre, dass ich - nachdem ich gefiltert habe - mit den Pfeiltasten den richtigen Eintrag auswählen kann, und den Link dann mit ENTER aufrufen kann.

Das will aber nicht so recht funktionieren. Da ich nicht wirklich programmieren kann, sondern eher "Fundstücke" irgendwie zuammen würfele, sieht der aktuelle Code ("verschönert" durch den Bing CoPilot) im Moment so aus:

Code:
<!DOCTYPE html>
<html>
<head>
    <title>Link Liste</title>
<style>
    <!-- color every other table cell background-->
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 10px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
}

th {text-align:center}

tr:nth-child(even) {background-color: #adadad;}
tr:nth-child(odd) {background-color: #dad8d8;}
</style>


</head>
<body>

    <script>
        var selectedRow = null;

        function searchTable() {
            var input, filter, found, table, tr, td, i, j;
            input = document.getElementById("FilterText");
            filter = input.value.toUpperCase();
            table = document.getElementById("URLTable");
            tr = table.getElementsByTagName("tr");
            for (i = 1; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td");
                for (j = 0; j < td.length; j++) {
                    if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                        found = true;
                    }
                }
                if (found) {
                    tr[i].style.display = "";
                    found = false;
                } else {
                    tr[i].style.display = "none";
                }
            }
        }

        function selectRow(row) {
            if (selectedRow) {
                selectedRow.style.backgroundColor = "";
            }
            selectedRow = row;
            selectedRow.style.backgroundColor = "yellow";


        document.getElementById("FilterText").addEventListener("keydown", function(event) {
            if (["ArrowDown", "ArrowUp", "Enter"].includes(event.key)) {
                navigateTable(event);
            }
        });
        function attachKeydownToRows() {
        var table = document.getElementById("URLTable");
        var cells = Array.from(table.getElementsByTagName("td"));
        cells.forEach(cell => {
            cell.addEventListener("keydown", function(event) {
                if (["ArrowDown", "ArrowUp", "Enter"].includes(event.key)) {
                    navigateTable(event);
                }
            });
        });
    }

        function navigateTable(event) {
            var table = document.getElementById("URLTable");
            var rows = Array.from(table.getElementsByTagName("tr")).filter(row => row.style.display !== "none");
            var currentIndex = rows.indexOf(selectedRow);
            if (event.key === "ArrowDown") {
                if (currentIndex < rows.length - 1) {
                    selectRow(rows[currentIndex + 1]);
                }
            } else if (event.key === "ArrowUp") {
                if (currentIndex > 0) {
                    selectRow(rows[currentIndex - 1]);
                }
            } else if (event.key === "Enter" && selectedRow) {
                selectedRow.click();
            }
        }
    }


    </script>

    <center>
<h1>LINK LISTE</h1>
<p><i>lorem ipsum</i></p>
</center>

<p><br></p>
<p><strong> Filter:</strong>    <input id='FilterText' onkeyup='searchTable()' type='text'autofocus> <button onclick=location.reload()>Clear input field</button> </p>
<p>  </p>
<p><br></p>
<table id='URLTable'>
   
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
            <th>COMMENTS / NOTES</th>
        </tr>
   
    <tbody>
        <tr tabindex="0" style=" cursor: pointer;" onclick="window.open('https://www.google.de')">
            <td>Germany</td>
            <td>Earth</td>
            <td>search01.google.com</td>
            <td>physical x86 Server</td>
            <td>Testing</td>
        <tr/>                                             
        <tr tabindex="0" style=" cursor: pointer;" onclick="window.open('https://www.google.de')">
            <td>Germany</td>
            <td>Earth</td>
            <td>search02.google.com</td>
            <td>physical x86 Server</td>
            <td>Testing</td>
        <tr/>          
        <tr tabindex="0" style=" cursor: pointer;" onclick="window.open('https://www.google.de')">
            <td>Germany</td>
            <td>Earth</td>
            <td>search03.google.com</td>
            <td>Virtual Machine</td>
            <td>Testing</td>
        <tr/>                                                                                
        </tbody>   
</table>

</body>
</html>

Als Fortschritt sehe ich schon einmal an, dass ich jetzt aus dem Input-Field mit TABULAR in die Liste springen kann, und mit weiterem TABULAR durch die angezeigten Zeilen.
Aber optimal wäre es für mich (der mit DOS aufgewachsen ist  Angel) wenn das mit den Pfeiltasten möglich wäre und ich mit ENTER den Link aufrufen könnte.

Ich vermute, dass ich irgendwie aus der `searchTable()` Funktion wieder raus muss, wenn KEY_DOWN erkannt wurde.

Leider komme ich damit nicht weiter und bin am Verzweifeln.

Vielleicht hat einer der Profis einen Tip für mich? 

Vielen Dank im Voraus,

liebe Grüße!

Drucke diesen Beitrag

  Unleashing Potency: The Impact of Vidalista Black 80 mg
Geschrieben von: irenejoshi1717 - 21.03.2024, 12:03 - Forum: Javascript - Keine Antworten

Delve into the realm of heightened intimacy with Vidalista Black 80 mg pill . This potent medication, enriched with Tadalafil, is meticulously crafted to address erectile dysfunction, offering individuals a robust solution to reclaim their sexual vitality. With its higher dosage and extended duration of action, Vidalista Black 80 mg provides a powerful boost to blood flow, ensuring firm and enduring erections. Say farewell to limitations and embrace spontaneity as Vidalista Black 80 mg empowers you to take control of your intimate encounters.

The Alternative Medicine is Actilis 20 mg

Drucke diesen Beitrag

Photo Grid oder Flex
Geschrieben von: envoy - 20.03.2024, 20:58 - Forum: Css - Antworten (5)

Ich habe eine bestehende ältere Seite dich gerne anpassen und aktualisieren möchte. Ich habe das, was ich bisher gemacht habe, mit float und einer table aufgebaut, 
aber das ist ja nicht mehr zeitgemäß und ich komme an einigen Stellen auch einfach nicht weiter, daher würde ich es gerne Responsive neu aufbauen.
Bin mir aber nicht sicher, ob besser mit Flex oder mit Grid. Für einen Ansatz wäre ich dankbar.

Ich habe mal skizziert, was ich genauer erstellen will, ich hoffe, man versteht es.

Viele Grüße



Angehängte Dateien Thumbnail(s)
   
Drucke diesen Beitrag

  Class in PHP While ansprechen
Geschrieben von: saturnus - 19.03.2024, 10:00 - Forum: Javascript - Antworten (4)

Hallo

Ich habe div. Datensätze die aus einer Datenbank kommen. Innerhalb dieser Datensätze möchte ich ein onclick Event setzen, der nur für die jeweilige Zeile gültig ist.

PHP-Code:
while($row=$result->fetch_object()){
                if(
$frage != $row->frage){
                    echo 
'<div class="col-lg-12 frage">'.$row->frage.'</div>';
                }
                echo 
'<div class="col-lg-4">';
                echo 
'<a href="#" class="box a'.$row->id_fragen.'"><span class="border rounded-circle letter" id="'.$row->question.'">'.$row->letters.'</span> '.$row->solutions.'</a>';;
                echo 
'</div>';
                
$frage $row->frage;
            } 
Erklärung: 
Ich möchte jetzt gerne eine CSS Klasse hinzufügen, resp. entfernen, je nach dem, was geklickt wurde (toggleClass). Pro Zeile sind 3 Antworten zum anklicken möglich. Je nach dem was geklickt wurde, soll der Text via CSS markiert werden. Eine zuvor geklickte Antwort soll wieder neutral werden. Das soll aber nur für die betroffene Zeile gültig sein.
Als Ansatz hab ich das:
Code:
$(document).ready(function(){
    $('.box').click(function(){
        $('.box').removeClass('box-active');
        $(this).addClass('box-active');
    });
});
Bin für einen Tipp dankbar!

Drucke diesen Beitrag

  CSS Animationen verbinden
Geschrieben von: envoy - 18.03.2024, 13:36 - Forum: Css - Antworten (8)

Hallo,

ich habe 2 einzelne CSS @keyframe Animationen, einmal einen pulsierenden circle und eine animierte Positionsänderung und möchte diese gerne in 
einer Animation verbinden, sodass der pulsierende circle seine Position verändert. Wie kann ich diese beiden Animationen in eine packen?


Viele Grüße



Angehängte Dateien
.html   circle_animation.html (Größe: 1,08 KB / Downloads: 3)
Drucke diesen Beitrag

  Ajax Abfrage
Geschrieben von: BinButz - 17.03.2024, 12:55 - Forum: Php - Antworten (2)

Hallo,
ich beiße mir die Zähne an meinem Script aus....
Der Filter funktioniert einfach nicht und ich verstehe nicht warum...
Bin seit Stunden dran....
HILFE!!



Angehängte Dateien
.php   action.php (Größe: 1,01 KB / Downloads: 1)
.php   config.php (Größe: 154 Bytes / Downloads: 1)
.php   index.php (Größe: 5,21 KB / Downloads: 1)
Drucke diesen Beitrag

  Navigation verhält sich bei Breakpoint zu mobilen Ansicht suboptimal
Geschrieben von: Mick62 - 14.03.2024, 12:11 - Forum: jQuery - Keine Antworten

Hallo und Guten Tag
Hab hier Eine Navigation die ich mit Hilfe eines Tutorial erstellt habe. Ich habe mir das schön angepasst.
Doch wenn ich es im Browserfenster zusammen schiebe wird das Menue ab dem Breackpoint direkt aufgeklappt angezeigt.
Es soll sich aber erst nach Aufforderung öffnen. Ich selbst bin mit Javascript nur rudimentär vertraut

hier ist mal der gesamter code: Das script ist ganz unten

Code:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Nav</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>

  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
      list-style: none;
      box-sizing: border-box;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    body::after {
      content: "Resize Viewport ↘";
      position: fixed;
      bottom: 1em;
      right: 1em;
      opacity: 0.5;
      font-size: 0.8em;
      border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    }

    .top-navigation {
      width: 100%;
      float: left;
      background-color: darkcyan;
      position: fixed;
      z-index: 1000;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logo {
      display: block;
      padding: 1em;
    }
    .logo img {
      display: block;
      width: 100%;

      max-width: 100px;
    }

    nav {
      display: flex;
      align-items: center;
    }

    nav ul {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    nav li {
      margin: 0 10px;
    }

    nav a {
      display: block;
      text-decoration: none;
      color: white;
      border-top: 1px solid rgba(0, 0, 0, 0.5);
      padding: 1em;
      white-space: nowrap;
    }

    nav a:hover {
      background: rgba(0, 0, 0, 0.2);
      color: white;
    }

    #toggle-nav {
      background: rgba(0, 0, 0, 0.2);
      display: block;
      position: absolute;
      right: 0;
      top: 0;
      padding: 1.1rem;
      color: white;
      cursor: pointer;
    }

    #toggle-nav:hover {
      background: rgba(0, 0, 0, 0.4);
      color: white;
    }

    header {
      margin-top: 60px;
      width: 100%;
      min-height: 100vh;
      float: left;
    }
    h1 {
      font-size: 24px;
    }

    p {
      font-size: 16px;
    }

    .top-fix {
      display: flex;
      justify-content: start;
      align-items: center;
      min-height: 50vh;
      background-color: aquamarine;
    }

    .bottom-flex {
      display: flex;
      justify-content: start;
      align-items: center;
      min-height: 50vh;
      background-color: lightcoral;
    }

    @media screen and (min-width: 800px) {
      .top-navigation {
        flex-direction: row;
        align-items: center;
      }

      nav {
        float: right;
        width: auto;
        display: flex;
        align-items: center;
      }

      nav a {
        border: none;
      }

      nav li {
        width: auto;
        padding: 0;
      }

      #toggle-nav {
        display: none;
      }
    }

    @media screen and (max-width: 800px) {
      .top-navigation {
        flex-direction: column;
        text-align: center;
      }

      .logo {
        text-align: left;
        width: 100%;
        padding-left: 1em;
      }

      .logo img {
        max-width: 18%;
        height: auto;
      }

      nav {
        width: 100%;
      }

      nav ul {
        display: inline-block;
        padding: 0;
        text-align: center;
        width: 100%;
      }

      nav li {
        display: block;
        margin: 10px 0;
        width: 100%;
      }

      nav a {
        display: block;
        text-decoration: none;
        color: white;
        border-top: 1px solid rgba(0, 0, 0, 0.5);
        padding: 1em;
      }
    }
  </style>

  <body>
    <div class="top-navigation">
      <a href="#" class="logo"><img src="../images/logo" alt="Logo" /></a>
      <div id="toggle-nav">Menu</div>
      <nav>
        <ul>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
          <li><a href="#">Link 5</a></li>
        </ul>
      </nav>
    </div>

    <header>
      <!-- Header-Inhalt -->
      <section class="top-fix">
        <h1>header teil 1</h1>
        <p>Mit öjähäjhi iupiuhgofogzpg.</p>
      </section>
      <section class="bottom-flex">
        <h1>header teil 2</h1>
        <p>Mit öjähäjhi iupiuhgofogzpg.</p>
      </section>
    </header>

    <script
      type="text/javascript"
      src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"
    ></script>
    <script>
      $(document).ready(function () {
        $("html").addClass("js");

        var navToggle = ['<div id="toggle-nav">Menu</div>'].join("");
        $("header").append(navToggle);

        // Hinzugefügten Code
        $("nav a").on("click", function () {
          if (menu.is(":visible")) {
            menu.slideUp();
          }
        });
      });

      $(function () {
        var pull = $("#toggle-nav");
        menu = $("nav");
        menuHeight = menu.height();

        $(pull).on("click", function (e) {
          e.preventDefault();
          menu.slideToggle();
        });

        $(window).resize(function () {
          var w = $(window).width();
          if (w > 320 && menu.is(":hidden")) {
            menu.removeAttr("style");
          }
        });
      });
    </script>
  </body>
</html>

Drucke diesen Beitrag