Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Comments on ‘(Better) Tabs with Round Out Borders’

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #175013
    dfnet
    Participant

    Hello! Since comments have been closed on the page at <https://css-tricks.com/better-tabs-with-round-out-borders/&gt;, I’d like to make a couple of observations about that tabbed navigation bar here.

    (1.) I recommend adding ‘.tabrow li:hover’ and ‘.tabrow li:hover:before’ definitions to the styles (with different color backgrounds), because doing so greatly enhances the user experience when mousing over the links.

    (2.) After I had customized the links to my liking (color schemes, mouseover effects) and proceeded to test the navigation on a real site, I noticed that clicking on any particular tab did nothing — even though each

    • contained a link to a proper URL. The web browser did not advance to the designated URL; the page remained static. After following the advice about “Reduced Test Cases” at <https://css-tricks.com/reduced-test-cases/&gt;, I soon discovered that removing two JavaScripts that were included in the downloaded sample file (RoundOutTabs2/index.html) did the trick: after they were removed, the browser advanced as desired to the linked URL(s). Those two scripts are as follows:

     

    <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script&gt;
    <script>
    $(function() {
    $(“li”).click(function(e) {
    e.preventDefault();
    $(“li”).removeClass(“selected”);
    $(this).addClass(“selected”);
    });
    });
    </script>

    This experience led me to wonder why the scripts were included in the first place, since the navigation works without them, but does not work with them?

    (3.) In a practical application, i.e. employing the navigation on a real site with 12 tabs and using 13px padding in ‘.tabrow li’, I discovered that shrinking the browser window to less than the navigation’s width causes the tabs to progressively disappear, rather than wrapping to a new line or introducing a horizontal scrollbar in the browser window. Previously, when I had used a table-based navigation with percentage widths assigned to each link’s cell, the browser produced a horizontal scrollbar once the window was smaller than the navigation’s width.

    Obviously, disappearing tabs do not lend themselves well to a navigation structure that is universally compatible with different sized monitors and/or browser windows, and particularly not when viewing a site on a smartphone or iPod Touch with a small screen. Mobile application is pretty much ruled out in that case, unless only a few tabs are used.

    (4.) Finally, the downloaded zip file contained a ‘css’ folder with a ‘style.css’ file (authored by Chris Coyier) which is linked from the root folder’s ‘index.html’ file. However, the included classes (h1, .group) do not appear within the ‘index.html’ file itself. Why is the extraneous ‘style.css’ file included at all in the package?

    Would anyone else like to comment on these observations? Thank you in advance for your consideration. :-)

    #175042
    Paulie_D
    Member

    Well, that was a couple of years ago…https://css-tricks.com/better-tabs-with-round-out-borders/

    I can’t comment on your specific issues but Chris has moved to SVGs for more complicated design elements such as those previously featured…

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘Other’ is closed to new topics and replies.