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;
}
