JSFiddle - React, Tailwind, and code Playground

by matt9388

HTML

<ul class="vmenu">
    <li><a class="menu1 hiLite" href="Ceramic-Tile-And-Grout-Tips_1.php">Tile Design Ideas</a><a class="toggle1 hiLite" href="#">+ -</a>

    </li>
    <ul class="submenu1">
        <li><a class="submenu hiLite" href="Glass-Tile.php">Glass Tile</a>

        </li>
        <li><a class="submenu hiLite" href="Saltillo-Mexican-Pavers.php">Mexican Saltillo Pavers</a>

        </li>
        <li><a class="submenu hiLite" href="Porcelain-Tile-vs-Ceramic-Tile.php">Porcelain Tile  vs Ceramic Tile</a>

        </li>
        <li><a class="submenu hiLite" href="Tile-Designs.php">Tile Designs</a>

        </li>
        <li><a class="submenu hiLite" href="Tile-Inlay.php">Tile Inlays</a>

        </li>
        <li><a class="submenu hiLite" href="Tile-Layout.php">Tile Layout</a>

        </li>
        <li><a class="submenu hiLite" href="Ceramic-Tile-Wainscot.php">Tile Wainscot</a>

        </li>
    </ul>
    <li><a class="menu2 hiLite" href="Ceramic-Tile-And-Grout-Tips_2.php">Grout and Care Guide</a><a class="toggle2 hiLite" href="#">+ -</a>

    </li>
    <ul class="submenu2">
        <li><a class="submenu hiLite" href="Common-Grout-Issues.php">Common Grout Issues</a>

        </li>
        <li><a class="submenu hiLite" href="How-To-Clean-Grout.php">How To Clean Grout</a>

        </li>
        <li><a class="submenu hiLite" href="How-To-Color-Match-Grout.php">How To Color Match Grout</a>

        </li>
        <li><a class="submenu hiLite" href="Grout-Efflorescence.php">How To Remove Grout Efflorescence</a>

        </li>
        <li><a class="submenu hiLite" href="Grout-Colorant.php">When To Use Grout Colorant</a>

        </li>
        <li><a class="submenu hiLite" href="Grout-Release.php">How To Use Grout Release</a>

        </li>
        <li><a class="submenu hiLite" href="Repair-vs-Replace-Your-Grout.php">Remove Or Replace your Grout?</a>

        </li>
        <li><a class="submenu hiLite" href="Grout.php">When Is Tile Ready For Grout?</a>

       ...

CSS

.toggle1, .toggle2, .toggle3, .toggle4 {
    float:left;
    color: white;
    font-weight:bold;
    text-decoration:none;
    padding: 4px;
    border-radius: 5px;
    background-color: #1B4B9A;
}
.vmenuContainer {
    width:192px;
    height:100%;
    float: left;
}
ul.vmenu {
    padding-left: 0;
    width: 232px;
}
.vmenu, .menu1, .menu2, .menu3, .menu4, .submenu, .submenu1, .submenu2, .submenu3, .submenu4 {
    margin-top: 0px;
    float: left;
    list-style:none;
    font-size: 1.04em;
    text-decoration:none;
    color: #ffffff;
    font-family: Verdana, sans-serif;
    text-align: left;
}
a.menu, a.menu1, a.menu2, a.menu3, a.menu4, a.submenu, a.submenu1, a.submenu2, a.submenu3, a.submenu4 {
    display: block;
    border: 2px solid #ffffff;
    border-radius: 10px;
    padding: 4px;
    width: 180px;
    height: 45px;
}
a.menu, a.menu1, a.menu2, a.menu3, a.menu4 {
    background-color: #1B4B9A;
}
a.submenu, a.submenu1, a.submenu2, a.submenu3, a.submenu4 {
    background-color: #455257;
}
a.hiLite:hover {
    background-color: #3C78DB;
    color: #ffffff;
    text-decoration:none;
}
a._current_highlight_button {
    background-color: purple
}

JavaScript

$.each([1, 2, 3, 4, 5], function (index) {
    $(".toggle" + index).click(function () {
        $(".submenu" + index).slideToggle("fast", function () {
            // Animation complete.
        });
    });
});

$(function () {
    var split = window.location.pathname.split('/');
    var mnurl = split[split.length - 1];
    mnurl = 'Ceramic-Tile-And-Grout-Tips.php';
    $(' a[href="' + mnurl + '"]').addClass("_current_highlight_button");
});

$(function () {
    var selected;
    $('.vmenu li a').click(function (e) {
        $('.vmenu ul').not($(this).parent().next('ul')).css('display', 'none');
    });
    $('a').each(function () {
        if ($(this).prop('href') == window.location.href) {
            $(this).addClass('_current_highlight_button');
            selected = $(this).parent().parent();
        }
    });
    $('.vmenu ul').not(selected).css('display', 'none');
});