YouTube

コピペのみCSS 横スクロールできるナビゲーションメニュー

横スクロールできるけどバーなし

<div class="nav">
  <div class="scroll-container">
    <ul>
      <li>
        <select name="test">
          <option value="" hidden>選択してください</option>
          <option value="test1">テスト1</option>
          <option value="test2">テスト2</option>
          <option value="test3">テスト3</option>
        </select>
      </li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">SEO</a></li>
      <li><a href="#">WEBWORKS</a></li>
      <li><a href="#">セキュリティ</a></li>
      <li><a href="#">WORDPRESS</a></li>
      <li><a href="#">FREELANCE</a></li>
      <li><a href="#">その他</a></li>
    </ul>
  </div>
</div>

<style>
.nav {
  background-color: transparent; /* 背景を透明に */
  overflow-x: auto; /* 横スクロールを有効に */
  overflow-y: hidden; /* 縦スクロールを無効に */
  -webkit-overflow-scrolling: touch; /* 慣性スクロールを有効に */
  scrollbar-width: none; /* Firefoxでスクロールバーを非表示に */
}
.nav::-webkit-scrollbar {
  display: none; /* Webkitベースのブラウザでスクロールバーを非表示に */
}
.scroll-container {
  display: flex;
}
.nav ul {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none; /* リストのスタイルをリセット */
}
.nav ul li {
  margin: 0 5px; /* ボックス間にマージンを追加 */
}
.nav ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap; /* テキストを折り返さない */
  padding: 10px 25px;
  height: 50px;
  font-size: 15px;
  color: #000; /* テキストカラーを黒に */
  text-decoration: none;
  border: 1px solid #ccc; /* ボックスにボーダーを追加 */
  border-radius: 5px; /* ボックスの角を丸くする */
  background-color: #fff; /* ボックスの背景色を白に */
}
.nav ul li a:hover {
  background-color: #cc0000;
  color: #fff; /* ホバー時のテキストカラーを白に */
}
</style>

横スクロールとバーあり

<div class="cat_sch ta">
  <div class="scroll-container">
    <ul>
      <li>
        <select name="test" class="custom-select">
          <option value="" hidden>話せる言語</option>
          <option value="test1">テスト1</option>
          <option value="test2">テスト2</option>
          <option value="test3">テスト3</option>
        </select>
      </li>
          <li>
        <select name="test" class="custom-select">
          <option value="" hidden>出身</option>
          <option value="test1">テスト1</option>
          <option value="test2">テスト2</option>
          <option value="test3">テスト3</option>
        </select>
      </li>
      <li><a href="#">SEO</a></li>
      <li><a href="#">WEBWORKS</a></li>
      <li><a href="#">セキュリティ</a></li>
      <li><a href="#">WORDPRESS</a></li>
      <li><a href="#">FREELANCE</a></li>
      <li><a href="#">その他</a></li>
    </ul>
  </div>
</div>

<style>
.custom-select {
  border: 1px solid rgba(66, 66, 66, 0.3);
  font-size: 13px;
  padding: 7px 30px 7px 12px;
}
.cat_sch {
  background-color: transparent; /* 背景を透明に */
  overflow-x: auto; /* 横スクロールを有効に */
  overflow-y: hidden; /* 縦スクロールを無効に */
  -webkit-overflow-scrolling: touch; /* 慣性スクロールを有効に */
}
.cat_sch::-webkit-scrollbar {
  display: none; /* Webkitベースのブラウザでスクロールバーを非表示に */
}
.scroll-container {
  display: flex;
}
.cat_sch ul {
  display: flex;
  width: max-content;
  margin: 0px 0px 10px 0px;
  padding: 0;
  list-style: none; /* リストのスタイルをリセット */
}
.entry-content .cat_sch ul li {  font-size: 13px;
  margin: 0px; /* ボックス間にマージンを追加 */
}
.entry-content .cat_sch ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap; /* テキストを折り返さない */
  padding: 2px 15px;

  font-size: 13px;
  color: #000; /* テキストカラーを黒に */
  text-decoration: none;
  border: 1px solid #ccc; /* ボックスにボーダーを追加 */
  border-radius: 5px; /* ボックスの角を丸くする */
  background-color: #fff; /* ボックスの背景色を白に */
}
.entry-content .cat_sch ul li a:hover {
  background-color: #009988;
  color: #fff; /* ホバー時のテキストカラーを白に */
}
.custom-select:hover {
  background-color: #009988;  color: #fff;
}
</style>

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

error: Content is protected !!
ACFフィールド "place_id" の登録件数: 16