TYPO3 Typoscript Menü Snippets Überblick

 

Horizontales Menü mit abgerundeten Ecken

### Typoscript Code ##########
lib.mainmenu_lache = HMENU
lib.mainmenu_lache {
  special = directory
  special.value = 1
  wrap = |
  1 = TMENU
  1{
    NO{
      linkWrap = <div class="menu_btn"><div class="btn_left"></div><div class="btn_center"><div class="btn_text">|</div></div><div class="btn_right"></div><div class="btn_space"></div></div>
    }
    ACT <.NO
    ACT = 1
    ACT{
      linkWrap = <div class="menu_btn"><div class="btn_left_active"></div><div class="btn_center_active"><div class="btn_text_active">|</div></div><div class="btn_right_active"></div><div class="btn_space"></div></div>
    }
  }
}
/*-------------CSS---------------------*/
.btn_left, .btn_left_active, .btn_right, .btn_right_active{
        float:left;
  width:5px;
  height:25px;
}

.btn_left{
  background-image: url(../../../../uploads/tx_tllbaseext/menu_09.gif);
  background-repeat: no-repeat;
}
.btn_left_active{
  background-image: url( ../../../../uploads/tx_tllbaseext/menu_14.gif);
  background-repeat: no-repeat;
}
.btn_right{
  background-image: url(../../../../uploads/tx_tllbaseext/menu_13.gif);
  background-repeat: no-repeat;
}
.btn_right_active{
  background-image: url(../../../../uploads/tx_tllbaseext/menu_18.gif);
  background-repeat: no-repeat;
}
.btn_center, .btn_center_active{
        float:left;
  height:25px;
        background-repeat: repeat-x;
}
.btn_center{
  background-image: url(../../../../uploads/tx_tllbaseext/menu_11.gif);
}
.btn_center_active{
  background-image: url(../../../../uploads/tx_tllbaseext/menu_16.gif);
  background-color:#FFFFFF;
}
.btn_text, .btn_text_active{
  padding-top:7px;
}
.btn_text a:link, 
.btn_text a:visited, 
.btn_text a:hover, 
.btn_text a:active, 
.btn_text_active a:link, 
.btn_text_active a:visited, 
.btn_text_active a:hover, 
.btn_text_active a:active{
        font-size: 0.9em;
  font-weight: bold;
  text-decoration: none;
}
.btn_text a:link, 
.btn_text a:visited, 
.btn_text a:hover, 
.btn_text a:active{
  color: #FFFFFF;
}

.btn_text_active a:link, 
.btn_text_active a:visited, 
.btn_text_active a:hover, 
.btn_text_active a:active{
  color: #666;
}
.breaker{
  overflow:hidden;
  height:1px;
  clear:both;
}
Zu den Code Snippets