Dynamische Navigation

[Freshmojojo]

Hey,
und zwar hab ich ein kleines Problem.. Es ist so ich habe ein Menü, das von Sql Tabellen gespeist wird, d.h der Nutzer kann diese Einträge abändern oder neue Menü-Items hinzufügen. Meine Frage ist wie löst man das am intelligentesten, dass nicht jeder neue Eintrag mir die media queries zerschießt? Zerbreche mir schon seid Tagen den Kopf, wär cool wenn da jemand eine Lösung hat :) Danke!
Lg
Freshmojojo

 

[MrMurphy]

Hallo

wo ist der Link zu der Seite?

Gruss

MrMurphy

 

[Freshmojojo]

Tut mir leid die ist bisher nur auf meinem XXAMP aber du kannst dir einfach eine Horizontale Dropdown-Navigation mit einer width von 90% vorstellen.

Freshmojojo

 

[maria1]

Dann poste bitte wenigstens ein Beispiel in Form eines Codes oder gleich per jsfiddle.
Ich zumindest verstehe nicht genau was du mit "nicht jeder neue Eintrag mir die media queries zerschieß" meinst...

p.S: Wenn alles ordentlich programmiert ist , hat es da nichts zu "zerschießen"..

 

[Freshmojojo]

                     <?php
                        require_once "../sqli_con.php";

                        $result = $mysqli->query("SELECT * FROM menu");
              
                        if ($result){              
                      ?>
                            <nav class="nav">
                                <ul class="cf">
                                   <?php
                                        while($num = $result->fetch_array()){
                                           echo "<li><a href='{$num['lihref']}'>{$num['lisrc']}</a></li>";
                                       }
                                    ?>
                                 </ul>
                            </nav>

                        <script src="js/jquery-1.9.0.min.js"></script>
                        <script src="js/doubletaptogo.min.js"></script>
                        <script>

                            $( function()
                            {
                                $( '#nav li:has(ul)' ).doubleTapToGo();
                            });

                        </script>
                    <?php
                        }else{
                            echo "Fehler!";
                        }
                        $mysqli->close();
                    ?>

Hier ist meine Menüstrucktur. Damit generiere ich ein Menü mit n List-Items. Und wie genau muss ich dies jetzt in Css stylen, dass ich immer eine horizontale Navigation habe Bzw, dass wenn ich ein <li> hinzufüge, dass sich nicht das ganz rechte Item unter das eigentlich vorgesehene Menü schiebt. Nebenbei muss es "responsive" sein. Das meinte ich mit media queries.

Freshmojojo

(Sorry für die Verschiebungen bei den Einrückungen hat sich irgendwie verschoben)

 

[Banana_Jones]

Liefer doch bitte den Html-code, der am Ende rauskommt und bei dem das Problem ersichtlich ist. Vor allem auch den dazugehörigen CSS-Teil. Hier handelt es sich ja schließlich um ein Darstellungsproblem, da hilft der PHP-code nicht wirklich

 

[threadi]

Für eine Beurteilung von Fehldarstellungen ist nicht die serverseitige Programmierung zu kontrollieren sondern zunächst der erzeugte und vom Browser gerenderte HTML-Code. Dein Code hier bringt daher rein gar nichts. Zeig den erzeugten HTML-Code inkl. CSS (jeweils komplett), nur so kann man sich das auch anschauen.

 

[Freshmojojo]

                            <nav class="nav">
                                <ul class="cf">
                                    <li><a href="#">Top-Menu 1</a></li>
                                    <li><a class="dropdown" href="#">Top-Menu 2</a>
                                        <ul>
                                            <li><a href="#">Sub-menu Item 1</a></li>
                                            <li><a href="#">Sub-menu Item 2</a></li>
                                            <li><a href="#">Sub-menu Item 3</a></li>
                                        </ul>
                                        </li>
                                    <li><a href="#">Top-Menu 3</a></li>
                                    <li><a href="#">Top-Menu 4</a></li>
                                    <li><a href="#">Top-Menu 5</a></li>
                                    <li><a href="#">Top-Menu 6</a></li>
                                </ul>
                            </nav>

Mein Problem liegt ja gerade am Css denn das was ich bis jetzt habe ist so kompletter Schrott... Nun soll man einfach diese Navigation um 1, 2 oder 3 Top-Menu Einträge erweitern können, ohne dass sich die eigentliche width vom Menü ändert.

 

[Tronjer]

Binde doch als Grundlage ein Framework wie Bootstrap oder Foundation ein.

 

[Freshmojojo]

Keine Schlechte Idee aber ist mir bisschen viel JS drinne. Brache ja eigentlich nur die Navigation und wollte nicht nochmal die ganze Seite umbasteln

 

[Tronjer]

So viel ist das gar nicht. Falls du mit Bootstrap auf das Click-Event im collapsed Zustand verzichten kannst, benötigst du lediglich die minified CSS, und diese lässt sich in der Entwicklungsumgebung sogar per CDN einbinden. Auf Production sollte man sie der Performance wegen dann lieber auf dem eigenen Server ablegen.

Du must also nur ein Link-Tag im Head einfügen und die Navbar-Struktur analog zur Doku bauen.

Abgesehen davon solltest du deinen Standpunkt zu JS mal überdenken. Eine moderne, datenbankbasierte Webseite lässt sich im Zweifelsfall auch völlig ohne PHP erstellen, aber kaum ohne JavaScript. ;)

 

[threadi]

Nun soll man einfach diese Navigation um 1, 2 oder 3 Top-Menu Einträge erweitern können, ohne dass sich die eigentliche width vom Menü ändert.

Ohne die gesamte Seite zu sehen inkl. deinem CSS kann man dir hierbei keine genaueren Tipps geben.