• ＜
• Home
• Business
• Company
• Contact
• ＞

サンプルコード

HTML

<ul class="menu">
    <li class="arrow" id="prev">＜</li>
    <li class="active" id="home"><a href="#">Home</a></li>
    <li class="hidden" id="business"><a href="#">Business</a></li>
    <li class="hidden" id="company"><a href="#">Company</a></li>
    <li class="hidden" id="contact"><a href="#">Contact</a></li>
    <li class="arrow" id="next">＞</li>
</ul>

CSS

.menu {
    display: flex;
    list-style: none;
    padding: 20px;
    background-color: #fff;
    align-items: center;
    justify-content: center;
    margin: 0;
    position: relative;
}
.menu li {
    padding: 10px 20px;
    margin: 0 5px;
    width: 25%;
    text-align: center;
    transition: all 1.5s ease;
    opacity: 1;
    transform: translateX(0);
    font-size: 0.9rem;
}
.menu li.hidden {
    opacity: 0;
    transform: translateX(-20px);
    position: absolute;
}
.menu li a {
    text-decoration: none;
    color: #333;
}
.arrow {
    cursor: pointer;
    user-select: none;
}
.hidden {
    display: none;
}
.active {
    background-color: #ddd;
    border-radius: 5px;
}

JavaScript

const menuItems = ['home', 'business', 'company', 'contact'];
let currentIndex = 0;

document.getElementById('prev').addEventListener('click', () => {
    document.getElementById(menuItems[currentIndex]).classList.remove('active');
    document.getElementById(menuItems[currentIndex]).classList.add('hidden');
            
    currentIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;
            
    document.getElementById(menuItems[currentIndex]).classList.remove('hidden');
    document.getElementById(menuItems[currentIndex]).classList.add('active');
});

document.getElementById('next').addEventListener('click', () => {
    document.getElementById(menuItems[currentIndex]).classList.remove('active');
    document.getElementById(menuItems[currentIndex]).classList.add('hidden');
            
    currentIndex = (currentIndex + 1) % menuItems.length;
            
    document.getElementById(menuItems[currentIndex]).classList.remove('hidden');
    document.getElementById(menuItems[currentIndex]).classList.add('active');
});