Responsive Navigationsbar

Hallo ihr Administratoren,
ich bin gerade dabei eine Menüleiste in HTML und CSS zu programmieren. Mein Ziel ist es, dass links das Logo ist und rechts die einzelnen Dateien. An sich funktioniert das schon mal. Die Items rechts sind aber genau in der anderen Reihenfolge als einprogrammiert. Und die responive Ansicht buggt noch. Wie kann ich das beheben?

HTML:

 <div class="topnav" id="myTopnav">  
            <a href="index.html"><img src="uploads/Logo.JPG" class="nav-image" alt="Bild" /></a>  
            <div class="nac-items">  
                <a class="item" href="index.html">Startseite</a>  
                <a class="item" href="wir.html">Wir &uuml;ber uns</a>  
                <a class="item" href="angebote.html">Angebote</a>  
                <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>  
            </div>
            
            <script>
                function myFunction() {
                    var x = document.getElementById("myTopnav");  
                    if (x.className === "topnav") {  
                        x.className += " responsive";  
                    } else {
                        x.className = "topnav";  
                    }
                }
            </script>
        </div>

CSS (normal)

#index-table {
    border: none;
}

.nav-image {
    float: left;
    height: 50px;
    width: auto;
}

.topnav .item {
    float: right;
}

.topnav {
  overflow: hidden;
  background-color: #ffffff;
}

//.topnav a:first-child { display: none; background-color: white; }

.topnav a {
  float: left;
  display: block;
  color: red;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
  font-size: 17px;

    margin-top: 10px;
    border: 1px solid white;
}

.nac-items {
    padding-left: 1%;
}

.topnav a:hover {
    border: 1px solid red;
    color: red;
}

a.active {
    background-color: red;
    color: white;
}

.topnav .icon {
    display: none;
}

CSS (responsive)

.topnav a:not(:first-child) {display: none;}
        .topnav a:first-child {
            display: block; 
            background-color: white; 
            color: red; 
            border: none;
        }

        .nac-items(:first-child) { display: none; }

        .topnav a.icon {
            float: right;
            display: block;
        }

        .topnav.responsive {position: relative;}
        .topnav.responsive .icon {
            position: absolute;
            right: 0;
            top: 0;
        }
        .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;

        }

        .nav-items {
            padding-top: 20px;
        }

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 335869

Url: https://administrator.de/contentid/335869

Ausgedruckt am: 25.11.2024 um 04:11 Uhr

2 Kommentare

Neuester Kommentar

Hi,

zeig mal die Seite.

Moin,

Grundlagen des modernen Webdesigns: Das beste JavaScript ist kein JavaScript. Responsive menüs, findest du samt Tutorials wie Sand am Meer. Wichtig ist hierbei auf etwas aktuellere zu achten und somit die CSS only lösung mit View-Ports zu nutzen (Du sagst einfach ab einer Bildschirmbreite von X Pixeln nimmst du bitte die responsive Variante). Das sieht dann im Endergebnis in der Regel nicht nur besser aus, sondern funktioniert auch und ist wesentlich performanter. Hintergrunde hierzu findest du unter dem Stichwort: JavaScript Event Loop.

Aber nun zurück zu deinem Problem: Dein Problem liegt im `float: right` welches auf deiner `.item`-Klasse liegt. Details dazu: https://stackoverflow.com/a/20920305

Aber mal ein paar Tutorials bezüglich Menüs:
https://www.w3schools.com/howto/howto_js_topnav_responsive.asp (Wie nahezu immer: Sehr gut für Einsteiger