Does a script for a stretchable navigation exist on Dynamic Drive?

[Shammus]

I was hoping to find a script for a particular sort of top navigational menu on this forum. I took a look and couldn't find one so I thought I'd post the question here. Basically, what I have in mind starts out with a few tabs sitting inside a larger wrapper like you see in the first picture. The silver is simply a background color for the <div> containing the six cities that are listed. (see first image below)

Attachment 2660

Basically, what I was hoping for, is a script that allows me to click on one of the cities (an onclick not onmouseover) and that tab expands to fill 100% of the remaining space in the wrapping parent <div> This will stay that way until you click on a second city and that tab expands. (see second image)

Attachment 2661

Hope that makes sense. Thanks in advance for pointing me in the right direction....

[Master_script_maker]

I can't find anything, but I would gladly make something. Would you like to use just <div>'s or <li>'s?

[Shammus]

I think either floating <div> tags or even a table would work if that's easier. Thank you in advance, I appreciate the assistance!

[Master_script_maker]

Edit: Fixed Error

Okay it's all done. Here is an example: http://masterscriptmaker.co.cc/dy/stretch.html. To do this you use the following structure:

<div class="s_menu">
  <ul>
    <li style="background-color: violet;"><a href=""><span>Baltimore</span></a></li>
    <li style="background-color: yellow;" class="s_menu_f"><a href=""><span>Newark</span></a></li>
    <li style="background-color: blue;"><a href=""><span>Memphis</span></a></li>
    <li style="background-color: orange;"><a href=""><span>San Antonio</span></a></li>
    <li style="background-color: purple;"><a href=""><span>Miami</span></a></li>
    <li style="background-color: gold;"><a href=""><span>Bronx</span></a></li>
  </ul>
</div>

what ever <li> you want expanded add class="s_menu_f", as you can see it is in the second <li>. If you don't add it to anything, it defaults to the first.
To style it correctly you would add this css:

body {
  padding: 0;
  margin: 0;
}
.s_menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.s_menu li {
  display: inline;
  float: left;
}
.s_menu a {
  color: white;
  text-decoration: none;
  font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
}
.s_menu a span {
  display: block;
  padding: 5px 30px;
  cursor: pointer;
}

And now for the script, you would add this before the </body> tag:

<script type="text/javascript">
/**Made By Master_Script_Maker**/
var s_menu={
  by:[],
  init:function() {
    var t=this.get();
    var f='', t2=[];
    for(var i=0;i<t.length;i++) {
      t2=t[i].getElementsByTagName("li");
      for(var n=0;n<t2.length;++n) {
        if(t2[n].className=="s_menu_f") {
          f=n;
        }
        t2[n].onclick=(function(i, n) {
          return function() {
            s_menu.expand(i, n);
            return false;
          };
        })(i, n);
      }
      this.menus.push([t[i], t2]);
      if(!f) {
        f=t2[0];
        f.className="s_menu_f";
        f=0;
      }
      setTimeout((function(t, i, f) {return function() {t.expand(i, f);};})(this, i, f), 200);
    }
  },
  menus:[],
  get:function() {
    var t=document.body.getElementsByTagName("div");
    var a=[];
    for(var i=0;i<t.length;i++) {
      if(t[i].className=="s_menu") {
        a.push(t[i]);
      }
    }
    return a;
  },
  expand:function(n, m) {
    var f=this.menus[n][1][m];
    var tem=f.parentNode.getElementsByTagName("li");
    for(var i=0;i<tem.length;i++) {
      tem[i].style.width='';
    }
    if(!this.by[n]) {
      this.by[n]=f.offsetParent.clientWidth-tem[tem.length-1].offsetLeft-tem[tem.length-1].clientWidth;
    }
    f.style.width=f.childNodes[0].childNodes[0].offsetWidth+this.by[n]+"px";
  }
};
function check() {
  var div=document.createElement("div");
  document.body.appendChild(div);
  if(typeof console!="object") {
    log=(function(d) {
      return function() {
        var temp=document.createTextNode(arguments.join(" "));
        d.appendChild(temp);
         d.appendChild(document.createElement("br"));
      }
    })(div);
  } else {
    log=console.log;
  }
}
Object.prototype.join=function (a) {
  var t="";
  for(var i=0;i<this.length;i++) {
    t+=this[i]+a;
  }
  return t;
};
check();
s_menu.init();  
</script>

Feel free to edit anything to better suit you; also, I'll be glad to answer any questions you have about it.

[Shammus]

Hello,

Sorry for the delay in my response, I've been out of town for a couple days. I appreciate the effort and time you put into helping me out with this. I'll take a look at the script a little closer and will certainly let you know, either way, the outcome or if I have any questions. Thank you again and much appreciated!

Brian

[Master_script_maker]

You're welcome! If it doesn't suit your needs, I would be glad to change it.

[Shammus]

Thank you again for taking the time to put this together for me. It looks great in Firefox 2 and 3, however it's actually not working in IE 6 or 7. This holds true for the script hosted on your website at the URL above as well. Is there anything that I'm missing?

Thanks again!
Brian

[Shammus]

Friendly bump hoping "Master_script_maker" sees it....

Thanks again

[Master_script_maker]

Okay, it's all fixed!

[Shammus]

Thanks again for the assistance! I noticed a few quirks about the script, a couple things I already took care of -

1. Removing the following IF statement allows you to have no tab extended when the page loads -

if(!f) {
f=t2[0];
f.className="s_menu_f";
f=0;
}
setTimeout((function(t, i, f) {return function() {t.expand(i, f);};})(this, i, f), 200);

2. There was a tiny quirk in IE 6 where additional padding was created underneath the tabs after one had been clicked. However, adding a "clear:both;" tag after all the <li> tags in the html (since they're floating anyway) fixed this issue....

The two things I haven't been able to fix just yet -

1. In Firefox, the script as a whole gets very testy if you set it in a parent <div> that has a set width. Unfortunately though, it will be necessary to set a width somehow when this is used. If you place the script as is on a site that already has containing <div> tags set up, the tabs will appear normally at first, but anytime you click on one of them, it will knock the remaining tabs to a second line.

2. In IE 6, if you click the tab on the right to extend it, and then click it a second time, that far right tab falls to a second line. Setting heights and widths for the tabs don't seem to have any effect on this either. This can be seen in IE 6 on your site at the URL above too.

Thanks so much for the assistance so far...any thoughts on the final two quirks?

PS...if it's easier to send you an email, let me know and I can continue dialogue with you privately.

Regards,
Brian