JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Messages</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Preferences</a></li>
    <li><a href="#">Administration</a></li>
    <li><a href="#">Preferences</a></li>
    <li><a href="#">Administration</a></li>
  </ul>

SCSS

body {font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;font-size:1em;}
a {text-decoration:none;}

ul.nav {
    $width : 616px;
    
    height:30px;
    border-top:5px solid #468b17;
    background: #a6c47b; /* Old browsers */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#a6c47b), color-stop(100%,#468b17)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #a6c47b 1%,#468b17 100%); /* Chrome10+,Safari5.1+ */
    background: linear-gradient(top, #a6c47b 1%,#468b17 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6c47b', endColorstr='#468b17',GradientType=0 ); /* IE6-8 */
    box-shadow:-2px 2px 5px rgba(0,0,0,0.7);
    width:$width;
    
    li {list-style:none;float:left;text-align:center;

    a {
    color:#fff;
    font-size:0.8em;
    padding:5px 0;
    display:block;
    height:20px;
    border-right:1px solid rgba(70,139,23,0.5);

}
}

}

JavaScript

/*adjust horizontal navigation tab dimensions*/

var nav = document.getElementsByClassName('nav')[0],
    nav_width = window.getComputedStyle(nav).getPropertyValue('width'),
    nav_links = nav.getElementsByTagName('a'),
    nav_link,
    nav_links_length = nav_links.length,
    nav_links_new_width = parseInt(nav_width)/nav_links_length - 1 +"px",
    font_size = parseInt(window.getComputedStyle(nav_links[0]).getPropertyValue('font-size')),
    i;

for (i = 0; i < nav_links_length; i++) {
    nav_link = nav_links[i];
    nav_link.style.width = nav_links_new_width;
    
    /*adjust font-size as to not overflow the a tags*/
    nav_link.style.overflow = 'auto';
    
    while( nav_link.scrollWidth > parseInt(nav_links_new_width)) {
        font_size--;
        nav_link.style.fontSize = font_size + "px";
    }
    
    nav_link.style.overflow = 'visible';
}

/*give text a little room to breathe*/
font_size--;

for(i = 0; i < nav_links_length; i++) {
    nav_links[i].style.fontSize = font_size + "px";;
}