asked on

CSS/jQuery Q: Display ul li tabs horizontally with left and right scroll icon

Hi,

I need to create horizontal responsive tabs for my screen using ul li in html and css/javascript /jquery to complete the functionality.

In ideal scenario, all the tabs will be displayed horizontally but when size of the page gets decreased or number of tabs increases, it should still show all tabs in single line but with scroll icon to its left & right so that user can use it to scroll and view other tabs too.

HTML:

<html lang="en"><head>

        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="format-detection" content="telephone=no">

    <meta charset="utf-8">
    <title>Some test page</title>
  
<style id="modelTableStylepublicTable">table.lockedTableHeader { display: block; width: auto; } table.lockedTableHeader tbody { display: block; overflow: auto; } table.lockedTableHeader thead { display: block; overflow: hidden; } table.lockedTableHeader thead tr { display: block; } table.lockedTableHeader.lth_publicTable > tbody { max-height: 315.5048px; }table.lockedTableHeader.lth_publicTable > tbody { max-width: 955.492px; } table.lockedTableHeader.lth_publicTable > thead { max-width: 955.492px; }table.lockedTableHeader.lth_publicTable tr:nth-child(1) th:nth-child(1), table.lockedTableHeader.lth_publicTable td:nth-child(1) { width: 400px  !important; min-width: 400px !important; } table.lockedTableHeader.lth_publicTable tr:nth-child(1) th:nth-child(2), table.lockedTableHeader.lth_publicTable td:nth-child(2) { width: 120px  !important; min-width: 120px !important; } table.lockedTableHeader.lth_publicTable tr:nth-child(1) th:nth-child(3), table.lockedTableHeader.lth_publicTable td:nth-child(3) { width: 300px  !important; min-width: 300px !important; } table.lockedTableHeader.lth_publicTable tr:nth-child(1) th:nth-child(4), table.lockedTableHeader.lth_publicTable td:nth-child(4) { width: 100px  !important; min-width: 100px !important; } table.lockedTableHeader.lth_publicTable tr:nth-child(1) th:nth-child(5), table.lockedTableHeader.lth_publicTable td:nth-child(5) { width: 330px  !important; min-width: 330px !important; } </style></head>
<body>
    <div id="TestContainer">
        <div id="acc-mainPage" style="width: 985px;">
            <div id="MainForm"></div>
            <div id="mainContent" class="" style="height: 762px; width: 957px;">
                <div id="mainContainer" class="content-wrapper" style="height: 100%;">
                    <section class="content-wrapper clear-fix" style="height: 100%;">
                                    
                            <div id="TestTabs" style="clear: both; ">
                        <ul class="Test-tabs">
                        <li class="current" data-pagekey="A"><a href="#" class="ignoreLinkStyle" style="cursor:default;">Aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a></li>
                        <li data-pagekey="B"><a href="/Process/B" class="ignoreLinkStyle" style="cursor:default;">Bbbbbbbbbbbbbbbb</a></li>
                        <li data-pagekey="C"><a href="/Process/C" class="ignoreLinkStyle" style="cursor:default;">Ccccccccccccccccc</a></li>
                        <li data-pagekey="D"><a href="/Process/D" class="ignoreLinkStyle" style="cursor:default;">Ddddddddddddddddd</a></li>
                        <li data-pagekey="E"><a href="/Process/E" class="ignoreLinkStyle" style="cursor:default;">Eeeeeeeeeeeeeee</a></li>
                        <li data-pagekey="F"><a href="/Process/F" class="ignoreLinkStyle" style="cursor:default;">Ffffffffffffffffffffff</a></li>
                        <li data-pagekey="X"><a href="/Process/X" class="ignoreLinkStyle" style="cursor:default;">Xxxxxxxxx</a></li>
                        <li data-pagekey="Y"><a href="/Process/Y" class="ignoreLinkStyle" style="cursor:default;">Yyyyyyyyyyyyyyy</a></li>
                        <li data-pagekey="Z"><a href="/Process/Z" class="ignoreLinkStyle" style="cursor:default;">Zzzzzzzzz</a></li>
                        </ul>                            
                     </div>
                    </section>
                </div>
            </div>
            <footer>
            </footer>
           </div>
       </div>
</body>
</html>

Open in new window

CSS:

 
#TestTabs
{
   margin-bottom: 12px;
}

.Test-tabs {
    list-style: none;
    border-bottom: solid 1px #054353;
    height: 24px;
    padding: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    display: table;
    white-space: nowrap;
    overflow: auto;
    width: 100%;
}

   .Test-tabs li
   {
      white-space: nowrap;
      float: left;
      font-size: 13px;
      font-family: 'Noto Sans', sans-serif;
      /*border: solid #c0d1da;*/
      border-width: 1px 1px 0px 1px;
      border-collapse: collapse;
      margin-right: 4px;
      margin-bottom: 2px;
      margin-top: 2px;
      background-color: #c0d1da;
      border-radius: 7px 7px 0 0;
      height: 30px;
   }

      .Test-tabs li:hover
      {
         background-color: #d9e3e9;
         border-color: #c2c2c2;
      }

    .Test-tabs li a {
        display: block;
        padding: 5px 8px 5px 8px;
        text-decoration: none;
        color: #2A2A2A;
        background-color: #E0EBF1;
        border-radius: 7px 7px 0 0;
       
    }

      .Test-tabs li.current
      {   
         border: solid #417491;
         border-width: 1px 1px 0px 1px;
      }

        .Test-tabs li.current a {
            color: #2A2A2A;
            font-weight: bold;
            background-color: #FFFFFF;      
        }

Open in new window

Riyaz Shah

ASKER

End Result should look something like this: