T06:ナビゲーション作成
公開日: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;
}
完成図
テンプレートコーディング
同じタグのコンテンツ
同じカテゴリーのコンテンツ