JSFiddle - React, Tailwind, and code Playground

by MAeSI

HTML

<ul id="menu">
    <li class="left"><a href="#zero">zero</a>

    </li>
    <li class="left"><a href="#one">one</a>

    </li>
    <li class="right"><a href="#two">two</a>

    </li>
    <li class="right"><a href="#three">three</a>

    </li>
    <li class="left"><a href="#four">four</a>

    </li>
    <li class="right"><a href="#five">five</a>

    </li>
</ul>
<div><a href="#one">ENTRA</a> (one)</div>

CSS

div {
    margin-top:150px;
    text-align:center;
}
#menu {
    position: fixed;
    top: 20px;
    right:0;
}
li {
    display: inline;
    padding: 12px;
    text-decoration: none;
}

JavaScript

$(document).ready(function () {
    $('ul#menu').css('display', 'none')
    $('a').click(function () {
        var ancora = $(this).attr('href');
        if (ancora == '#zero') $('ul#menu').css('display', 'none');
        else $('ul#menu').css('display', 'block');
    })
});