Tab Menu / 27 ブラケット

デザイン見本

Code
Issues
Pull Requests

src/main.js

console.log("Hello World");

Open Issues:

#42 - Fix memory leak in production

Active PRs:

#101 - Add new feature

選択したタブを括弧（ブラケット）で挟むデザインです。シンプルながらもコードっぽさやメカニカルな印象を与え、エンジニア向けのサイトや技術ブログにマッチします。アニメーションで括弧が出現する動きが特徴です。

実装コード

HTML

<div class="tab-container">
  <ul>
    <li class="selected" data-id="tab-1">Code</li>
    <li data-id="tab-2">Issues</li>
    <li data-id="tab-3">Pull Requests</li>
  </ul>
  <div class="tab-content selected" id="tab-1">
    Code Content
  </div>
  <div class="tab-content" id="tab-2">
    Issues Content
  </div>
  <div class="tab-content" id="tab-3">
    PRs Content
  </div>
</div>

CSS

.tab-container ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  border-bottom: 1px solid #ddd;
  justify-content: center;
}

.tab-container ul li {
  padding: 12px 24px;
  text-align: center;
  cursor: pointer;
  color: #777;
  transition: all 0.3s ease;
  position: relative;
  font-weight: 500;
  display: inline-block;
  flex: 1;
}

@media (max-width: 767px) {
  .tab-container ul li {
    padding: 12px 10px;
  }
}

.tab-container ul li::before,
.tab-container ul li::after {
  display: inline-block;
  opacity: 0;
  transition: all 0.3s ease;
  transform: translateX(0);
  font-weight: 700;
  color: #333;
}

.tab-container ul li::before {
  content: '[';
  margin-right: 4px;
  transform: translateX(10px);
}

.tab-container ul li::after {
  content: ']';
  margin-left: 4px;
  transform: translateX(-10px);
}

.tab-container ul li:not(.selected):hover {
  color: #333;
}

.tab-container ul li.selected {
  color: #333;
}

.tab-container ul li.selected::before {
  opacity: 1;
  transform: translateX(0);
}

.tab-container ul li.selected::after {
  opacity: 1;
  transform: translateX(0);
}

.tab-container .tab-content {
  display: none;
  padding: 30px;
  min-height: 150px;
}

.tab-container .tab-content.selected {
  display: block;
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

const tabContainer = document.querySelector('.tab-container');
const tabMenuItems = tabContainer.querySelectorAll('ul li');
const tabContents = tabContainer.querySelectorAll('.tab-content');

tabMenuItems.forEach(tabMenuItem => {
  tabMenuItem.addEventListener('click', () => {
    tabMenuItems.forEach(item => {
      item.classList.remove('selected');
    });
    tabMenuItem.classList.add('selected');

    tabContents.forEach(tabContent => {
      tabContent.classList.remove('selected');
    });
    document.getElementById(tabMenuItem.dataset.id).classList.add('selected');
  });
});