Example of TL & Suckerfish image replace on first level

Does anyone have an example for TL using the Suckerfish dropmenu technique with image replacement on the first level? I saw a bunch post in the forums but none use a image replacement technique that can find

There's an example of what I want to do here.
http://www.tyssendesign.com.au/examples/IR-navbar.html

The problem is that this technique requires a nested [i] tag or other css container to work correctly.

I was looking add a span or em to the link or menu module but I couldn't make it happen. anyway I figure there is another technique to do this but I haven't found it yet.

I tried to hack the css to make this to work without the [i] container but it just broke. :(

Put a copy of the navigation template (nav_default.tpl) into the templates directory and change it whatever way you like ;)

Thanks Vera,

I knew there was a work around, I should have guessed this one its just like PHP templates.

Hi All,

Is there a TL function or technique that I can use to test if a child page is active? so I can write an 'active' class in the parent item?

I have got this mostly working but I am having trouble keeping the parent item highlighted when child pages are displayed.

I think that there's something wrong with my modified template but I can't figure it out. Any input appreciated.


Here is my nav-default.tpl that I am modifing

Code:

---


<ul class="<?php if ($this->level == 'level_1') { echo "nav IR clear-sf "; } echo $this->level; ?>">

 <?php foreach ($this->items as $item) { 
    if ($item['isActive'] && $this->level == 'level_1') {  ?>
      <li class="active <?php if ($item['class']) {  echo $item['class']; } ?>">
       
        <span class="active <?php if ($item['class']) {  echo $item['class'];  } ?>"> <?php echo $item['link']; ?></span>
        <?php echo $item['subitems']; ?>
     
    <?php } else { ?>
      <li <?php if ($item['class']) { ?> class="<?php echo $item['class']; ?>"<?php } ?>>
    <a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"
      <?php if ($item['class']) { ?> class="<?php echo $item['class']; ?>" <?php } ?>
      <?php if ($item['accesskey'] != ''){ ?> accesskey="<?php echo $item['accesskey']; ?>" <?php } ?>
      <?php if ($item['tabindex']) { ?> tabindex="<?php echo $item['tabindex']; ?>" <?php } ?>
      <?php if ($item['nofollow']) { ?> rel="nofollow" <?php } ?>
      onclick="this.blur();<?php echo $item['target']; ?>"><?php echo $item['link']; 
      if ($this->level == 'level_1') { echo""; } ?></a>
    <?php echo $item['subitems']; ?>
  <?php } 
  } //endforeach 
  ?>[/list]

---

The css code if anyone is interested is here

Code:

---

/* **** Keep in mind that this method uses a single image for all buttons.  The image is shifted up and down for highlights and positioned left to right with overflow widths trimmed for each button */
#mainnav {
        position:absolute;
        left: 220px;
        top: 128px;
        margin:0; padding:0;
        z-index: 500;
 }
        .nav a { text-decoration: none; font-weight: bold; }
        /*a:hover { text-decoration: underline; } */
        .nav a:hover { text-decoration: none; }
        h4.tested { margin-top: 2em; }
        small { line-height: 120%; }
       
 

        /* Hides from IE-mac \*/
        * html .clear-sf { height: 1%; }
        .clear { display: block; }
        /* End hide from IE-mac */
       
        /* image replacement general properties */
        ul.IR li {
                position: relative; /*establish a new positioning context for the elements contained within */
                /* The original method recommends setting this so that the text doesn't peak out if you resize the text.
                  But overflow also includes our dropdown list, so we need the overflow to be visible. */
                /*overflow: hidden; */
                font-size: 0.9em;
        }
                       
        .IR em {
                display: block;
                position: absolute;
                top: 0; left: 0;
                z-index: 1;
                /* it’s the em which we’re going to place at the top corner of each list element with position: absolute so that it in fact covers up the text underneath. We need to set the em to display: block because it’s an inline element and won’t take dimensions in its default state. */
        }
       
        /* For IE5.x mac only */
        * html>body        .IR {
                position: static;
                overflow: visible;
                font-size: 10px;
  }
        * html>body .IR em  { position: static; }
       
        /* image replacement specific properties */
 
        .nav { list-style: none; } /*  remove the bullets from the list */
        .nav li { float: left; padding-bottom: 10px; } /*  Float to make inline and add a little bottom padding to make sure the sub menus don't disappear before selecting them */
        .nav li, .nav li em { height: 22px;  width: 220px;  } /* assign  width of LI here necessary for drops - assign same dimensions to both the list items and the ems that will hold the images. */
       
        * html>body ul.nav li em { margin-bottom: -22px; } /* for ie5.x/mac only */
       
        .link1 em, .link2 em, .link3 em, .link4 em, .link5 em, .link6 em {  /* apply the background-image to each of the ems */
                background: url(../../abmac-default/images/links.jpg) no-repeat;
                cursor: pointer; /* IE5 requires cursor: hand; however this is not valid CSS2 */
        }
       

        /* each link gets a class so we can style, position and set width separately */
        .nav li.link1, .nav li.link1 em {  width: 93px;  }
        .nav li.link2, .nav li.link2 em {  width: 132px;  }
        .nav li.link3, .nav li.link3 em {  width: 125px;  }
        .nav li.link4, .nav li.link4 em {  width: 125px;  }
        .nav li.link5, .nav li.link5 em {  width: 91px;  }
        .nav li.link6, .nav li.link6 em {  width: 97px;  }
       
        ul li.active em { background-position: 0 -22px; } /* for active state */

        .link1 { left: 0;  }
        .link1 em { background-position: 0 0; }
        .link1:hover em { background-position: 0 -22px; }
        .link2 { left: 0px; }
        .link2 em { background-position: -93px 0; }
        .link2:hover em { background-position: -93px -22px; }
        .link3 { left: 0px; }
        .link3 em { background-position: -225px 0; }
        .link3:hover em { background-position: -225px -22px; }
        .link4 { left: 0px; }
        .link4 em { background-position: -350px 0; }
        .link4:hover em { background-position: -350px -22px; }
        .link5 { left: 0px; }
        .link5 em { background-position: -475px 0; }
        .link5:hover em { background-position: -475px -22px; }
        .link6 { left: 0px; }
        .link6 em { background-position: -566px 0; }
        .link6:hover em { background-position: -566px -22px; }
       
        /* suckerfish styles */
        .nav a { display: block; font-weight: normal; font-size:8px; }
       
        * html .nav a { height: 1%; }  /* The Holly Hack - Correct a hasLayout problem with IE6 which leed to problems with accessing the dropdown links*/
       
        .nav li ul {
                position: absolute;
                z-index: 10; /* show the dropdowns above the images */
                top: 22px; /* position the dropdowns a set distance from the top of the image */

                left: -999em; /* the dropdowns - are placed absolutely relative to their parents off-screen  */
                display:none;
                list-style: none;
                border: 2px solid #cbc0a3;
               
        }
       
        .nav li:hover ul { left: 0; padding-left:0; margin-left:0; display:inline;}
       
        .nav li li {
                height: auto; /* reset the height and padding set on the IR list items  because they were set for the image replaced list items.  */
                line-height: 1.5em; /* control leading around text of drop-downs */
                padding-bottom: 0;
                font-size: 110%;
               
                border-bottom: 1px solid #cbc0a3;
                font-family:Georgia,'Times New Roman',Times,serif;
                font-size:11px;
                text-align:left;
 
        }
       
       
        .nav li ul a {
                padding: 0.25em;
                color: #990000;
                padding-left:12px;
                background-color:#E5E0CD;
                font-size:11px;
        }
        .nav li ul a:hover {
                color: #FFFFFF;
                background: #990000;
        }

---

'mainnav' div is in my tpl.

Quote:

---

Originally Posted by nvisioncurtis

Is there a TL function or technique that I can use to test if a child page is active? so I can write an 'active' class in the parent item?

---

Simply use little javascript code (e.g. jQuery). I think it's most easly way to do that.

You should compare your template to the TL default menu template. Because the default template already includes a "trail" class to menu items with an active submenu item. If that is not working in your modified template then you probably broke it... (sorry ;))

Thanks guys,

The active trail is working actually for the selected sub item.

I'm adapting a static website to TL and previously I used a body ID tag to keep the menu highlighted. I'll hunt around some more I think that the template comes after the point I need to specify the current grouping.

I realize now that I just needed to add a class in the page structure for each page. That added to the body tag I'm set to style the menu as selected for sub-items.