ハンバーガーメニューのリンクを<nuxt-link>でコーディングするとレイアウト崩れが発生する
Closed this issue · 1 comments
igz0 commented
【現象】
■正常な表示
■ レイアウトが崩れるページ
【対応】
aタグでコーディングすれば問題が起こらないので、
下記例の暫定対策とする。
【再現手順】
-
トップページを開く
http://localhost:3000/ -
ハンバーガーメニューを開く
【例】
■問題が起こらないコード
components/TransparentHeader.vue
<nav>
<ul>
<li>
<nuxt-link to="/" class="logo">トップページ</nuxt-link>
<div class="horizon-wrapper">
<hr />
</div>
</li>
<li>
<a href="/media/about">NURSE LINEについて</a>
<div class="horizon-wrapper">
<hr />
</div>
</li>
<li>
<a href="/category/event-report">イベントレポート</a>
<div class="horizon-wrapper">
<hr />
</div>
</li>
<li>
<a href="/category/interview">インタビュー</a>
<div class="horizon-wrapper">
<hr />
</div>
</li>
<li>
<a href="/category/column">コラム</a>
<div class="horizon-wrapper">
<hr />
</div>
</li>
<li>
<a href="/media/join-us">運営スタッフ募集</a>
<div class="horizon-wrapper">
<hr />
</div>
</li>
<li>
<a href="/media/contact">お問い合わせ</a>
<div class="horizon-wrapper">
<hr />
</div>
</li>
</ul>
</nav>■問題が起こるコード:
<nav>
<ul>
<li>
<nuxt-link to="/" class="logo">トップページ</nuxt-link>
<div class="horizon-wrapper">
<hr />
</div>
</li>
<li>
<nuxt-link to="/media/about">NURSE LINEについて</nuxt-link>
<div class="horizon-wrapper">
<hr />
</div>
</li>
<li>
<nuxt-link to="/category/event-report">イベントレポート</nuxt-link>
<div class="horizon-wrapper">
<hr />
</div>
</li>
<li>
<nuxt-link to="/category/interview">インタビュー</nuxt-link>
<div class="horizon-wrapper">
<hr />
</div>
</li>
<li>
<nuxt-link to="/category/column">コラム</nuxt-link>
<div class="horizon-wrapper">
<hr />
</div>
</li>
<li>
<nuxt-link to="/media/join-us">運営スタッフ募集</nuxt-link>
<div class="horizon-wrapper">
<hr />
</div>
</li>
<li>
<nuxt-link to="/media/contact">お問い合わせ</nuxt-link>
<div class="horizon-wrapper">
<hr />
</div>
</li>
</ul>
</nav>