e-まがMenu :: http://e-maga.com ウェブデザイン実装チュートリアル Mon, 18 Jan 2010 05:57:18 +0000 http://wordpress.org/?v=2.9.2 ja hourly 1 マウスオーバーでメニューが回転するAnimated Navigation http://e-maga.com/javascript/animated-navigation/ http://e-maga.com/javascript/animated-navigation/#comments Sun, 13 Sep 2009 05:48:11 +0000 Daisuke http://e-maga.com/?p=666 マウスオーバーで下からニョキニョキと回転してくるメニュースクリプト。
かなり目を引くメニューに仕上がると思います。

使用するAjaxライブラリはjQuery。

ダウンロード

使用するのはjquery-1.3.2.min.jsのみ。
ダウンロードしてサーバーにアップしておいてください。
jQueryダウンロード

実装手順

<head>～</head>に以下を挿入。
ご自身のサイトURLに変更（2か所）することをお忘れなく。

使用した背景画像
（a-bg.gif）
100px × 80px

<script type="text/javascript" src="http://サイトURL/jquery-1.3.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
	$("#topnav li").prepend("<span></span>");
	$("#topnav li").each(function() {
		var linkText = $(this).find("a").html();
		$(this).find("span").show().html(linkText);
	});
	$("#topnav li").hover(function() {
		$(this).find("span").stop().animate({
			marginTop: "-40"
		}, 250);
	} , function() {
		$(this).find("span").stop().animate({
			marginTop: "0"
		}, 250);
	});
});
</script>

<style type="text/css">
ul#topnav {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font-size: 1.1em;
}
ul#topnav li{
	margin: 0;
	padding: 0;
	display: block;
	overflow: hidden;
	float: left;
	height:40px;
}
ul#topnav a, ul#topnav span {
	padding: 10px 20px;
	float: left;
	text-decoration: none;
	color: #fff;
	background: url(http://サイトURL/a_bg.gif) repeat-x; /* 背景画像を指定 */
	text-transform: uppercase;
	clear: both;
	height: 20px;
	line-height: 20px;
}
ul#topnav a{
	color: #555;
	background-position: left bottom;
}
ul#topnav span{
	background-position: left top;
}
</style>

使用場所に以下を記述。

<ul id="topnav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

割と簡単に実装出来ると思います。
では、がんばってください。

Script（Animated Navigation with CSS & jQuery – Torrance Web Design）

]]> http://e-maga.com/javascript/animated-navigation/feed/ 0 ゆるやかに色彩を変えていくエフェクトスクリプトBlend http://e-maga.com/javascript/blend/ http://e-maga.com/javascript/blend/#comments Fri, 14 Aug 2009 04:21:54 +0000 Daisuke http://e-maga.com/?p=598 マウスオーバーでファンタジックに画像が切り替わるjQueryプラグイン、Bland。
ゆったりと色彩を変化させる美しいリンクボタンを作成することができますので、高級感漂うウェブサイト作りに最適なスクリプトです。

「text-indent: -9999px;」というCSSによる画像置き換えを使用しており、デフォルトの他にも「点滅」と「逆再生」の２種類のエフェクトが用意されています。
スピードの調節も可能。

エフェクト：デフォルト / スピード：600

ダウンロード

jQuery Blend – Color Powered
Downloadの「v1.2」をクリックしてダウンロード。解凍してください。

Ajaxライブラリjquery-1.3.2.min.jsを別途用意する必要があります。
jQueryダウンロード
ダウンロード後、解凍したblendフォルダに入れてください。

実装手順

上に表示しているサンプルのソースです。
IE6でも問題なく表示されるように、CSS及びHTMLにul liを使用して魔法のプロパティ「display: inline;」を付け加えました。

用意したのは以下の画像。
137px×174pxの画像を4列2段に並べた1枚画像を、マウスオーバー時にbackground-positionで左や上にズラして表示します。

<head>～</head>に以下を挿入。

