jimdoでロールオーバーの横並びメニューを作成できる方を募集します。

前回の質問で http://q.hatena.ne.jp/1333685465 回答者にメニューを作成して頂きましたが、ロールオーバー表示が必要になりました。
jimdoは、style,scriptを使用するヘッダー編集ができますので、以下の要望に沿ってcssを作成頂ける方を募集します。以下要望です。
作成サイトは http://www.saroma3732.com/
ヘッダー編集で作成した横メニューの元ソースは https://gist.github.com/2494979
ロールオーバーの参考サイトは、次のサイトのヘッダー下の横メニューで、ドロップダウンリストは必要ありません。 http://www.city.sapporo.jp/index.html
現在はメニュー区分を『| 』行ってますが、入力文字にスペースで間隔を開けて、それぞれ背景色で区分できるようにしたいです。
通常の色は#9cc86f、クリックした際は#cae6b5で、クリック時の色がそのまま残る形が希望です。
メニューは随時変更しますので、イラストは使用せず、フォントは白色でお願いします。以上の条件で作成できる方、よろしくお願いします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/04/26 12:59:08
  • 終了:2012/04/26 19:46:35

ベストアンサー

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922012/04/26 13:39:27

ポイント200pt
#header-menu a {
  color: black !important;
  background-color: #9cc86f !important;
  padding: 0px 5px 0px 5px !important;
}
#header-menu a:hover {
  font-size: 20px;
  color: green !important;
}
#header-menu a.here {
  color: white !important;
  background-color: #cae6b5 !important;
}
#header-menu a.here:hover {
  color: green !important;
  background-color: #cae6b5 !important;
}

(function() {
  var h = document.getElementById('header-menu').getElementsByTagName('a');
  var cache;
  for (var i=0, n=h.length; i<n; i++) {
    var self = h[i];
    if (RegExp(self.textContent).test(decodeURIComponent(location.href))) {
      if (cache) {
        cache.className = cache.className.replace(/here/,'');
      }
      cache = self;
      self.className += ' here';
    }
  }
})();
他7件のコメントを見る
id:Cherenkov

お、いい感じですね。こうしてみてください。
開いているページのURLが、「最新のお知らせ」のhref(http://www.saroma3732.com/)に一致したらそこを現在のページとする処理です。

function whichCurrentPege() {
  var h = document.getElementById('header-menu').getElementsByTagName('a');
  var cache;
  for (var i=0, n=h.length; i<n; i++) {
    var self = h[i];
	if (location.href == self.href) {
		self.className += ' here';
		break;
	}
	else if (RegExp(self.textContent).test(decodeURIComponent(location.href))) {
      if (cache) {
        cache.className = cache.className.replace(/here/,'');
      }
      cache = self;
      self.className += ' here';
    }
  }
}

現状は無理やりURLとメニュー文字列を突き合わせて、現在の位置を求めていますが
出来れば、テンプレにidを振って、URLとの対応表を作ったほうが確実に現在の位置を特定できます。

div.innerHTML = '<a id="home" href="http://www.saroma3732.com/">最新のお知らせ</a> | <a id="download" href="http://goo.gl/M57JX">ダウンロード</a>

var rule = {
  'http://www.saroma3732.com/': 'home',
  'http://www.saroma3732.com/%E5%85%AC%E9%96%8B%E8%B3%87%E6%96%99-%E4%BA%88%E7%AE%97-%E6%B1%BA%E7%AE%97-%E6%9B%B8%E5%BC%8F/%E6%9B%B8%E5%BC%8F%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89/': 'download'
}
document.getElementById(rule[location.href]).className = 'here';

みたいな。

2012/04/26 17:55:48
id:news1

そんな方法もあるんですか。勉強になります。
お陰様で、頂いたソースで問題も解決しました。
ありがとうございました。
またお世話になるかもしれませんが、その時はよろしくお願いします。

2012/04/26 19:46:16

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません