yanmai
Goto Top

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;
        }

Content-Key: 335869

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

Ausgedruckt am: 19.03.2024 um 06:03 Uhr

Mitglied: falscher-sperrstatus
falscher-sperrstatus 23.04.2017 um 00:59:45 Uhr
Goto Top
Hi,

zeig mal die Seite.
Mitglied: Sheogorath
Sheogorath 23.04.2017 um 02:42:47 Uhr
Goto Top
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 face-smile)
https://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-us ...

In diesem Sinne

Gruß
Chris