スピードの調整は赤字部分の数値を変更。
エフェクトは青字部分を「pulse:true」（点滅）もしくは「reverse:true」（逆再生）に書き換えることで変更が可能です。

<script type="text/javascript" src="http://サイトURL/blend/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://サイトURL/blend/jquery.blend.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#list a").blend({
speed: 600, //エフェクト速度
pulse: false //エフェクト選択
});
});
</script>

<style type="text/css">
.blend_menu {
	clear: both;
	margin: 0;
	padding: 0;
}
.blend_menu li {
	float: left;
	display: inline;
	margin-right: 4px;
}
.blend_menu li.end {
	margin-right: 0;
}
.blend_menu li a {
	display: block;
	text-indent: -9999px;
	width: 137px; /* 画像サイズ：縦 */
	height: 174px; /* 画像サイズ：横 */
	margin: 0;
	padding: 0;
	background: url(panel.jpg); /* 画像URL */
	background-repeat: no-repeat;
	cursor: pointer;
	overflow: hidden;
}

#list_spring{background-position:0 0;}
#list_spring:hover,#list_spring.hover{background-position:0 -174px;}

#list_summer{background-position:-137px 0;}
#list_summer:hover,#list_summer.hover{background-position:-137px -174px;}

#list_autumn{background-position:-274px 0;}
#list_autumn:hover,#list_autumn.hover{background-position:-274px -174px;}

#list_winter{background-position:-411px 0;}
#list_winter:hover,#list_winter.hover{background-position:-411px -174px;}
</style>

使用場所に以下を記述。

<div id="list">
<ul class="blend_menu">
	<li><a href="#" id="list_spring">Spring</a></li>
	<li><a href="#" id="list_summer">Summer</a></li>
	<li><a href="#" id="list_autumn">Autumn</a></li>
	<li class="end"><a href="#" id="list_winter">Winter</a></li>
</ul>
</div>

idやclassはお好きな名前に付け直して使用してください。
画像サイズの指定とbackground-positionの修正もお忘れなく。

では、がんばってください。

via（コリス）

]]> http://e-maga.com/javascript/blend/feed/ 0 縦も横もOKのアコーディオンメニューBySlideMenu http://e-maga.com/javascript/byslidemenu/ http://e-maga.com/javascript/byslidemenu/#comments Tue, 28 Jul 2009 15:02:43 +0000 Daisuke http://e-maga.com/?p=102 BySlideMenuは、サイドバーのメニューなんかにも活用可能な「縦型」のアコーディオンメニューを実装出来るスクリプト。

もちろんimage menuのような横開きのスタイルも用意されています。
動きのある縦型のメニューが欲しかった！そんな人に超オススメ。

このサンプルではBLOCK-01（1番上の画像）を最初からオープンさせるためにbyslidemenu.jsのoptions:でdefaultIndex: 1に設定してありますが、デフォルトではdefaultIndex: falseとなっていますので全てのブロックが等間隔で表示されます。
その他の指定も全てbyslidemenu.jsのoptions:で行います。
　
ちなみにimagemenuがCSSによる画像置き換え（text-indent: -9999px;ってやつ）を採用しているのに対し、このBySlideMenuは画像そのものを重ねて表示するスクリプトです。
お好みに応じて使い分けても良いと思います。

ダウンロード

BySlideMenu – ByScripts

Ajaxライブラリmootools-core.jsを別途用意する必要があります。
mootoolsダウンロード
※mootools-1.2.3-core-nc.jsはjsファイルではなくtxtファイルとして認識される場合があります。mootools-1.2.3-core-nc.js.txtになっていると動作しませんのでテキストエディタ等で一旦開き、「名前を付けて保存する」で.txt無しのファイル名にリネームしてください。

実装手順

mootools-core.jsとbyslidemenu.js、それと画像をサーバーにアップロード。
URLを間違えないように気を付けながら<head>～</head>に以下を記述。
※横型メニューの場合は赤字部分を削除

