What was originally supposed to be a little CSS sleight of hand, became a big piece of JavaScript, which occupied my evenings for a month, my todo list growing as I progressed in this project. Those interested can discover the issues encountered later in this article, for others to simply click on the link below:

You can download it on Github

The use of this library should encourage a simple and efficient semantics, so I opted for a classic unordered list, decorated with a simple class: tabs.
For compatibility reasons, any listeners already applied to each list item should be kept.

Simple example

See the Pen Custom checkboxes demo by Alexis Riche (@alexisr) on CodePen.

More complex example

More complex example with images and 2 correlated tab levels

See the Pen Custom checkboxes demo by Alexis Riche (@alexisr) on CodePen.

Todo list

1. Detect if the sum of the widths of the <li> elements is greater than the width of the parent <ul>
   • Works but precision can be improved (this could eventually come in a 1.1 version)
2. Show horizontal scrollbar on <li> list only when cursor is over
3. Reload the library after resizing the window
   • Check if containers and stuff have already been created
4. Add a first and a last
5. item to each list to fill the line to the end
   • First one was finally useless
6. Add a wrapper to each <ul> list, whose pseudo-elements ::before / ::after would allow to display visual indicators on the presence of hidden tabs
7. Detect a horizontal scrolling to trigger the display of visual indicators of hidden tabs
8. Design good visual indicators for hidden tabs
9. Manage light and dark themes
10. Manage media query break points for mobile devices :
    
    • Desktop: Scrollbars should only appear when the mouse cursor is hovering
    • Mobile: Scrollbars should always be displayed
    • Seems to be solved by using overflow-x: auto on both desktop and mobile resolutions
11. Clean and rename classes
12. Add optional pipes / visual splitters to separate unselected tabs. Must avoid the very first and very last one, and the ones directly before and after the selected tab
    • Bug: Trigger separators display, even if no tab is selected at opening
13. Manage separators with cookies
    • No need for cookies
14. Manage the display status of each <ul> list: CSS not displayed status must be respected by the library
    • Onclick events on <a> tags must rescan the <ul> lists display status
15. Calculate the pseudo-elements ::before / ::after width of each tab of a row, depending of its native height
    • Considering the difficulties to manage ::before an ::after pseudo-elements through JavaScript, this part will exploited in a future update
16. Replace the <li> elements padding properties, by margin properties on their children <a> elements, to avoid triggering events linked to <li> without triggering the relevant tab selection

Comments