Untitled Document
 
birkit.com: Website Craftsmanship

HMENU with SPC (spacer)

This is  Typoscript example of a three level HMENU making use of the SPC property to enable spacers in the menu. Spacers are not real pages, rather, they are just headlines that appear in the menu. The Typoscript HMENU in this example is the real HMENU used for the left navigation of this site. The grey entries are spacers.

HMENU Typoscript

  1. temp.mainMenu= HMENU
  2. temp.mainMenu{
  3.   entryLevel = 1
  4.   1 = TMENU
  5.   1{
  6.       wrap = <div id="navLevel1"> <ul id="navlist">|</ul></div>
  7.       NO.wrapItemAndSub = <li>|</li>
  8.       #Active Links
  9.       ACT=1
  10.       ACT<NO
  11.       #The current link (here just for reference...behavior controlled by CSS)
  12.       CUR = 1
  13.       CUR<NO
  14.   }
  15.   2 = TMENU
  16.   2{
  17.       wrap = <div id="navLevel2"><ul id="navlist2">|</ul></div>
  18.       #Activate the spacer function for this menu level
  19.       SPC = 1
  20.       SPC{
  21.             doNotShowLink = 0
  22.             doNotLinkIt = 1
  23.             #Force the wrap of the spacer
  24.             allWrap = <li>|</li>
  25.       }
  26.       NO{
  27.             expAll=1
  28.             wrapItemAndSub = <li>|</li>
  29.       }
  30.       ACT=1
  31.       ACT<NO
  32.       CUR=1
  33.       CUR<NO
  34.   }
  35.     # third level  
  36.   3 = TMENU
  37.   3{
  38.       wrap = <div id="navLevel3"><ul id="navlist3">|</ul></div>
  39.       NO.wrapItemAndSub = <li>|</li>
  40.       ACT=1
  41.       ACT<NO
  42.       CUR=1
  43.       CUR<NO
  44.   }
  45. }
  46. page.2.marks.MENU < temp.mainMenu
  47.  

HMENU CSS

  1. #navlist
  2. {
  3.   padding-left: 0;
  4.   margin-left:  0;
  5.   border-bottom:  1px solid gray;
  6.   width:      150px;
  7.   font-weight:  bold;
  8.   position:  relative;
  9.   left:   -50px;
  10. }
  11.  
  12. #navlist li
  13. {
  14.   list-style:   none;
  15.   color:    #999999;
  16.   margin:     0;
  17.   padding:   0.25em;
  18.   border-top:   1px solid gray;
  19. }
  20.  
  21. #navlist li a:link
  22. {
  23.   text-decoration: none;
  24.   color:    #0000FF;
  25. }
  26.  
  27. #navlist li a:hover
  28. {
  29.   text-decoration: none;
  30.   color:    #0066FF;
  31. }
  32.  
  33. #navLevel2
  34. {
  35.   position:  relative;
  36.   left:       -40px;
  37. }
  38. #navlist2 li
  39. {
  40.   list-style:   none;
  41.   font-weight:  normal;
  42.   margin:     0;
  43.   padding:   0.25em;
  44.   border-top:   none;
  45. }
  46. #navLevel3
  47. {
  48.   position:  relative;
  49.   left:       -40px;
  50. }
  51. #navlist3 li
  52. {
  53.   list-style:   none;
  54.   font-weight:  normal;
  55.   margin:     0;
  56.   padding:   0.25em;
  57.   border-top:   none;
  58. }
  59.