<script type="text/javascript" src="http://アップロードしたURL/mootools-core.js"></script>
<script type="text/javascript" src="http://アップロードしたURL/byslidemenu.js"></script>
<script type="text/javascript">
window.onload = function(){
new BySlideMenu('verticalmenu', {vertical: true});
}
</script>

BySlideMenuを表示させる場所に以下を記入。
※横型メニューの場合は赤字部分をbyslidemenuに変更

<ul id="verticalmenu">
 <li><a href="ページ1"><img src="画像1" /></a></li>
 <li><a href="ページ2"><img src="画像2" /></a></li>
 <li><a href="ページ3"><img src="画像3" /></a></li>
 <li><a href="ページ4"><img src="画像4" /></a></li>
 <li><a href="ページ5"><img src="画像5" /></a></li>
</ul>

BySlideMenuはバリエーションが豊富なのでいろいろと楽しめるのではないでしょうか。
では、がんばってください。

]]> http://e-maga.com/javascript/byslidemenu/feed/ 0 画像さくさくアコーディオンメニューimage menu http://e-maga.com/javascript/image-menu/ http://e-maga.com/javascript/image-menu/#comments Mon, 27 Jul 2009 15:22:54 +0000 Daisuke http://e-maga.com/?p=67 アコーディオンメニューの中で最も好きなスクリプトです。
ハイテク系の企業サイトなんかにはとても似合うかも知れません。

使用するAjaxライブラリはMooTools。
ダウンロードファイルにあらかじめ同梱されています。

サイズは総幅560px/高さ200px・5ブロックで作成、用意した画像は幅310px/高さ200px

ダウンロードと修正

image menu – phatfusion

ダウンロードした「imagemenu/imagemenu/imageMenu.css」を、使用環境に合わせて修正する必要があります。
修正するのは#imageMenuで指定されている総幅と高さ、#imageMenu ul li aで指定されている各ブロックの幅（（総幅－8px）÷ブロック数）と高さ、#imageMenu ul liの各クラス指定の画像URL。

デフォルトでは総幅500px/高さ200px・各ブロック幅98px/高さ200pxとなっています。その部分を、導入するウェブサイトの条件に合わせて修正します。
あとは#imageMenu ul li.クラス名を独自のものに変更（今回は#imageMenu ul li.m01～m05に設定）し、それぞれのbackgroundで指定されている画像URLを自身で用意した画像のURLに書き換え。

ulにmargin: 0; padding: 0;を指定する必要がありますので、今回はul.imgmenuというクラスを設定して下記のようにCSSファイルに追加記入しました。

ul.imgmenu {margin: 0; padding: 0;}

実装手順

修正を全て終え、用意した画像をimagemenu/imagemenu/imagesフォルダに入れたら、サーバーにimagemenuフォルダ全てをアップロード。

URLを間違えないように気を付けながら<head>～</head>に以下を記述。

<link rel="stylesheet" href="http://アップロードしたURL/imageMenu.css" type="text/css" />
<script type="text/javascript" src="http://アップロードしたURL/mootools.js"></script>
<script type="text/javascript" src="http://アップロードしたURL/imageMenu.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
	var myMenu = new ImageMenu($$('#imageMenu a'),{
	openWidth:310 //オープン時の画像幅
	});
});
</script>

image menuを表示させる場所に以下を記入。

<div id="imageMenu">
 <ul class="imgmenu">
  <li class="m01"><a href="ページ01のURL">ページ01</a></li>
  <li class="m02"><a href="ページ02のURL">ページ02</a></li>
  <li class="m03"><a href="ページ03のURL">ページ03</a></li>
  <li class="m04"><a href="ページ04のURL">ページ04</a></li>
  <li class="m05"><a href="ページ05のURL">ページ05</a></li>
 </ul>
</div>

以上です。
それでは、がんばってください。

ややこしいスクリプトなので説明するのがかなりめんどくさかった・・・。

]]> http://e-maga.com/javascript/image-menu/feed/ 5