Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Tinynav
#21
Du hast recht man sieht es nicht obwohl ich es meiner Meinung nach eingebunden ist.


Template Page:
Code:
page.headerData.5 = TEXT
page.headerData.5.value (
<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>
<!-- Mobile viewport optimized: j.mp/bplateviewport -->
<meta name="viewport" content="width=device-width,initial-scale=1">
)

page.shortcutIcon = fileadmin/templates/images/favicon.ico

# CSS-Dateien einbinden
page.includeCSS {
  standard = fileadmin/templates/css/my_layout.css
}

# Patches für IE <= 7 einbinden
[browser = ie] && [version = < 8]

page.includeCSS.lteie7 = fileadmin/templates/css/patches/patch_my_layout.css

[global]

# tinynav einbinden
page.includetinynav {
  tinynav = fileadmin/templates/js/tinynav.min.js
}

# jQuery einbinden
page.includeJSlibs {
  jquery = fileadmin/templates/js/jquery-1.7.1.min.js
}

# modernizr.js für IE < 9
[browser = ie] && [version = < 9]

page.includeJS.modernizer = fileadmin/templates/js/modernizr.js

[global]

# Javascripts im Footer einbinden
page.includeJSFooter {
  hoverIntent = fileadmin/templates/js/hoverIntent.js
  superfish = fileadmin/templates/js/superfish.js
  supersubs = fileadmin/templates/js/supersubs.js
  init = fileadmin/templates/js/initsf.js
}

lib.name = TEXT
lib.name.value = Mein Name

lib.logo = IMAGE
lib.logo.file = fileadmin/templates/images/logo100x100.png
lib.logo.altText = Logo , Link zur Startseite
lib.logo.stdWrap.typolink.parameter = 1
lib.logo.stdWrap.typolink.title = Link zur Startseite

  
lib.slogan = TEXT
lib.slogan.value = Hier steht mein Name
lib.slogan.typolink.parameter = 1
lib.slogan.typolink.title = Link zur Startseite

lib.jahr = TEXT
lib.jahr.data = date: Y


HTML Layout:
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 href="css/my_layout.css" rel="stylesheet" type="text/css" />

            <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="fileadmin/templates/js/tinynav.min.js"></script>
            <script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>

            <script>
              $(function () {
                $(".sf-menu").tinyNav();
              });
            </script>
        </head>
<body>



<div id="nav" class="clearfix">
  <div class="page_margins">
    <!-- skiplink anchor: navigation -->
    <a id="navigation"></a>
    <nav class="hlist">
      
      <!-- main navigation: horizontal list -->
      <ul class="sf-menu">
        <li class="active"><a href="#">Home</a>
          <ul>
            <li><a href="#">Unterseite 1</a></li>
            <li><a href="#">Unterseite 2</a></li>
            <li><a href="#">Unterseite 3</a></li>
            <li><a href="#">Unterseite 4</a></li>
            <li><a href="#">Unterseite 5</a></li>
          </ul>
        </li>
        <li><a href="#">Seite 2</a>
          <ul>
            <li><a href="#">Unterseite A</a></li>
            <li><a href="#">Unterseite B</a></li>
            <li><a href="#">Unterseite C</a></li>
            <li><a href="#">Unterseite D</a></li>
            <li><a href="#">Unterseite E</a></li>
          </ul>
        </li>
        <li><a href="#">Seite 3</a></li>
        <li><a href="#">Seite 4</a></li>
      </ul>
    </nav>
    <!-- hlist -->
  </div>
  <!-- page_margins -->
</div>
<!-- nav -->

<div class="page_margins">
  <header id="header" class="clearfix">
    <div class="logo"> <a href="#" title="zur Startseite"><img src="images/logo100x100.png" width="100" height="100" alt="Logo"></a> </div>
    <div class="title">
      <h1><a href="#">Der Firmenname oder so</a></h1>
    </div>  
  </header>
  <!-- header -->
  
  <div id="main" class="clearfix">
    <section id="col1full">
      <div id="col1_content" class="clearfix">
        <h1>Header Level 1</h1>
        <p><strong>Auf dem letzten Hause eines kleinen Dörfchens</strong> befand sich ein <abbr title="Behausung eines langbeinigen Vogels">Storchnest</abbr>. Die Storchmutter saß im Neste bei ihren vier Jungen, welche den Kopf mit dem kleinen <em>schwarzen Schnabel</em>, denn er war noch nicht rot geworden, hervorstreckten. Ein Stückchen davon stand auf der Dachfirste starr und steif der Storchvater <code>syntax</code>. Man hätte meinen können, er wäre aus Holz gedrechselt, so stille stand er. "Gewiss sieht es recht vornehm aus, dass meine Frau eine Schildwache bei dem Neste hat!" dachte er. Und er stand unermüdlich auf <a href="#nirgendwo" title="Title für einem Bein">einem Beine</a>.</p>
        <h2>Header Level 2</h2>
        <ol>
          <li>Und was dann? fragten die Storchkinder.</li>
          <li>Dann werden wir aber doch gepfählt, wie die Knaben behaupteten, und höre nur, jetzt sagen sie es schon wieder!</li>
        </ol>
        <p>Unten auf der Straße spielte eine Schar Kinder und als sie die Störche erblickten, sang einer der dreistesten Knaben und allmählich alle <abbr title="zusammen">zus.</abbr> einen Vers aus einem alten Storchliede, so gut sie sich dessen erinnern konnten:</p>
        <blockquote>
          <p>Störchlein, Störchlein, fliege,<br />
            Damit ich dich nicht kriege, <br />
            Deine Frau, die liegt im Neste dein Bei deinen lieben Kindelein: Das eine wird gepfählt, Das andere wird abgekehlt, Das dritte wird verbrannt, Das vierte dir entwandt!</p>
          <p><cite>Hans Andersen</cite></p>
        </blockquote>
        <p>Höre nur, was die Jungen singen! sagten die kleinen Storchkinder. Sie sagen, wir sollen gebraten und verbrannt werden!</p>
        <h3>Header Level 3</h3>
        <ul>
          <li>Das eine wird gepfählt</li>
          <li>Das andere wird abgekehlt!</li>
        </ul>
        <table>
          <caption>
          Table Caption
          </caption>
          <thead>
            <tr>
              <th>H. C. Andersens 1</th>
              <th>MÄRCHEN FÜR KINDER 2</th>
              <th>Märchengruß 3</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1a – Hans Andersen, der Märchendichter, Nennt man ihn nur, landaus, landein; Da lachen strahlende Gesichter, Da jubeln Bub´ und Mägdelein! Ihm sang und klang, ihm lebt´ und lachte, Was anderer Ohr und Auge tot, Das Seelenlose fühlt´ und dachte Und ward beseelt, – wenn er gebot.</td>
              <td>2a – Den er gepflückt im Wunderlande, Den allerschönsten Märchenstrauß, Geknüpft mit rot und weißem Bande, Streut´ einst er in die Welt hinaus. Und aus dem Strauß die zart´sten Triebe, Die er bestimmt der Kinderschar, Sind hier gesammelt euch zuliebe; Wir bieten sie euch freudig dar.</td>
              <td>3a – Längst ist er schon von uns gegangen, Der Dichter, der den Kindern lieb, Doch leben noch in Jugendprangen Die Märchen, die für euch er schrieb. Sie klingen fort und werden klingen Unsterblich noch in später Zeit, Und sich wie gold´ne Fäden schlingen Um Kind und Märchenherrlichkeit.</td>
            </tr>
            <tr>
              <td>1b –   Des grauen Entleins Abenteuer, Der Zinnsoldat, auf einem Bein Standhaft im Wasser und im Feuer, Die Schwäne und ihr Schwesterlein; Das Märlein von dem Tannenbaume, Vom Koffer, der die Luft durchschwirrt, Vom Sandmann und Klein–Hjalmars Traume, Vom Tölpelhans, der König wird.</td>
              <td>2b –   Sie wollen plaudern, wollen scherzen, Sie wollen bei euch Kindern sein, Und dringen in die Kinderherzen Mit ernster Lehre mahnend ein. – So macht dem luftigen Gelichter Ein Heim in Herz und Haus bereit, Und seid gegrüßt vom Märchendichter, Die ihr ja selber Märchen seid!</td>
              <td>3b –  – Längst ist er schon von uns gegangen, Der Dichter, der den Kindern lieb, Doch leben noch in Jugendprangen Die Märchen, die für euch er schrieb. Sie klingen fort und werden klingen Unsterblich noch in später Zeit, Und sich wie gold´ne Fäden schlingen Um Kind und Märchenherrlichkeit.</td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- col1_content -->
    </section>
    <!-- col1 -->
    
  </div>
  <!-- main -->
</div>
<!-- page_margins -->
<footer id="footer">
  <div class="page_margins">
    <div class="footercontent"> Copyright &copy; | <span>Jahr</span> | <span>name</span> | Layout based on <a href="http://yaml.de">YAML</a> | <span class="footernav"><a href="#">Impressum</a> <a href="#">Datenschutz</a> <a href="#">Sitemap</a></span> <a id="totop" href="#main" title="nach oben scrollen"></a> </div>
  </div>
</footer>
<!-- footer -->

</body>
</html>


Hmmm.... wieso könnte das nicht eingebunden werden, das File ist auch ein seinem richtigen Ort.
Zitieren
#22
Das funkt so nicht:
Code:
# tinynav einbinden
page.includetinynav {
  tinynav = fileadmin/templates/js/tinynav.min.js
}

Bitte binde den Code hier dazu ein:
Code:
# Javascripts im Footer einbinden
page.includeJSFooter {
  hoverIntent = fileadmin/templates/js/hoverIntent.js
  superfish = fileadmin/templates/js/superfish.js
  supersubs = fileadmin/templates/js/supersubs.js
  init = fileadmin/templates/js/initsf.js
  tinynav = fileadmin/templates/js/tinynav.min.js
}

Willst du ein neues TS erfinden Big Grin
Zitieren
#23
Oder noch besser bind das ganze Ding so ein dan hast alles zusammen:

Code:
page.headerData.5 = TEXT
page.headerData.5.value (
<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>
<!-- Mobile viewport optimized: j.mp/bplateviewport -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<script type="text/javascript" src="fileadmin/templates/js/tinynav.min.js"></script>
<script>
              $(function () {
                $(".sf-menu").tinyNav();
              });
            </script>
)

Und wenn du das noch schöner haben möchtest machst du dir noch eine eigene JS Datei z.b. mienjs.js fügst den:
$(function () {
$(".sf-menu").tinyNav();
});
in die Datei meinejs.js dort hinein und bindest es sauber so ein:

# Javascripts im Footer einbinden
page.includeJSFooter {
hoverIntent = fileadmin/templates/js/hoverIntent.js
superfish = fileadmin/templates/js/superfish.js
supersubs = fileadmin/templates/js/supersubs.js
init = fileadmin/templates/js/initsf.js
tinynav = fileadmin/templates/js/tinynav.min.js
meinejs = fileadmin/templates/js/meinejs.js
}

Alles klar?
Zitieren
#24
Mal ne blöde Frage wieso muss ich alles in den Footer aufnehmen???
Ist das irgendwie so wie ein Anhang... an dem alles Eingebunden wird???

Grüsse Twixwix
Zitieren
#25
Nein kannst in den Header auch einbinden weil du ja mit dem document ready arbeitest...

Nachtrag:
Und nicht vergessen der Funktionsaufruf kommt erst nach der Einbindung vom PlugIn dh:
1. Plugin
<script src="fileadmin/templates/js/tinynav.min.js" type="text/javascript"></script>
2. Der funktionsaufruf
<script>
$(function () {
$(".sf-menu").tinyNav();
});
</script>

Noch ein Nachtrag:
Und natürlich auch das CSS nicht vergessen!

@media screen and (max-width: 600px) {
.tinynav { display: block; }
#nav ul { display: none; } /* Musst ausprobieren ob das auf das reagiert */
}
Zitieren
#26
Wink 
Ich glaube so sollte es gehen, mein ich das nur oder ist meine Seite vorhher mehr zusammen gegangen..??

Noch eine weitere frage, wie kann ich nun in der Dropdown liste bestimmen das die Unterebenen einen einzug erhalten sollten???

Also nur wenn es nicht zu kompliziert ist ansonsten lassen wir es dabei.

SmileSmileSmile

Danke Vielmals.
Zitieren
#27
Hab ich noch nicht versucht da müsste ich selber nachschaun...
Jetzt kannst du alles schön per css Stylen.
Viel Spass
Zitieren
#28
wie würdest du den diese Unterebenen herausfischen? Via Firebug?
Zitieren
#29
Versuch es einfach...
Aber ich glaube das man es über js löst aber das müsste ich mir auch noch genauer anschaun.
Zitieren
#30
Habe viel geschaut... aber nicht wirklich was gefunden.
Für Tinynav gibts ja quasi keine beiträge... muss ich da bei Js Scripte schauen oder gibt es irgendwo eine bibliothek welche genau solch ein punkt drin ist?

Grüsse Twixwix
Zitieren


Gehe zu:


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