Architect of Music Architect of Music モバイル版Architect of Music COUNTER

メインメニュー (サイトマップ)




−クリックすると概要を表示−

そういえば、ホームページ的側面とブログ的側面を持つサイトとしてリニューアルしたにも関わらず、メインメニューのボタンがないもんだから、大変不便だということを思い出して、ちょっとだけカッコイイメニューボタン(以下、CKMボタン)として復活しました。

中央のCKMボタンにカーソルを合わせていただくとわかると思いますが、ふにゅっとカーソルを合わせた場所のメニューが拡がります。ただそれだけといえばそれだけなのですが、幅を節約できるので、サイトデザイン的にはすごく有効な技だと思いました。

ちなみに、CKMボタン設置にあたって参考にさせていただいたサイトや、参考のためうちで採用しているソース等を、CMの後に掲載しておきます。

続きを読む "メインメニューボタンをカッコよく復活"

他にこんな記事もいかがでしょう




【CM】AmazonでKAN関連商品をチェック!




JavaScriptエフェクトで画像スライド式メニューを実装 (ImageMenu) - youmos【e】
はてなユーザーの評価 livedoorユーザーの評価 Buzzurlにブックマーク
JavaScriptエフェクトで画像スライド式メニューを実装 (ImageMenu) - youmos画像を利用したメニューを作成するときに参考になるサンプルが、phatfusion.netで紹介されているImage Menu。トランプを指でなぞるようなアニメーションを実装することが出来る。また、クリックですると選択状態を維持し、再度クリックで解除まで行う。

使用する画像の幅はすべて、同じサイズにしておく必要がある。画像イメージはスタイルシート中で背景画像(background:url)として指定する。また、imageMenu.js 以外にもmootools.js が必要になる。


imagemenu.jsがサンプルのサイトになかったので、上記エントリよりダウンロードさせていただきました。必要なmootools.jsもセットにしてくれているので、大変助かりました。
javascriptで伸縮するメニューができる : webデザイナーのナナメガキ【e】
はてなユーザーの評価 livedoorユーザーの評価 Buzzurlにブックマーク
javascriptで伸縮するメニューができる : webデザイナーのナナメガキauのトップページのような、伸縮してスライドするメニューをjavascript+cssで作れるみたいです。「Image Menu」というライブラリで、動かすにはmootools.jsが必要のよう。

で、上記エントリを参考にしつつ、画像を作成している余裕もないので、画像を用いない方法を採用することにしました。ただ、既存HTMLソースとの競合でうまく動かなかったので、iframeを使って別HTMLを表示しています(見た目にはわからないのであまり気にしないでください)。ソースは以下のような感じで。
CSS
#kwick {
position: relative;
width:470px;
background: #444422;
}

#kwick ul.kwicks {
display: block;
margin-left:7px;
height: 50px;
background: #444422;
list-style: none;
}

#kwick li{
float: left;
}

#kwick .kwick{
display: block;
overflow: hidden;
margin:0;
width: 70px;
height: 50px;
border-right: 2px solid #DDDDAA;
text-align:center;
font-size:85%;
line-height:50px;
}

#kwick .kwick a{
display:block;
width: 70px;
height: 50px;
color: #ffffdd;
text-decoration: none;
font-weight: bold;
}

#kwick a,
#kwick a:link,
#kwick a:visited {
color: #ffffdd;
text-decoration: none;
font-weight: bold;
}

#kwick a:hover{
color: #000000;
background-color : #EEEEEE;
text-decoration: underline;
}

#kwick .opt1 {
background: #444422;
}

#kwick .opt2 {
background: #444422;
}

#kwick .opt3 {
background: #444422;
}

#kwick .opt4 {
background: #444422;
}

#kwick .opt5 {
background: #444422;
}

#kwick .opt6 {
background: #444422;
border-right: 0;
}


HTML
【HEAD内】
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="imagemenu.js">&lgt;/script>

【BODY内】
<div id="kwick">
<ul class="kwicks">
<li><a class="kwick opt1" href="/" target="_top"><span>HOME</span></a></li>
<li><a class="kwick opt2" href="/sei/" target="_top"><span>SEI-MODE</span></a></li>
<li><a class="kwick opt3" href="/kan/" target="_top"><span>KAN-MODE</span></a></li>
<li><a class="kwick opt4" href="/sei/game.html" target="_top"><span>GAME-MODE</span></a></li>
<li><a class="kwick opt5" href="/multibbs/" target="_top"><span>BBS</span></a></li>
<li><a class="kwick opt6" href="/chat/" target="_top"><span>CHAT</span></a></li>
</ul>
</div>
<script type="text/javascript">
var myMenu = new ImageMenu($$('#kwick .kwick'),{openWidth:150});
</script>

コメントはTwitter及びFacebookにて受け付けています


   Copyright (c) 1996-2016 Sei KAITANI (SEI) All rights reserved.