JavaScript + Ajax 実践サンプル集 - Appleスタイルのスライド型メニュー

Appleスタイルのスライド型メニュー　《プログラマーがネットで副収入を得る方法とは》

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQuery 1.4のanimate()メソッドを利用してアイコンがスライドするメニューを表示します。マウスをメニューに移動するとアイコンがメニューからスライドします。メニューからマウスを外すとアイコンが消えます。

マウスを移動したときにアイコンを表示するには、li要素にjQueryのhover()イベントを登録します。マウスを移動したときアイコンを表示するには、span要素のtopプロパティを「40px」にします。アイコンを隠すには、span要素のtopプロパティを「-17px」にします。

$('#menu > li').hover(
  function() { // over
    var $this = $(this);
    $('a', $this).addClass('hover');
    $('span', $this).stop().animate({ 'top': '40px' }, 300).css({ 'zIndex': '10' });
  },
  function() { // out
    var $this = $(this);
    $('a', $this).removeClass('hover');
    $('span', $this).stop().animate({ 'top': '-17px' }, 800).css({ 'zIndex': '-1' });
  }
);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Apple-Style Icon Slide Navigation</title>
  <link href="jQuery/appleStyleMenu/css/style.css" rel="stylesheet" type="text/css" />
  <link href="jQuery/appleStyleMenu/css/base.css" rel="stylesheet" type="text/css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function() {
      $('#menu > li').hover(
        function() {
          var $this = $(this);
          $('a', $this).addClass('hover');
          $('span', $this).stop().animate({ 'top': '40px' }, 300).css({ 'zIndex': '10' });
        },
        function() {
          var $this = $(this);
          $('a', $this).removeClass('hover');
          $('span', $this).stop().animate({ 'top': '-17px' }, 800).css({ 'zIndex': '-1' });
        }
      );
    });
  </script>

</head>
<body>
  <div class="navigation">
    <ul class="menu" id="menu">
      <li><span class="apple"></span><a href="#" class="first">Apple</a></li>
      <li><span class="calendar"></span><a href="#">Calendar</a></li>
      <li><span class="picture"></span><a href="#">Picture</a></li>
      <li><span class="globe"></span><a href="#">Globe</a></li>
      <li><span class="mobile"></span><a href="#">Moble</a></li>
      <li><span class="save"></span><a href="#">Save</a></li>
      <li><span class="shutdown"></span><a href="#" class="last">shutdown</a></li>
    </ul>
  </div>
  <a class="dry" href="http://www.dryicons.com">Icons by DryIcons</a>
</body>
</html>

CSS部HEAD部BODY部

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
style:css
.navigation
{
  position: relative;
  margin: 0 auto;
  width: 915px;
}
ul.menu
{
  list-style: none;
  font-family: "Verdana" ,sans-serif;
  border-top: 1px solid #bebebe;
  margin: 0px;
  padding: 0px;
  float: left;
}
ul.menu li
{
  float: left;
}
ul.menu li a
{
  text-decoration: none;
  background: #7E7E7E url(../images/bgMenu.png) repeat-x top left;
  padding: 15px 0px;
  width: 128px;
  color: #333333;
  float: left;
  text-shadow: 0 1px 1px #fff;
  text-align: center;
  border-right: 1px solid #a1a1a1;
  border-left: 1px solid #e8e8e8;
  font-weight: bold;
  font-size: 13px;
  -moz-box-shadow: 0 1px 3px #555;
  -webkit-box-shadow: 0 1px 3px #555;
}
ul.menu li a.hover
{
  background-image: none;
  color: #fff;
  text-shadow: 0 -1px 1px #000;
}
ul.menu li a.first
{
  -moz-border-radius: 0px 0px 0px 10px;
  -webkit-border-bottom-left-radius: 10px;
  border-left: none;
}
ul.menu li a.last
{
  -moz-border-radius: 0px 0px 10px 0px;
  -webkit-border-bottom-right-radius: 10px;
}
ul.menu li span
{
  width: 64px;
  height: 64px;
  background-repeat: no-repeat;
  background-color: transparent;
  position: absolute;
  z-index: -1;
  top: 80px;
  cursor: pointer;
}
ul.menu li span.apple
{
  background-image: url(../icons/apple.png);
  top: -17px;
  left: 33px; /*128/2 - 32(half of icon) +1 of border*/
}
ul.menu li span.calendar
{
  background-image: url(../icons/calendar.png);
  top: -17px;
  left: 163px; /* plus 128 + 2px of border*/
}
ul.menu li span.picture
{
  background-image: url(../icons/picture.png);
  top: -17px;
  left: 293px;  /* plus 130 */
}
ul.menu li span.globe
{
  background-image: url(../icons/globe.png);
  top: -17px;
  left: 423px;  /* plus 130 */
}
ul.menu li span.mobile
{
  background-image: url(../icons/mobile_phone.png);
  top: -17px;
  left: 553px;  /* plus 130 */
}
ul.menu li span.save
{
  background-image: url(../icons/save.png);
  top: -17px;
  left: 683px;  /* plus 130 */
}
ul.menu li span.shutdown
{
  background-image: url(../icons/shut_down.png);
  top: -17px;
  left: 813px;  /* plus 130 */
}

base.css

body
{
  margin: 0px;
  padding: 0px;
  background-color: #f0f0f0;
  font-family: Arial;
}
.title
{
  position: absolute;
  top: 100px;
  left: 50%;
  margin-left: -204px;
  width: 409px;
  height: 348px;
}
.info
{
  position: fixed;
  bottom: 0px;
  left: 0px;
}
.back
{
  display: block;
  width: 281px;
  height: 143px;
}
a.dry
{
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: #000;
  font-weight: bold;
  font-size: 16px;
}

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
<link href="jQuery/appleStyleMenu/css/style.css" rel="stylesheet" type="text/css" />
<link href="jQuery/appleStyleMenu/css/base.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function() {
    $('#menu > li').hover(
      function() {
        var $this = $(this);
        $('a', $this).addClass('hover');
        $('span', $this).stop().animate({ 'top': '40px' }, 300).css({ 'zIndex': '10' });
      },
      function() {
        var $this = $(this);
        $('a', $this).removeClass('hover');
        $('span', $this).stop().animate({ 'top': '-17px' }, 800).css({ 'zIndex': '-1' });
      }
    );
  });
</script>

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
<div class="navigation">
  <ul class="menu" id="menu">
    <li><span class="apple"></span><a href="#" class="first">Apple</a></li>
    <li><span class="calendar"></span><a href="#">Calendar</a></li>
    <li><span class="picture"></span><a href="#">Picture</a></li>
    <li><span class="globe"></span><a href="#">Globe</a></li>
    <li><span class="mobile"></span><a href="#">Moble</a></li>
    <li><span class="save"></span><a href="#">Save</a></li>
    <li><span class="shutdown"></span><a href="#" class="last">shutdown</a></li>
  </ul>
</div>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

Appleスタイルのスライド型メニュー　《プログラマーがネットで副収入を得る方法とは》

JavaScript + Ajax 実践サンプル集 (1276本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

Appleスタイルのスライド型メニュー 《プログラマーがネットで副収入を得る方法とは》

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

Appleスタイルのスライド型メニュー　《プログラマーがネットで副収入を得る方法とは》