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
Hallo plegefall,
hab mal so eine nav gebaut.
setup:
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