マウスホバーメニュー

2021・04・27

＊リセットCSSを読み込ませた上でお試しください＊
マウスホバーで現れるメニューのサンプルです。マウスカーソルを項目の上に持ってくるとメニューが左からスライドしながら表示されます。
PC専用です。レスポンシブには対応していないので、ご了承ください！

HOME

ホームへ

PRODUCTS

ABOUT

CONTACT

上記のサンプルコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。（※スクロールできます）

HTML・CSS

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
    .hovmenubox {
      min-width: 1050px;
      font-family: "游ゴシック体 Medium","游ゴシック体","游ゴシック Medium","Yu Gothic","YuGothic",sans-serif;
      font-size: 14px;
      line-height: 1.8;
      letter-spacing: 3.5px;
      margin-top: 30px;
      height: 300px;
      background-color: rgba(228, 228, 228, 0.5);
    }

    .hovmenubox a {
      color: rgb(1, 20, 7);
    }

    .hovmenubox menu {
      display: flex;
      justify-content: center;
    }

    .mainmenu {
      width: 240px;

    }

    .mainmenu>li {
      list-style: none;
      border-right: solid thin rgb(64, 124, 91);
      text-align: center;
    }

    #menubutton1 {
      border-left: solid thin rgb(64, 124, 91);
    }

    .mainmenu p {
      background-color: rgba(126, 231, 174, 0.59);
      padding: 5px 10px;
    }

    .submenu {
      position: absolute;
      list-style: none;
      text-align:left;
      background-color: rgba(179, 179, 179, 0.4);
      opacity: 0;
      visibility: hidden;
    }

    .submenu li {
      padding-left: 15px;
      border-bottom: solid thin white;
    }

    .submenu li a {
      display: inline-block;
      width: 225px;
    }

    .mainmenu:hover .submenu {
      opacity: 1;
      visibility: visible;
      transition: all 1s;
      animation: fromleft .3s linear 0s 1 normal forwards;
    }
    @keyframes fromleft {
      0% {transform: translate(-100px,0px);}
      100% {transform: translate(0px,0px);}
    }

    .submenu li:hover {
      background-color: rgba(3, 89, 42, 0.59);
    }

    .sublist a:hover {
      color: white !important;
    }
    </style>
  </head>
  <body>
    <div class="hovmenubox">
      <menu>
        <ul class="mainmenu mainmenu1">
          <li id="menubutton1"><p>HOME</p></li>
          <ul class="submenu submenu1">
            <li class="sublist"><a href="#">ホームへ</a></li>
          </ul>
        </ul>
        <ul class="mainmenu">
          <li id="menubutton"><p>PRODUCTS</p></li>
          <ul class="submenu submenu2">
            <li class="sublist"><a href="#">製品の特徴</a></li>
            <li class="sublist"><a href="#">製品一覧</a></li>
          </ul>
        </ul>
        <ul class="mainmenu">
          <li><p>ABOUT</p></li>
          <ul class="submenu submenu3">
            <li class="sublist"><a href="#">会社概要</a></li>
            <li class="sublist"><a href="#">事業内容</a></li>
          </ul>
        </ul>
        <ul class="mainmenu">
          <li class="lastmenu"><p>CONTACT</p></li>
          <ul class="submenu submenu4">
            <li class="sublist"><a href="#">お問い合わせ</a></li>
            <li class="sublist"><a href="#">求人情報</a></li>
          </ul>
        </ul>
      </menu>
    </div>
  </body>
</html>

次の記事へ »