---
title: "Navigation Adidas"
url: "https://www.typo3.net/d/107368-navigation-adidas"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage"]
created: "2011-09-19"
last_reply: "2011-09-19"
replies: 1
solved: false
page: 1
pages: 1
lang: "de"
---

# Navigation Adidas

TYPO3 › Menüs · 1 Antwort · gestartet 2011-09-19

## Eröffnungsbeitrag

**Pflegefall** · 2011-09-19 · [Beitrag #1](https://www.typo3.net/d/107368-navigation-adidas/1)

Hallo,
hat zufällig jemand einen Tipp wie ich in Typo3 ein Navigation
basteln kann, die so aussieht wie die von <http://www.adidas.de>

Ich stell mir ein Horizontales Textmenu vor mit einem Rollover-Effekt
der einen Kasten über die komplette Breite öffnet, indem eine Sub-Navigation über mehrere Spalten ist.
Hab das irgendwo auch mal als CSS gesehen!!!

Hat jemand einen Tipp

## Antworten

### [#2](https://www.typo3.net/d/107368-navigation-adidas/2) · skydivematy · 2011-09-19

Hallo plegefall,
hab mal so eine nav gebaut.

setup:

```typoscript
lib.nav= COA
lib.nav{
  10 = HMENU
  10 {
    special = directory
    special.value = 5
    
    1 = TMENU
    1 {
      wrap = <ul id="nav1"> | </ul>
      expAll = 1
      noBlur = 1
      NO.ATagTitle.field = abstract // description // subtitle
      NO.wrapItemAndSub =   <li id="activities" class="NO"> | </li>      
      CUR < .NO
      CUR = 1
      CUR.wrapItemAndSub = <li id="activities" class="CUR"> | </li>
      CUR.linkWrap = <span class="indent">|</span>
      CUR.ATagBeforeWrap = 1
      IFSUB = 1
      IFSUB {
        ATagTitle.field = abstract // description // subtitle
        wrapItemAndSub =  <li id="activities" class="NO"> | </li> 
        linkWrap = <span class="indent">|</span>
        doNotLinkIt = 0
        ATagBeforeWrap = 1
      }
      
    }
    2 = TMENU
    2 {
      wrap=<div class="navBox"> <div class="navBoxList navBoxGroup"> | </div> </div>
      stdWrap.append = COA
      stdWrap.append {
        wrap = <div class="level">|</div>
        10 = CONTENT
        10 < styles.content.get
        10.select.pidInList.field ={field:uid}
        10.select.where = colPos=1
      }
      expAll = 1
      noBlur = 1
      NO.stdWrap.htmlSpecialChars = 1
      NO.doNotLinkIt = 0
      NO.ATagTitle.field = abstract // description // subtitle
      NO.linkWrap =  <div class="subSUBNavTitle"> <h3>|</h3> </div>
      NO.before.wrap = <div class="navColImage">|</div>
      NO.before.ATagBeforeWrap = 0
      NO.before.typolink.parameter.data = field:uid
      NO.beforeImgTagParams = title
      NO.beforeImgLink = 1
      NO.before.cObject = COA
      NO.before.cObject {
        10 = IMG_RESOURCE
        10 {
          file.import = uploads/media/
          file.import.listNum = 0
          file.import.override.field = media
        }
        10.stdWrap {
          dataWrap = <img src="|" alt="{field:title}"/>
          
        }
      }              
      NO.allWrap=<div class="sublinkBottom">|</div> 
      
      IFSUB = 1
      IFSUB {
        doNotLinkIt = 1
        ATagTitle.field = abstract // description // subtitle
        linkWrap =  <div class="subNavTitle"> <h2>|</h2> </div>
        stdWrap.htmlSpecialChars = 1
        before.wrap = <div class="navColImage">|</div>
        before.ATagBeforeWrap = 0
        before.typolink.parameter.data = field:uid
        beforeImgLink = 1
        before.cObject = COA
        before.cObject {
          10 = IMG_RESOURCE
          10 {
            file.import = uploads/media/
            file.import.listNum = 1
            file.import.override.field = media
          }
          10.stdWrap {
            dataWrap = <img src="|" alt="{field:title}"/>            
          }
        }
        wrapItemAndSub = <div class="navBoxListColumn"> | </div>        
      }    
    }    
    3 = TMENU
    3 {
      wrap = <div class="subList> <ul> |</ul></div>
      expAll = 1
      noBlur = 1
      NO.ATagTitle.field = abstract // description // subtitle
      NO.wrapItemAndSub = <li> | </li>
    }    
    4 >
    5 >   
  }
  20 = HMENU
  20 {
    special = directory
    special.value = 6
    1 = TMENU
    1 {
      wrap = <ul id="nav2"> | </ul>
      expAll = 1
      noBlur = 1
      NO.ATagTitle.field = abstract // description // subtitle
      NO.wrapItemAndSub =   <li id="news" class="NO"> | </li> 
      CUR < .NO
      CUR = 1
      CUR.wrapItemAndSub = <li id="news" class="CUR"> | </li>
      CUR.doNotLinkIt = 0
      CUR.linkWrap = <span class="indent">|</span>
      CUR.ATagBeforeWrap = 1
      IFSUB = 1
      IFSUB {
        ATagTitle.field = abstract // description // subtitle
        wrapItemAndSub =  <li id="news" class="NO"> | </li> 
        linkWrap = <span class="indent">|</span>
        doNotLinkIt = 0
        ATagBeforeWrap = 1
      }
    }
    2 = TMENU
    2 {
      wrap=<div class="navBox"> <div class="navBoxList navBoxGroup"> | </div> </div>
      stdWrap.append = COA
      stdWrap.append {
        wrap = <div class="level">|</div>
        10 = CONTENT
        10 < styles.content.get
        10.select.pidInList.field = {field:uid}
        10.select.where = colPos=2
        #20 = COA
        #20 {    
         # wrap =<div id="news_newsbox"> | </div>
         # 1  
        #}
      }
      expAll = 1
      noBlur = 1
      NO.stdWrap.htmlSpecialChars = 1
      NO.doNotLinkIt = 0
      NO.ATagTitle.field = abstract // description // subtitle
      NO.linkWrap =  <div class="subSUBNavTitle"> <h3>|</h3> </div>
      NO.before.wrap = <div class="navColImage">|</div>
      NO.before.ATagBeforeWrap = 0
      NO.before.typolink.parameter.data = field:uid
      NO.beforeImgTagParams = title
      NO.beforeImgLink = 1
      NO.before.cObject = COA
      NO.before.cObject {
        10 = IMG_RESOURCE
        10 {
          file.import = uploads/media/
          file.import.listNum = 0
          file.import.override.field = media
        }
        10.stdWrap {
          dataWrap = <img src="|" alt="{field:title}"/>          
        }
      }              
      NO.allWrap=<div class="sublinkBottom">|</div>     
      IFSUB = 1
      IFSUB {
        doNotLinkIt = 1
        ATagTitle.field = abstract // description // subtitle
        linkWrap =  <div class="subNavTitle"> <h2>|</h2> </div>
        stdWrap.htmlSpecialChars = 1
        before.wrap = <div class="navColImage">|</div>
        before.ATagBeforeWrap = 0
        before.typolink.parameter.data = field:uid
        beforeImgLink = 1
        before.cObject = COA
        before.cObject {
          10 = IMG_RESOURCE
          10 {
            file.import = uploads/media/
            file.import.listNum = 1
            file.import.override.field = media
          }
          10.stdWrap {
            dataWrap = <img src="|" alt="{field:title}"/>            
          }
        }
        wrapItemAndSub = <div class="navBoxListColumn"> | </div>        
      }    
    }    
    3 = TMENU
    3 {
      wrap = <div class="subList> <ul> |</ul></div>
      expAll = 1
      noBlur = 1
      NO.ATagTitle.field = abstract // description // subtitle
      NO.wrapItemAndSub = <li> | </li>
    }    
    4 >
    5 >    
  }
  30 = HMENU
  30 {
    special = list
    special.value = 2
   1 = TMENU
    1 {
      wrap = <ul id="nav3"> | </ul>
      expAll = 1
      noBlur = 1
      NO.ATagTitle.field = abstract // description // subtitle
      NO.wrapItemAndSub =   <li id="portal" class="NO"> | </li> 
      CUR < .NO
      CUR = 1
      CUR.wrapItemAndSub = <li id="portal" class="CUR"> | </li>
      CUR.doNotLinkIt = 0
      CUR.linkWrap = <span class="indent">|</span>
      CUR.ATagBeforeWrap = 1
      IFSUB = 1
      IFSUB {
        ATagTitle.field = abstract // description // subtitle
        wrapItemAndSub =  <li id="portal" class="NO"> | </li> 
        linkWrap = <span class="indent">|</span>
        doNotLinkIt = 0
        ATagBeforeWrap = 1
      }
    } 
    2 = TMENU
    2 {
      wrap=<div class="navBox"> <div class="navBoxList navBoxGroup"> | </div> </div>
      stdWrap.append = COA
      stdWrap.append {
        wrap = <div class="level">|</div>
        10 = CONTENT
        10 < styles.content.get
        10.select.pidInList= 508
        10.select.where = colPos=1
      }
      expAll = 1
      noBlur = 1
      NO.stdWrap.htmlSpecialChars = 1
      NO.doNotLinkIt = 0
      NO.ATagTitle.field = abstract // description // subtitle
      NO.linkWrap =  <div class="subSUBNavTitle"> <h3>|</h3> </div>
      NO.before.wrap = <div class="navColImage">|</div>
      NO.before.ATagBeforeWrap = 0
      NO.before.typolink.parameter.data = field:uid
      NO.beforeImgTagParams = title
      NO.beforeImgLink = 1
      NO.before.cObject = COA
      NO.before.cObject {
        10 = IMG_RESOURCE
        10 {
          file.import = uploads/media/
          file.import.listNum = 0
          file.import.override.field = media
        }
        10.stdWrap {
          dataWrap = <img src="|" alt="{field:title}"/>          
        }
      }              
      NO.allWrap=<div class="sublinkBottom">|</div> 
      
      IFSUB = 1
      IFSUB {
        doNotLinkIt = 1
        ATagTitle.field = abstract // description // subtitle
        linkWrap =  <div class="subNavTitle"> <h2>|</h2> </div>
        stdWrap.htmlSpecialChars = 1
        before.wrap = <div class="navColImage">|</div>
        before.ATagBeforeWrap = 0
        before.typolink.parameter.data = field:uid
        beforeImgLink = 1
        before.cObject = COA
        before.cObject {
          10 = IMG_RESOURCE
          10 {
            file.import = uploads/media/
            file.import.listNum = 1
            file.import.override.field = media
          }
          10.stdWrap {
            dataWrap = <img src="|" alt="{field:title}"/>            
          }
        }
        wrapItemAndSub = <div class="navBoxListColumn"> | </div>        
      }    
    }    
  } 
}
```

Das ganze mit jQuery animiert.

Es gibt auch eine ext.

<http://typo3.org/extensions/repository/view/freecssdropdownmenu/current/>

gruss
maty

---

Quelle: „Navigation Adidas“, typo3.net, https://www.typo3.net/d/107368-navigation-adidas
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.