Learning site for website creation

T06:ナビゲーション作成

公開日:2021年11月14日 更新日:2021年11月14日

ナビゲーション作成

tmp_common.html

<div class="Content">
  <nav class="NavPC">
    <ul class="NavPC_list">
      <li class="NavPC_item">
        <a href="index.html" class="NavPC_link">ホーム</a>
      </li>
      <li class="NavPC_item">
        <a href="index.html" class="NavPC_link">はじめての方へ</a>
      </li>
      <li class="NavPC_item">
        <a href="index.html" class="NavPC_link">業務内容</a>
      </li>
      <li class="NavPC_item">
        <a href="index.html" class="NavPC_link">料金</a>
      </li>
      <li class="NavPC_item">
        <a href="index.html" class="NavPC_link">弁護士紹介</a>
      </li>
      <li class="NavPC_item">
        <a href="index.html" class="NavPC_link">アクセス</a>
      </li>
    </ul>
  </nav>

  <main class="Main">
          :
  </main>
</div>

ナビゲーションデザインを定義

css/style.css

/* 基本デザイン */
@import url(_common.css);

/* 共通デザイン */
@import url(_format.css);
@import url(_btn.css);

/* パーツデザイン */
@import url(_Box.css);
@import url(_Footer.css);
@import url(_HeaderPC.css);
@import url(_Logo.css);
@import url(_NavPC.css);
@import url(_Tel.css);

css/_NavPC.css

/* NavPC */
.NavPC {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  background-color:
    rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  padding: 0.8em;
}

.NavPC_list {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1200px;
}

.NavPC_item {
  border-left: solid 1px #aaa;
  width: 100%;
}

.NavPC_item:last-child {
  border-right: solid 1px #aaa;
}

.NavPC_link {
  display: block;
  color: #333;
  text-align: center;
  padding: 0.8em;
  transition: background-color 0.5s;
}

.NavPC_link:hover {
  color: #fff;
  background-color: #3f51b5;
}

完成図

テンプレートコーディング