- This topic is empty.
July 9, 2014 at 3:42 am #175013dfnetParticipant
Hello! Since comments have been closed on the page at <https://css-tricks.com/better-tabs-with-round-out-borders/>, 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
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. :-)July 9, 2014 at 3:49 am #175042Paulie_DMember
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…
- The forum ‘Other’ is closed to new topics and replies.