JSFiddle - React, Tailwind, and code Playground

by javad ebrahimi

HTML

<div class="sc_menu" style="vertical-align: middle;">
                    <ul class="sc_menu">
                        <li runat="server" id="branch"><a href="frmBranch.aspx">Branch</a></li>
                        <li runat="server" id="etype"><a href="EmployeeType.aspx">Employee Type</a></li>
                        <li runat="server" id="employee"><a href="EmployeeMaster.aspx">Employees</a></li>
                        <li runat="server" id="category"><a href="CategoryMaster.aspx">Categories</a></li>
                        <li runat="server" id="subcategory"><a href="SubCategoryMaster.aspx">Sub Categories</a></li>
                        <li runat="server" id="menu"><a href="MenuMaster.aspx">Menu Master</a></li>
                        <li runat="server" id="units"><a href="Units.aspx">Units</a></li>
                        <li runat="server" id="tables"><a href="Tables.aspx">Tables</a></li>
                        <li runat="server" id="taxes"><a href="Taxes.aspx">Taxes</a></li>
                        <li runat="server" id="logout"><a href="../Logout.aspx">Logout</a></li>
                    </ul>
                </div>

CSS

div.sc_menu
{
    position: relative;
    overflow: auto;
    max-width: 1000px;
    min-width: 400px;
}

ul.sc_menu
{
    display: block;
    width: 1500px;
    padding: 0 0 0 10px;
    margin: 0;
    list-style: none;
}

.sc_menu li
{
    display: block;
    float: left;
    padding: 0 4px;
}

.sc_menu a
{
    display: block;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 14px;
    color: #000;
    text-decoration: none;
    padding: 5px 10px;
}

    .sc_menu a:hover, .sc_menu .active a
    {
        color: #000;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border: 1px solid #fff;
    }

JavaScript

$(function () {
            var div = $('div.sc_menu'),
                 ul = $('ul.sc_menu'),
                 ulPadding = 15;
            var divWidth = div.width();
            div.css({ overflow: 'hidden' });
            var lastLi = ul.find('li:last-child');
            div.mousemove(function (e) {
                var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;

                var left = (e.pageX - div.offset().left) * (ulWidth - divWidth) / divWidth;
                div.scrollLeft(left);
            });
        });