Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Tinynav
#1
Hallo zusammen,
Ich wollte nun auf meiner Seite das Tinynav einbinden, --> Link <--.
Leider weiss ich nicht genau wie anfangen.. habe einfach mal drauf los gewerkelt.

gemacht habe ich:
1. Tinynav.min.js eingebunden
2. Die html vorlage angepasst.

zu anfangs hat das verkleinern auch gepasst aber die dropdown list ist nicht erschienen, nun bin ich leider am ende mit meinem Latein, da ich auch keine Tutorials im Internet gefunden habe.

Grüsse Twixwix
Zitieren
#2
Weiss den keiner wie das Tinynav funzt???
Zitieren
#3
Also bei mir funkt die Navi ?
Ich würde bei dieser Responsiv Seite noch ein Mobiles Menü einbauen mit dem Menü ist das auf Handys nicht sehr praktisch...
Zitieren
#4
Hast Du dir das Tutorial durchgelesen?
Da steht doch eh alles ganz genau beschrieben...
Im Grunde genommen musst du nur die tinynav.min.js einbinden und mit deiner #nav im js verbinden:
    JAVASCRIPT Programming
  1. $('#nav').tinyNav({
  2. active: 'selected'
  3. });



und dan noch die @media screen nach Deinen Bedürfnissen anpassen:

    CSS Programming
  1. @media screen and (max-width: 600px) {
  2. .tinynav { display: block }
  3. #nav { display: none }
  4. }

Zitieren
#5
das hab ich gemacht alles korrekt eingebunden aber irgendwie will das trotzdem nicht... ich bin mir au nicht ganz sicher bei meiner Navigation auf welches #nav ; #sf-menu oder was auch immer ich es zeigen lassen muss habe aber schon alles ausprobiert.
Zitieren
#6
Die Navigation funktioniert bei mir im Chrome und Firefox aber auch.
Du solltest dich dennoch an ein paar Grundregeln halten:
  1. Keine minifizierten Dateien während der Entwicklung verwenden. Man kann einen Fehler so nur ganz schwer lokalisieren. Also verwende zuerst lieber die lesbaren Versionen von Plugins etc.
  2. Schalte das Komprimieren und Zusammenfassen von JS und CSS in TYPO3 während der Entwicklung ebenfalls ab.
  3. Verwende so wenig Libraries und Plugins wie möglich. Je mehr Libraries und Plugins du in deine Seite haust, desto höher ist die Wahrscheinlichkeit, dass die sich auch gegenseitig behindern. Außerdem wird die Performance unnötig leiden. Momentan nutzt du jQuery & Prototype. Das ist sehr ungeschickt!
  4. Nutze Tools wie Firebug und/oder Webkit Dev Tools um in der Konsole zu erkennen, wo es denn hakt. Momentan tritt ein Fehler auf: "Uncaught TypeError: Object [object Object] has no method 'dispatchEvent'"
Auch, wenn Plugins oft sehr praktisch erscheinen, so denke doch einmal darüber nach, ob du eine Navigation nicht selbst in JavaScript schreiben kannst. Das ist in 10 - 30 Zeilen JS zu erreichen und hat fast nur Vorteile:
  • leistet genau, was du benötigst
  • kein unnötiger Overhead an Funktionen, die du nie brauchst
  • du weißt ganz genau, was da im JS passiert
  • besser wartbar und individuell erweiterbar
  • kaum Mehraufwand als ein Plugin
  • CSS-Fallbacks für Browser ohne JS einfach zu integrieren
Um ehrlich zu sein fällt mir kein einziger Nachteil ein.

Viele Grüße
Michael Schulze
Webentwickler & Designer

http://michsch.de
http://michs.ch/twitter
Zitieren
#7
Danke für deine schnelle Antwort. Leider kann ich kein bisschen Java ausser ein "Hello World" darum müsste ich diesen Weg momentan aussen weg lassen.
Meinst du, dass es ein Konflikt zwischen Extensions gibt???
Zitieren
#8
Wenn du jQuery & Prototype nutzen möchtest solltest du jQuery z.b in eine Variable schreiben:
var $j = jQuery.noConflict();
un alles was jQuery ist das $j übergeben:

    JAVASCRIPT Programming
  1. var $j = jQuery.noConflict();
  2. $j(document).ready(function(){
  3. $j('#mobileMenu_'+$this.attr('id')).hide(); // Beispiel!
  4. });



und alles was Prototype ist nur mit dem $ so kommen sich die zwei nicht in die Quere Wink
Zitieren
#9
Ich muss es zuerst no ausprobieren, aber zuerst noch die Frage wofür wird Prototyp verwendet, von welchen Extensions?
Evtl. von Perfectlightbox?

Wie würde dies den bei meinem Code aussehen ca. so?
Code:
    <script>
var $j = jQuery.noConflict();
$j$('#sf-menu').tinyNav({
$jactive: 'selected'
});
</script>
Zitieren
#10
Von welcher Extension das Prototyp verwendet wird solltest du schon wissen den du hast ja die Ext. installiert und in Tutorial der Ext wird das genau beschrieben welches Framework verwendet wird!

Ich habe dir mal das Menü mit der TinyNav abgebildet in ein fertiges HTML Dokument das 100% funktioniert eventuell hilft dir das weiter um es zu verstehen was da genau passiert.

Code:
<!DOCTYPE html>
    <html>
        <head>
            <title>HTML5</title>

            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <meta name="viewport" content="width=device-width,initial-scale=1">
            <meta name="description" content="TinyNav">
            <meta name="keywords" content="menu,">
            <meta name="robots" content="index, follow" />

            <link rel="icon" href="favicon.ico" />

            <style>
                /* styles for desktop */
                .tinynav { display: none; }
                /* styles for mobile */
                @media screen and (max-width: 600px) {
                  .tinynav { display: block; }
                  .sf-menu { display: none; }
                }
            </style>
                      
            <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
            <script type="text/javascript" src="tinynav.min.js"></script>
            <script>
              $(function () {
                $(".sf-menu").tinyNav();
              });
            </script>

        </head>
    <body>

        <h1>TinyNav.js</h1>

            <div id="nav" class="clearfix">
                <ul class="sf-menu">
                    <li class="active"><a href="#" >Home</a></li>
                    <li><a href="index.php?id=5"  >Inhaltselemente</a>
                        <ul>
                            <li><a href="index.php?id=8"  >Text</a>
                                <ul>
                                    <li><a href="index.php?id=14"  >Text</a></li>
                                    <li><a href="index.php?id=15"  >Text mit Bilder</a></li>
                                    <li><a href="index.php?id=16"  >Bilder</a></li>
                                </ul>
                            </li>
                            <li><a href="index.php?id=9"  >Text mit Bilder</a></li>
                            <li><a href="index.php?id=10"  >Forum</a></li>
                        </ul>
                    </li>
                    <li><a href="index.php?id=6"  >Kontakt</a></li>
                    <li><a href="index.php?id=7"  >Impressum</a></li>
                </ul>
            </div>
    </body>
</html>
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste