Hallo Leute,

heute habe ich hier ein kleine „Snippet“ für euch. Im Zeitalter des Responsive-Design ist es unumgänglich dafür zu sorgen, sich auch hiermit auseinander zu setzen. Mein kleines Snippet bezieht sich heute auf das CMS „Typo3“

# Hauptnavigation
#temp.mainNavi
temp.mainNavi = HMENU
temp.mainNavi {
  1 = TMENU
  1 {
    expAll = 1
     NO.allWrap = <li>|</li>
    NO.ATagTitle.field = abstract // description // title

    ACT = 1
    ACT.wrapItemAndSub = <li class="active">|</li>
    ACT.ATagTitle.field = abstract // description // title

    IFSUB = 1
    IFSUB.wrapItemAndSub = <li class="dropdown">|</li>
    IFSUB.ATagTitle.field = abstract // description // title
    IFSUB.ATagParams = class="dropdown-toogle" data-toogle="dropdown"

    ACTIFSUB = 1
    ACTIFSUB.wrapItemAndSub = <li class="dropdown active">|</li>
    ACTIFSUB.ATagTitle.field = abstract // description // title
    ACTIFSUB.ATagParams = class="dropdown-toogle" data-toogle="dropdown"

    wrap = <ul class="nav nav-pills">|</ul>
  }

  2 = TMENU
  2 {
    expAll = 1

    ACT = 1
    ACT.wrapItemAndSub = <li class="active">|</li>
    ACT.ATagTitle.field = abstract // description // title

    ACTIFSUB = 1
    ACTIFSUB.wrapItemAndSub = |
    ACTIFSUB.before = <li class="divider"></li><li class="nav-header">
    ACTIFSUB.after = </li>
    ACTIFSUB.doNotLinkIt = 1
    ACTIFSUB.ATagTitle.field = abstract // description // title

    NO.allWrap = <li>|</li>
    NO.ATagTitle.field = abstract // description // title

    IFSUB = 1
    IFSUB.before = <li class="divider"></li><li class="nav-header">
    IFSUB.after = </li>
    IFSUB.doNotLinkIt = 1
    IFSUB.ATagTitle.field = abstract // description // title

    SPC = 1
    SPC.allWrap = <li class="divider"></li><li class="nav-header">|</li>

    wrap = <ul class="dropdown-menu">|</ul>
  }

  3 = TMENU
  3 {
    NO.allWrap = <li>|</li>
    NO.ATagTitle.field = abstract // description // title

    ACT = 1
    ACT.wrapItemAndSub = <li class="active">|</li>
    ACT.ATagTitle.field = abstract // description // title
  }
}

So, das ist mein Menü. Das ganze ist etwas größer aufgebaut, damit ich auch alle Aspekte des SEO-Programmierung mitnehme. Eine weitere Anmerkung sollte sein, dass ich in den obigen Projekt mit dem Twitter Bootstrap gearbeitet habe. Weiter im Text: jQuery! Jetzt folgt ein kleines jQuery Snippet. Dieses kleine Snippet verändert die Standard Navigation („ul und li“) in ein einfaches „SELECT“ Menü. Somit ist die Ausgabe später ein kleines Dropdown-Fenster mit dem gesamten Typo3 Menü

 $(function() {

      // Dropdown Menü erstellen
      $("<select />").appendTo("nav");

      // Als nächstes erstellen wir ein First-Option Feld
      $("<option />", {
         "selected": "selected",
         "value"   : "",
         "text"    : "Menü..."
      }).appendTo("nav select");

      // Populate dropdown with menu items
      $("nav a").each(function() {
       var el = $(this);
       $("<option />", {
           "value"   : el.attr("href"),
           "text"    : el.text()
       }).appendTo("nav select");
      });

	   // Als letztes wird die Navigation verändert
      $("nav select").change(function() {
        window.location = $(this).find("option:selected").val();
      });

	 });

Und das ist alles!

Probiert es aus und gebt Feedback 🙂

2013-09-24T22:08:46+00:00Allgemein, Coding, Typo3|0 Kommentare

Hinterlassen Sie einen Kommentar