| 管理 |
/
ホーム > スポンサー広告 > ハイテクサイト?wホーム > PC関連 > ハイテクサイト?w

--年--月--日 --曜日/--:--:--/ No.
スポンサーサイト

記事分類:スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
人気ブログランキングへ ブログランキング
FC2 Blog Ranking

1万円からのFX取引は、伊藤忠グループ・FXプライム
[ --/--/-- --:-- ] スポンサー広告 |
|

2010年08月05日 木曜日/00:16:52/ No.137
ハイテクサイト?w

記事分類:PC関連
T.O.P-RECORDSサイトのトップページを少々ハイテク仕様にしてみた(笑)。
回転メニュー
回転メニュー
こういう感じの画像が回転する式のメニュー。

機能性は普通のプルダウンメニューの方がいいと思うが、
まぁヴィジュアル面で人の印象に残るとか、単純にマウス動かして遊んで楽しいっていうだけという事を重視(笑)。

全てのページの上部にプルダウンメニューも設置しているので機能性はバッチリだろうと思う。
この回転メニューを設置したトップページは、
プルダウンメニューでメニューバーの下に現れるサブメニューが回転メニューの下に隠れてしまって困ったため、回転メニューの下の位置にプルダウンメニューを設置して対処した。

なかなか見かけだけは立派なサイトですな(笑)。
後は売上伸ばすだけ(笑)。


売り上げ伸ばすだけ・・


売り上げ伸ばすだけ・・・・・





ちなみに、
この回転メニューですが、
スタイルシートもジャバスクリプトもたいして詳しくもない素人の私がどうやってやったかというと・・・・

たまたま見つける事ができた
このページ
をかなり参考にさせていただきまして・・・(ありがたや~~(-人-))、
なんとかうまくできました。

このパーツの配信元は外国語だし回転のスピードとか角度とかが、
上のサイトの管理人さんの方が素晴らしいと思ったので、
そのサイトのソースを盗み見て(笑)、
CSS、jsファイルをそこから取ってきてそれを改造しました(笑)


さてさて、んで、

VIRTUAL GADJO
こちらのサイト様にて、
画面下部にある、

Te'le'charger mooVRotatingMenu.js (pour mootools 1.2)

というところをクリック。
意味不明のコードがダーーッとブラウザに表示されるので、
それをコピーしてメモ帳などテキストエディタに貼りつけて、
mooVRotatingMenu.js
と名前をつけて保存する。


さらに、
MooTools
こちらのサイト様より、

mootools-1.2.3-core-yc.js
など、バージョンは色々ありますが、それをダウンロード。

今はバージョンが1.2.4とかになってますが、
私がバージョン1.2.3の記述を使った理由は上記の通り(笑)、
このパーツを使っている他の人のソースから取ってきたからである(笑)。



あとは、CSSファイルを用意します。

仮に、
moovrotating.css
というファイル名でCSSファイルを作成。記述は、


#HorizMenu {
/* margin: 8px auto 20px auto;*/
position: relative;
width: 600px;
height: 398px;
background: #020202;
border: 1px solid #000;
}
#HorizMenu a {
text-decoration: none;
color:#fff;
font-weight:bold;
font-size:22px;
background-color: #000;
text-align: left;
border: 1px solid #A58E52;
overflow: hidden;
padding-left:5px;
}

/*#HorizMenu a span {
visibility: hidden;
}*/

.ccm01 {background: url("画像URL") left top no-repeat;}
.ccm02 {background: url("画像URL") left top no-repeat;}
.ccm03 {background: url("画像URL") left top no-repeat;}



こんな感じです。
メニューに使う画像のURLなど設定。
ccm01とかいうのは、
画像ごとに↓のhtmlの記述の中でclassを設定。
なので、今回は仮に「ccm01」「ccm02」という感じで設定したが、
別になんでもよい。



そして、とりあえず、

mooVRotatingMenu.js
mootools-1.2.3-core-yc.js
moovrotating.css

をサーバーにアップロード。


後は、
実際のサイトページの、

htmlの<head>~</head>に・・・

<!-- 回転メニュースタイル呼び出し -->
<link rel="stylesheet" href="http://~~/moovrotating.css" type="text/css" />
<script type="text/javascript" src="http://~~/mootools-1.2.3-core-yc.js"></script>
<script type="text/javascript" src="http://~~/mooVRotatingMenu.js"></script>

<script type="text/javascript">
window.addEvent('domready', function(){
//menu horizontal
var myHorizontalToto = new mooVRotatingMenu($('HorizMenu'), $$('.mooRotate'), {
maxWidth : 162,//画像の幅
maxHeight : 208,//画像の高さ
hPad : 1.4,//値を小さくすると、画像を表示する領域が広がるらしい。

opacity : 0.9,透明度(小さくすると透ける)
inertie : 100,回転スピード(小さくすると速くなる)
reset      : false//マウスがコンテンツ部分からでたら、画像を初期位置に戻すかどうからしいです。
trueで初期位置へ、falseでそのまんまらしいです。
});
});
</script>


を貼りつける。
「らしい」とかいってるのは、
私自身はスタイルシートの記述内容をロクにちゃんと理解してなくて、
この説明は例のサイトの完全受け売りだからです(笑)。
 それでも私なりに手こずった部分もあったので、
私も自分で覚書き程度に書いておこうかなという感じです。



htmlの<body>~</body>に・・・


<div id="HorizMenu">
<a href="リンクをはるページのURL" class="mooRotate ccm01"><span></span></a>
<a href="リンクをはるページのURL" class="mooRotate ccm02" ><span></span></a>
<a href="リンクをはるページのURL" class="mooRotate ccm03" ><span></span></a>
<!-- 画像追加可能 -->
</div>



<span></span>
の部分に、
<span>タイトル</span>

タイトルを入れると画像の上に文字を表示する事もできるみたいですが、
私は文字入りの画像を用意していたので、タイトルテキストは必要なかったので記入してません。

classは画像ごとに設定するみたいです。

CSSファイルの記述の中のclass(ccm01とか)とこれが一致すれば名前はなんでもいいです。
CSSで設定した画像がここに表示されます。



まぁこんな感じで、なんとか素人の私でも回転メニューを見事に設置できました。
なかなか見栄えがいいのと、訪問者が回転して遊べる感じ(笑)。
そんなのどうでもいいという場合は普通にプルダウンメニューからサクッと希望のページをすぐに飛べますし、
まぁトップページだけでもちょっと豪華にしたという感じで(笑)。
人気ブログランキングへ ブログランキング
FC2 Blog Ranking

1万円からのFX取引は、伊藤忠グループ・FXプライム
コメントの投稿













管理者にだけ表示を許可する

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。