[TYPO3] navigation with unique icons for each nav entry

[Dave]

Hi all,

I have site which needs a navigation with unique icons for each nav. entry,
thus for example - 'about us' would have an about us icon, 'contact us'
would have a contact us icon.

 

I am not sure how to configure this with typoscript, but also how would I
configure the typoscript so when the icon is clicked it remains in the
active state for the page it is on (has a differwent image for active state
and/or rollover state?

 

No other main level pages need to be added, so I don't need to be able to
add new pages and thus add another unique icon..hopefully!!!

 

Below is my basic code for a Gmenu. Maybee the whole background image can
change for each menu item???????

 

subparts.footmenu_1 = HMENU

subparts.footmenu_1.1 = GMENU

subparts.footmenu_1.1 {

  layerStyle =
position:absolute;left:0px;top:30px;width:10px;VISIBILITY:hidden; 

  xPosOffset =-40

  lockPosition = x

  expAll=1

  NO {

    backColor = #000000

            10.fontColor = #ff9933

    XY = [10.w]+15, 30

    10 = TEXT

            10.fontSize = 18

            

            10.fontFile = fileadmin/VENETO.TTF

    10.text.field = title

    10.offset = 8,20

  }

  RO < .NO

RO {

10.fontColor = #ffffff

20 >

20< .10

}

RO = 1

 

ACT < .RO

ACT {

10.fontColor = #ffffff

20 >

20< .10

}

ACT = 1

}

 

 

The closest I can find on the net is this snippet which I think changes the
header for each page.

 

Section Index with individual CSS-Styles

This snippet wraps every section with a own CSS-style for formatting the
index on each page individually. The layout setting of the header controls
this behaviour (Layout1 - Layout5) and sets the coresponding CSS-Style
.csc-section-1 to csc-section-5. 



# override "Section index (pagecontent w/Index checked)"

tt_content.menu.20.3 >

tt_content.menu.20 {

  3 < styles.content.get

  3.wrap = <div class="csc-menu csc-menu-3">|</div>

  3.select.andWhere = sectionIndex!=0

  3.select.pidInList.override.field = pages

  3.renderObj = CASE

  3.renderObj {

    key.field = header_layout

    default = COA

    default {

      stdWrap.fieldRequired = header

      10 = TEXT

      10.field = header

      10.trim = 1

      10.htmlSpecialChars = 1

      10.dataWrap = <p class="csc-section-1">|</p>

      10.typolink.parameter.field = pid

      10.typolink.section.field = uid

    }

    1 < .default

    2 < .default

    2.10.dataWrap = <p class="csc-section-2">|</p>

    3 < .default

    3.10.dataWrap = <p class="csc-section-3">|</p>

    4 < .default

    4.10.dataWrap = <p class="csc-section-4">|</p>

    5 < .default

    5.10.dataWrap = <p class="csc-section-5">|</p>

  }

 

Regards,

 

Dave