とあるお仕事で、ほぼ初めてhtml5でフルで、しかもjqueryオンリーで書いているのですが（ケッコウ私も勉強するとなったら必死でjqueryをマスターしようとしているのだった。）
ケッコウ細かい変更が多いお客さんみたいなので、お得意の画像メニューだと変更したときにややこしいだろうなと思い、
この前見つけたオシャレなjqueryのピコピコメニューを使ってみようと思いました。
これだとテキストベースなので、変更があっても大丈夫です。
考え方としては、これも最近マスターしたイメージマップを使いhover とhitで色を変え、右側の切れ込みは
<a href="hoge">HOME<span></span></a>
のように書き、spanで作って見せるというものです。こんな書き方したことない！確かにこの方法なら内容に応じてメニューの長さも自在で便利だわ！でも、現在のページのタブに色つけたい場合はどうしたらいいの…と思いまして…先生にこれまた相談しました。
で、これもjqueryで書けると…。
私、書いて見ました。 最初先生が、もっと高機能の現在のフォルダを認識して addclassで（クラス）を追加する方法でしたが、nucleusで作るので、フォルダという考え方というよりも
単純にitem別にnp_matchかなんかでifで分岐し、
bodyにidを書いて、そのidを取得し、var bodyid = $('body').attr('id'); ← 変数を宣言し格納する。
そのメニューのidに色をつけるクラスを追加するということにしました。
bodyにidを書いて、そのidを取得し、var bodyid = $('body').attr('id'); ← 変数を宣言し格納する。
そのメニューのidに色をつけるクラスを追加するということにしました。
先生に教えて頂きまして、
こんなスッキリした書き方ができました。
$(function(){
var bodyid = $('body').attr('id');
//swithで分岐し、変数activeを宣言
switch(bodyid){
case 'no1':
var active = 'nav-2';
break;
case 'aboutus':
var active = 'nav-3';
break;
case 'contact':
var active = 'nav-4';
break;
case 'home':
var active = 'nav-1';
break;
}
// Class を追加する対象を決定 変数active のリンク要素に targetElemを宣言
var targetElem = '#' + active + ' a';
// 対象へ「.active-nav」を追加
$(targetElem).addClass('active-nav');
});
var bodyid = $('body').attr('id');
//swithで分岐し、変数activeを宣言
switch(bodyid){
case 'no1':
var active = 'nav-2';
break;
case 'aboutus':
var active = 'nav-3';
break;
case 'contact':
var active = 'nav-4';
break;
case 'home':
var active = 'nav-1';
break;
}
// Class を追加する対象を決定 変数active のリンク要素に targetElemを宣言
var targetElem = '#' + active + ' a';
// 対象へ「.active-nav」を追加
$(targetElem).addClass('active-nav');
});
アクティブの時のcssを.active-nav に設定し、
例えばcase no1だった時は、
$('#nav-2 a').addClass('active-nav');
現在アクティブにある #nav-2 の a 要素に active-navをつけて↓のようにするということです。
<li id="nav-2"><a class="active-nav" href="#">メニュー<span></span></a></li>
なかなかこれ便利じゃないかなと思います。
調べたら他にもありました…
bodyのクラス要素とメニューのクラス要素を同じにしてアクティブを作る方法（こっちもいい感じだが、私の能力だとちょとわかりにくい…）
rollover プラグイン…
直接関係ないけど、ファイル名の名前のbodyタグにidを追加
いやぁ。楽しいですね。わかるって。
ちなみに先生が最初に書いてくれたフォルダごとに分岐する方法を書いておきます。これも一般的なホームページには便利かなと（もちろんnucleusでカテゴリーで分岐する場合でも使えますが…）
jQuery(function(){
// 「#menu」が存在するときのみ動作する
if($('#menu').length){
var active = '';
// 現在のURLを配列で取得
var now = location.href.split('/');
// 親のディレクトリ取得
var endDir = now.slice(now.length-2,now.length-1) + active;
// ディレクトリ名によって分岐
switch (endDir){
case 'no1':
var active = 'nav-2';
break;
case 'aboutus':
var active = 'nav-3';
break;
case 'contact':
var active = 'nav-4';
break;
case 'home':
var active = 'nav-1';
break;
}
// Class を追加する対象を決定
var targetElem = '#' + active + ' a';
// 対象へ「.active-nav」を追加
$(targetElem).addClass('active-nav');
}
});
// 「#menu」が存在するときのみ動作する
if($('#menu').length){
var active = '';
// 現在のURLを配列で取得
var now = location.href.split('/');
// 親のディレクトリ取得
var endDir = now.slice(now.length-2,now.length-1) + active;
// ディレクトリ名によって分岐
switch (endDir){
case 'no1':
var active = 'nav-2';
break;
case 'aboutus':
var active = 'nav-3';
break;
case 'contact':
var active = 'nav-4';
break;
case 'home':
var active = 'nav-1';
break;
}
var targetElem = '#' + active + ' a';
// 対象へ「.active-nav」を追加
$(targetElem).addClass('active-nav');
}
});
正直、この先生の書いてくれたのはちょっとなんとなくしかわかんない。
var active = ''; 最初に変数active には何もない状態であると宣言しておくなんて、javascript 書きなれたらうかぶようになるのかなとか。 これって本当に必要なのかな？とかいろいろ考えて、いじりながら勉強したくなりますが、暇もないので…とりあえずメモしときます。
こういう細かい文法が気になる！私はそうです。バリバリの文系出身です。
上へ
先生のブログが更新されていました。cssで実現する角丸のオシャレなデザインについて… こんなグラデーションができるんだ！ すごいわ！！みたいな。
早速 現代数学社さんのブログのジミなタイトルを加工してみた。
なんかとってつけた感じになったけど…こんなことができるんだ～という感じで。
上がオペラで下がIE8での表示…なんだか残念な感じ。
IE9でもなんかへんになるのでやめた…
何か他のものが邪魔しているみたいなのですが…
こだわる暇がないので… 参考までに記録しておきます。↓
h1.title{
margin-top:-5px;
letter-spacing:5px;
padding: 17px 0 18px 30px;
border: 1px solid #212121;
font-weight: bold;
text-shadow: 1px 1px 0 #212121;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0px 0px 8px 0px #fff;
-moz-box-shadow: inset 0px 0px 8px 0px #fff;
box-shadow: inset 0px 0px 8px 0px #fff;
background: -moz-linear-gradient(bottom, #212121, #3a4861);
background: -webkit-gradient(linear, center bottom, center center, from(#2A2A2A), to(#767676));}
が追加してみたものなんですが。
ジャドーだけにしとこ。 この角丸にするのはかわいいですが、IE9でないと表現できないですね。
参考 css楽しい～
これ欲しい
iphoneの時代
iphoneの時代
if else でもjquery は使えるが、ある一定のアドレスの時に…はこんな風に書く…
アドレスがaboutus.html#kojin だった時は…
if ($(location).attr('href').match(/\/aboutus.html#kojin/)) {
この間に命令
}
番外編で…javascript で同じページのアンカーに移動しリロードする。（クリックでリロードはすぐ出てきたけど、これがなかなかなかったです。）
<script type='text/javascript'>
function reloadAndJump(anchor)
{
location.href=location.href.split(/?|#/)[0] + '#' + anchor;
location.reload(true);
return false;
}
</script>
<a href='#' onclick="return reloadAndJump('theAnchor')">Reload</a>
<a name='theAnchor'> </a>
ついでにjavascriptもちょっとづずわかるようになってきました。
イヌでもわかるJava Script講座…ふんふん
0 コメント :
コメントを投稿
コメントありがとうございます。