Horizontales Menü

 

Ein einfaches horizontales Menü in Typo3 kann wie folgt erstellt werden.

Das Seitentemplate zum Bearbeiten öffnen und im Setup folgenden Eintrag hinzufügen.

lib.header_menu = COA
lib.header_menu {
    10 = HMENU
    10 {
        wrap = <div class="menu_header menu_ul">|</div>
        entryLevel = 0
        1 = TMENU
        1 {
            expAll = 1
            noBlur = 1
            wrap = <ul>|</ul>
            target = _top
            NO {
                stdWrap.htmlSpecialChars = 1
                wrapItemAndSub = <li>|</li>
                allWrap = <div class="menu_header_no">|</div>
            }
            ACT < .NO
            ACT = 1
            ACT {
                allWrap = <div class="menu_header_act">|</div>
            }
            IFSUB < .NO
            IFSUB = 1
            IFSUB {
                allWrap = <div class="menu_header_ifsub">|</div>
            }
            ACTIFSUB < .IFSUB
            ACTIFSUB = 1
            ACTIFSUB {
                allWrap = <div class="menu_header_actifsub">|</div>
            }
        }
        2 = TMENU
        2 {
            noBlur = 1
            wrap = <ul class="menu_sub">|</ul>
            target = _top
            NO {
                stdWrap.htmlSpecialChars = 1
                wrapItemAndSub = <li>|</li>
                allWrap = <div class="menu_sub_no">|</div>
            }
            CUR < .NO
            CUR = 1
            CUR {
                allWrap = <div class="menu_sub_act">|</div>
            }
            ACT < .CUR
            ACT = 1
        }
    }
}




CSS für das Menü könnte wie folgt aussehen.

div.menu_header li {
  padding:0px;
  margin:0px;
  float:left;
  margin-right:2px;
}
div.menu_header li a{
  height: 30px;
  font-family: 'Lato', sans-serif;
  color: #ffffff;
  font-weight:300;
  font-size:1.2em;
  letter-spacing: 2px;
  text-decoration:none;
  display:block;
  padding:5px 14px 5px 14px;
  line-height:20px;
  background-color:#94adcb;
  margin-top: 13px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}
div.menu_header li div.menu_header_no a,
div.menu_header li div.menu_header_act a {
  cursor:pointer;
}
div.menu_header li div.menu_header_act a,
div.menu_header li div.menu_header_actifsub a {
  color:#4b85cd;
  background-color: #ffffff;
  height: 30px;
  margin-top: 13px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}
div.menu_header li:hover div.menu_header_no a {
  height: 30px;
  color: #4b85cd;
}
div.menu_header li:hover div.menu_header_no a,
div.menu_header li:hover div.menu_header_ifsub a,
div.menu_header li:hover div.menu_header_actifsub a {
  background-color:white;
}
div.menu_header li:hover div.menu_header_no a,
div.menu_header li:hover div.menu_header_ifsub a {
  color:#4b85cd;
}

 

 

 

Zuerst müssen die js Dateien im Setup des...

Weiterlesen

Um ein Eingabefeld auf einer bestimmten Stelle der...

Weiterlesen

Eine Anleitung und die dazugehörigen Dateien...

Weiterlesen

Einige Seiten um Farbcodes und Farbschemas zu...

Weiterlesen

Mit dem backstretch script lässt sich eine simple...

Weiterlesen

 

Ein einfaches horizontales Menü in Typo3 kann...

Weiterlesen

Für die Suchmaschinenoptimierung nicht...

Weiterlesen

Einer meiner Favoriten der CSS-Eigenschaften ist...

Weiterlesen

Im Allgemeinen kann ein META-Tag für den...

Weiterlesen

Die robots.txt dient dazu, um das Suchverhalten...

Weiterlesen