人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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で、クリック時の色がそのまま残る形が希望です。
メニューは随時変更しますので、イラストは使用せず、フォントは白色でお願いします。以上の条件で作成できる方、よろしくお願いします。

●質問者: news1
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Cherenkov
●200ポイント ベストアンサー
#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';
 }
 }
})();

news1さんのコメント
ああ?説明が悪かったです。 >>クリック時の色がそのまま残る形が希望です。 この部分ですが、現在どこをクリックしているか、分かるように残して欲しいという意味です。 ずっと残ってしまうと、自分が開いている場所が分からなくなりますので、その点お願いします。 あと『| 』で区切るのは、一般的な方法なのでしょうか? この方が区分けしやすいのは理解できますが、例に出したダッぽろ氏のサイトのように表示する 方法はないものでしょうか?

news1さんのコメント
>>ダッぽろ氏 札幌市でした。すいません。 http://www.city.sapporo.jp/index.html

Cherenkovさんのコメント
回答を編集しました。 「|」区切りは、前回提示したdiv.innerHTML = '<a href="#">深海魚</a> | <a href="#">カエル</a> をテンプレートのように編集すればいいだけの話です。 ボタンぽくかっこよくするならこういうサイトで研究したらどうでしょう。css borderでググルもよし。 [http://css-tricks.com/examples/ButtonMaker/:title=Button Maker] (左のボタンをクリックするとcssが表示される)

news1さんのコメント
>|| <style type="text/css"> /*<![CDATA[*/ #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; } /*]]>*/ </style> <script type="text/javascript"> //<![CDATA[ (function() { function createHeaderMenu() { var div = document.createElement('div'); div.id = 'header-menu'; div.innerHTML = '<a href="http://www.saroma3732.com/">最新のお知らせ<\/a> | <a href="http://goo.gl/M57JX">ダウンロード<\/a> | <a href="http://goo.gl/9EXIR">お問い合わせ<\/a> | <a href="http://goo.gl/Iwg9X">プライバシーポリシー<\/a>'; var c = document.getElementById('wrapper'); c.parentNode.insertBefore(div, c); } var observer = function() { setTimeout(function() { if (document.getElementById('wrapper')) createHeaderMenu(); else observer(); }, 100); }; observer(); })(); //]]> </script> ||< 上段のheader-menuは、この置き換えで大丈夫でしょうか? 下段の(function() {から始まるコードは、どこと置き換えになるのでしょうか? 色々試したのですが、実行すると表示されなくなります。 教えて下さい。お願いします。

Cherenkovさんのコメント
cssはすでに手が加えられていてこちらで表示確認するのはめんどくさすぎるので申し訳ないですが適当に上書きしていって確認してください。 JavaScriptの部分は追加です。 メニューの文字列とURLに含まれる文字列が一致したら現在の位置としてclass属性にhereを付け足してcssを切り替えています。

Cherenkovさんのコメント
失礼しました。普通に追加ではだめでした。以下のようにしてみてください。 >|html| <script type="text/javascript"> //<![CDATA[ (function() { function createHeaderMenu() { var div = document.createElement('div'); div.id = 'header-menu'; div.innerHTML = '<a href="http://www.saroma3732.com/">最新のお知らせ</a> | <a href="http://goo.gl/M57JX">ダウンロード</a> | <a href="http://goo.gl/9EXIR">お問い合わせ</a> | <a href="http://goo.gl/Iwg9X">プライバシーポリシー</a>'; var c = document.getElementById('wrapper'); c.parentNode.insertBefore(div, c); } var observer = function() { setTimeout(function() { if (document.getElementById('wrapper')) { createHeaderMenu(); whichCurrentPege(); } else observer(); }, 100); }; 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 (RegExp(self.textContent).test(decodeURIComponent(location.href))) { if (cache) { cache.className = cache.className.replace(/here/,''); } cache = self; self.className += ' here'; } } } observer(); })(); //]]> </script> ||<

news1さんのコメント
いただいたソースで色々と調整しております。 概ね当方の願いどおりになってきたのですが、ただ一点だけ困っております。 http://www.saroma3732.com/ 上記サイトに設置しているのですが、左端の『最新のお知らせ』だけクリックしても変化がありません。 この場所はトップページにリンクしているのですが、これはCSSの仕様なのでしょうか。 ソースは次のとおりです。 >|| <style type="text/css"> /*<![CDATA[*/ #header-menu { margin-left: 20px; margin-bottom: 20px; } #header-menu a { text-decoration: none !important; font-size: 20px; color: black !important; } #header-menu a { color: white !important; font-weight: bold; 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: green !important; font-weight: bold; background-color: #cae6b5 !important; } #header-menu a.here:hover { color: green !important; background-color: #cae6b5 !important; } /*]]>*/ </style> <script type="text/javascript"> //<![CDATA[ (function() { function createHeaderMenu() { var div = document.createElement('div'); div.id = 'header-menu'; div.innerHTML = '<a href="http://www.saroma3732.com/">最新のお知らせ<\/a> | <a href="http://goo.gl/M57JX">ダウンロード<\/a> | <a href="http://goo.gl/9EXIR">お問い合わせ<\/a> | <a href="http://goo.gl/Iwg9X">プライバシーポリシー<\/a>'; var c = document.getElementById('wrapper'); c.parentNode.insertBefore(div, c); } var observer = function() { setTimeout(function() { if (document.getElementById('wrapper')) { createHeaderMenu(); whichCurrentPege(); } else observer(); }, 100); }; 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 (RegExp(self.textContent).test(decodeURIComponent(location.href))) { if (cache) { cache.className = cache.className.replace(/here/,''); } cache = self; self.className += ' here'; } } } observer(); })(); //]]> </script> ||<

Cherenkovさんのコメント
お、いい感じですね。こうしてみてください。 開いているページのURLが、「最新のお知らせ」のhref(http://www.saroma3732.com/)に一致したらそこを現在のページとする処理です。 >|javascript| 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との対応表を作ったほうが確実に現在の位置を特定できます。 >|html| div.innerHTML = '<a id="home" href="http://www.saroma3732.com/">最新のお知らせ</a> | <a id="download" href="http://goo.gl/M57JX">ダウンロード</a> ||< >|javascript| 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'; ||< みたいな。

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

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