Facebookの投稿
ウェブ制作技術 SNS・ブログ
おすすめウェブサイト
ウェブ制作のご注文は全国対応

北海道 青森 岩手 秋田 宮城 山形 福島 東京 神奈川 埼玉県 千葉 茨城 群馬 栃木 愛知 静岡 三重 岐阜 新潟 長野 山梨 石川 富山 福井 大阪 京都 奈良 兵庫 滋賀 和歌山 岡山 広島 鳥取 山口 島根 愛媛 徳島 高知 香川 福岡 佐賀 長崎 大分 熊本 宮崎 鹿児島 沖縄

マウスオーバーで吹き出しが出るレスポンシブグローバルメニュー jQuery「animenu.js」

09.06.17 20:10 | コメント(0)

吹き出しが出るグローバルメニューJavaScript

レスポンシブサイトが多くなって来ましたが、グローバルメニューは色々な方法があります。
レスポンシブサイトで対応する場合、グローバルメニューはレスポンシブ用にグローバルメニューを表示します。 マウスオーバーで吹き出しが出るレスポンシブグローバルメニュー「animenu」jQueryがあります。
今回はPC用グローバルメニューでマウスオーバーした際に吹き出して階層ページのメニューを表示し、尚且つレスポンシブに対応している「animenu」jQueryの作成方法をご紹介したいと思います。

サンプルページ

レスポンシブなグローバルメニュー jQuery サンプルページはこちら

 1. 「jQuery」プラグインをダウンロード
 2. ヘッダーの記載
 3. 「html」「css」「JavaScript」ファイルの作成

「jQuery」プラグインをダウンロード

▼animenu.jsファイル
animenu.jsダウンロード

ヘッダーの記載

まず最初に「animenu.js」ファイルを読み込む「JavaScript」ファイルへの読み込みコードをヘッダーへ記載しましょう。
※レスポンシブが動かなかった場合、フッターに記載してみてください。

【ヘッダーに記述】
<head>
<meta charset="UTF-8">
<title>マウスオーバーで吹き出しが出るレスポンシブグローバルメニュー jQuery「animenu.js」|使えるjQueryとJavaScript|WEBデザイナー 【キングサイト】</title>
<meta name="description" content="マウスオーバーで吹き出しが出るレスポンシブグローバルメニュー「animenu」のご紹介を致します。">
<meta name="keywords" content="マウスオーバー,吹き出し,レスポンシブ,グローバルメニュー,animenu.js,スライド">
<meta name="robots" content="all">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="/sample/015/base.css" media="all" />
<script type="text/javascript" src="/sample/015/animenu.js"></script>
</head>

「html」「css」「JavaScript」ファイルの作成

次に「グローバルメニュー」用のソースコードを作成します。

【htmlファイルに記述】
<nav class="animenu"> 
  <button class="animenu__toggle">
    <span class="animenu__toggle__bar"></span>
    <span class="animenu__toggle__bar"></span>
    <span class="animenu__toggle__bar"></span>
  </button>
  <ul class="animenu__nav">
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">Archive</a>
      <ul class="animenu__nav__child">
        <li><a href="">Sub Item 1</a></li>
        <li><a href="">Sub Item 2</a></li>
        <li><a href="">Sub Item 3</a></li>
      </ul>
    </li>     
    <li>
      <a href="#">Categories</a>
      <ul class="animenu__nav__child">
        <li><a href="">Sub Item 1</a></li>
        <li><a href="">Sub Item 2</a></li>
        <li><a href="">Sub Item 3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>                 
  </ul>
</nav>

【cssファイルに記述】
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.animenu__toggle {
  display: none;
  cursor: pointer;
  background-color: #111111;
  border: 0;
  padding: 10px;
  height: 40px;
  width: 40px;
}
.animenu__toggle:hover {
  background-color: #0186ba;
}

.animenu__toggle__bar {
  display: block;
  width: 20px;
  height: 2px;
  background-color: #fff;
  -webkit-transition: 0.15s cubic-bezier(0.75, -0.55, 0.25, 1.55);
  transition: 0.15s cubic-bezier(0.75, -0.55, 0.25, 1.55);
}
.animenu__toggle__bar + .animenu__toggle__bar {
  margin-top: 4px;
}

.animenu__toggle--active .animenu__toggle__bar {
  margin: 0;
  position: absolute;
}
.animenu__toggle--active .animenu__toggle__bar:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.animenu__toggle--active .animenu__toggle__bar:nth-child(2) {
  opacity: 0;
}
.animenu__toggle--active .animenu__toggle__bar:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.animenu {
  display: block;
}
.animenu ul {
  padding: 0;
  list-style: none;
  font: 0px 'Open Sans', Arial, Helvetica;
}
.animenu li, .animenu a {
  display: inline-block;
  font-size: 15px;
}
.animenu a {
  color: #aaaaaa;
  text-decoration: none;
}

.animenu__nav {
  background-color: #111111;
}
.animenu__nav > li {
  position: relative;
  border-right: 1px solid #444444;
}
.animenu__nav > li > a {
  padding: 10px 30px;
  text-transform: uppercase;
}
.animenu__nav > li > a:first-child:nth-last-child(2):before {
  content: "";
  position: absolute;
  border: 4px solid transparent;
  border-bottom: 0;
  border-top-color: currentColor;
  top: 50%;
  margin-top: -2px;
  right: 10px;
}
.animenu__nav > li:hover > ul {
  opacity: 1;
  visibility: visible;
  margin: 0;
}
.animenu__nav > li:hover > a {
  color: #fff;
}

.animenu__nav__child {
  min-width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  margin: 20px 0 0 0;
  background-color: #373737;
  -webkit-transition: margin .15s, opacity .15s;
  transition: margin .15s, opacity .15s;
}
.animenu__nav__child > li {
  width: 100%;
  border-bottom: 1px solid #515151;
}
.animenu__nav__child > li:first-child > a:after {
  content: '';
  position: absolute;
  height: 0;
  width: 0;
  left: 1em;
  top: -6px;
  border: 6px solid transparent;
  border-top: 0;
  border-bottom-color: inherit;
}
.animenu__nav__child > li:last-child {
  border: 0;
}
.animenu__nav__child a {
  padding: 10px;
  width: 100%;
  border-color: #373737;
}
.animenu__nav__child a:hover {
  background-color: #0186ba;
  border-color: #0186ba;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .animenu__toggle {
    display: inline-block;
  }

  .animenu__nav,
  .animenu__nav__child {
    display: none;
  }

  .animenu__nav {
    margin: 10px 0;
  }
  .animenu__nav > li {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid #515151;
  }
  .animenu__nav > li:last-child {
    border: 0;
  }
  .animenu__nav > li:first-child > a:after {
    content: '';
    position: absolute;
    height: 0;
    width: 0;
    left: 1em;
    top: -6px;
    border: 6px solid transparent;
    border-top: 0;
    border-bottom-color: inherit;
  }
  .animenu__nav > li > a {
    width: 100%;
    padding: 10px;
    border-color: #111111;
    position: relative;
  }
  .animenu__nav a:hover {
    background-color: #0186ba;
    border-color: #0186ba;
    color: #fff;
  }

  .animenu__nav__child {
    position: static;
    background-color: #373737;
    margin: 0;
    -webkit-transition: none;
    transition: none;
    visibility: visible;
    opacity: 1;
  }
  .animenu__nav__child > li:first-child > a:after {
    content: none;
  }
  .animenu__nav__child a {
    padding-left: 20px;
    width: 100%;
  }
}
.animenu__nav--open {
  display: block !important;
}
.animenu__nav--open .animenu__nav__child {
  display: block;
}

【JavaScriptファイルに記述】
(function(){
  var animenuToggle = document.querySelector('.animenu__toggle'),
      animenuNav    = document.querySelector('.animenu__nav'),
      hasClass = function( elem, className ) {
        return new RegExp( ' ' + className + ' ' ).test( ' ' + elem.className + ' ' );
      },
      toggleClass = function( elem, className ) {
        var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ' ) + ' ';
        if( hasClass(elem, className ) ) {
          while( newClass.indexOf( ' ' + className + ' ' ) >= 0 ) {
            newClass = newClass.replace( ' ' + className + ' ' , ' ' );
          }
          elem.className = newClass.replace( /^\s+|\s+$/g, '' );
        } else {
          elem.className += ' ' + className;
        }
      },           
      animenuToggleNav =  function (){        
        toggleClass(animenuToggle, "animenu__toggle--active");
        toggleClass(animenuNav, "animenu__nav--open");        
      }

  if (!animenuToggle.addEventListener) {
      animenuToggle.attachEvent("onclick", animenuToggleNav);
  }
  else {
      animenuToggle.addEventListener('click', animenuToggleNav);
  }
})()

以上でグリットデザインでブラウザに合わせて整列させてくれる jQuery 「Masonry」を設置する方法になります。
カテゴリ:WEB屋になる為の知識と技術, 使えるjQueryとJavaScript
  • このエントリーをはてなブックマークに追加
  • Facebookでコメントする

    コメントする

    おすすめの記事

    PAGE TOP