HTMLでのオーバーレイメニューの作成 – HTMLで始めるホームページ作成

HTMLでのオーバーレイメニューの作成

ホームページにオーバーレイメニューを追加することで、ユーザーエクスペリエンスを向上させることができます。次の記事では、シンプルで効果的なオーバーレイメニューの作成方法をご紹介します。

オーバーレイメニューとは

オーバーレイメニューとは、ユーザーがクリックすると画面全体を覆うように表示されるメニューのことです。このメニューは、ユーザーが素早くサイト内をナビゲートするのに役立ちます。

オーバーレイメニューのHTML構造

次に、オーバーレイメニューの基本的なHTML構造を見てみましょう。以下のコードは、シンプルなオーバーレイメニューの例です。

<div id="overlay-menu" class="overlay">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <div class="overlay-content">
        <a href="#" rel="nofollow" target="_blank" title="リンクのタイトル" aria-label="リンクのタイトル">ホーム</a>
        <a href="#" rel="nofollow" target="_blank" title="リンクのタイトル" aria-label="リンクのタイトル">サービス</a>
        <a href="#" rel="nofollow" target="_blank" title="リンクのタイトル" aria-label="リンクのタイトル">お問い合わせ</a>
    </div>
</div>
<span onclick="openNav()">メニューを開く</span>

CSSでのスタイリング

オーバーレイメニューが適切に表示されるように、CSSを使用してスタイリングする必要があります。以下は、基本的なCSSの例です。

<style>
.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.9);
    overflow-x: hidden;
    transition: 0.5s;
}
.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}
.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}
.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}
</style>

JavaScriptでの制御

さらに、JavaScriptを使用してオーバーレイメニューを開閉するためのスクリプトを作成します。以下のコードを参考にしてください。

<script>
function openNav() {
    document.getElementById("overlay-menu").style.width = "100%";
}
function closeNav() {
    document.getElementById("overlay-menu").style.width = "0%";
}
</script>

まとめ

以上で、HTML、CSS、およびJavaScriptを使用してオーバーレイメニューを作成する方法について説明しました。このメニューは、ユーザーが簡単にあなたのWebサイトをナビゲートするのに役立ちます。さらにこの技術を応用することで、より洗練されたインタラクティブなWebサイトを構築することが可能です。

参考文献

https://example.com(外部リンク)

コメントを残す