|
|
| Zeile 1: |
Zeile 1: |
| − |
| |
| | == Navigation == | | == Navigation == |
| − | === CSS-Listen-Navigation ===
| + | [[Menue als CSS formatierte Liste]] |
| − | | |
| − | '''TypoScript - Setup'''
| |
| − | <pre>
| |
| − | temp.navi_bulletList = HMENU
| |
| − | temp.navi_bulletList {
| |
| − | #stdWrap.case = lower
| |
| − | special = directory
| |
| − | # Seitenid für den Einstieg
| |
| − | special.value = 23
| |
| − | # Seitenbaumebene ab Level2
| |
| − | entryLevel = 0
| |
| − | 1 = TMENU
| |
| − | 1.noBlur = 1
| |
| − | 1.wrap = <ul>|</ul>
| |
| − | 1.NO = 1
| |
| − | 1.NO.linkWrap = <li>|</li>
| |
| − | 1.ACT = 1
| |
| − | 1.ACT.linkWrap = <li class="on">|</li>
| |
| − | #1.ACTIFSUB = 1
| |
| − | #1.ACTIFSUB.linkWrap = <li class="on">|</li>
| |
| − | }
| |
| − | </pre>
| |
| − | Das Menü ist als Liste definiert:
| |
| − | | |
| − | ''' HTML '''
| |
| − | <pre>
| |
| − | <nowiki>
| |
| − | <div id="menue_l1">
| |
| − | <ul>
| |
| − | <li><a href="http://www.alistapart.com/">Lorem eu</a></li>
| |
| − | <li><a href="http://www.stylegala.com">Ipsum</a></li>
| |
| − | <li><a href="http://www.css-praxis.de/">Nunc tellus</a></li>
| |
| − | <li class="on"><a href="http://www.csshilfe.de/">Tincidunt laoreet</a></li>
| |
| − | <li class="last"><a href="http://www.css4you.de">Faucibus</a></li>
| |
| − | </ul>
| |
| − | </div> <!-- ende menue -->
| |
| − | </nowiki>
| |
| − | </pre>
| |
| − | | |
| − | ''' CSS - Beispiel '''
| |
| − | <pre>
| |
| − | /* Menue Level1 und Level2
| |
| − | /* * * * * * * * * * * * * * * * * * * * * * * * * * */
| |
| − | | |
| − | #menue_l1{
| |
| − | float: left;
| |
| − | margin: 0;
| |
| − | height: 22px;
| |
| − | width:649px;
| |
| − | }
| |
| − | #menue_l1 {
| |
| − | border-bottom: #7F7F7B solid 1px;
| |
| − | background-color: #F3E4E4;
| |
| − | }
| |
| − | #menue_l1 ul{
| |
| − | float: left;
| |
| − | margin: 4px 0 0 16px;
| |
| − | list-style: none;
| |
| − | }
| |
| − | #menue_l1 li{
| |
| − | float:left;
| |
| − | border-right: solid 2px #7F7F7B;
| |
| − | padding: 0 8px 0 8px;
| |
| − | }
| |
| − | #menue_l1 li{
| |
| − | font-size: 0.7em;
| |
| − | }
| |
| − | #menue_l1 a{
| |
| − | display: block;
| |
| − | position: relative;
| |
| − | }
| |
| − | #menue_l1 a{
| |
| − | font-weight: bold;
| |
| − | }
| |
| − | #menue_l1 a:link, #menue_l1 a:visited{
| |
| − | text-decoration: none;
| |
| − | color: #353535;
| |
| − | }
| |
| − | #menue_l1 a:focus, #menue_l1 a:hover, #menue_l1 a:active{
| |
| − | color: #790525;
| |
| − | }
| |
| − | #menue_l1 li.on a {
| |
| − | color: #790525;
| |
| − | }
| |
| − | </pre>
| |
