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

jimdoで横並びメニューを作る方法を教えて下さい。現在はテンプレートを利用して使ってますが、縦メニューのみのテンプレートで、注目記事などをヘッダーの下に横並びでメニュー化したいのです。
ジェネレータなどで、横並びメニューは作れる事は知ってますが、CSSを使うものが殆どで、現状では使う事が出来ません。
jimdoでは、CSS編集を行うと独自にレイアウトを作成する事になり、現行のテンプレートが利用できなくなるのです。残念ながら独自レイアウトを作成するほどのスキルは僕にはありません。
横並びメニューのイメージとしては、下記サイトのように「ツアー」「Pages」「お知らせ」のようなマウスオーバーで色が変化し、リンク先へ飛ぶものが理想です。
良い方法をご存じの方、よろしくご教授下さい。
http://jp.jimdo.com/

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

▽最新の回答へ

1 ● Cherenkov
●100ポイント ベストアンサー

>CSSを使うものが殆どで、現状では使う事が出来ません
がよくわからないですね。なにか勘違いしているのかも。
jimdoはヘッダー編集ができ、style,scriptでゴリゴリやれば大体実現できるはずです。
(以前「独自レイアウト」ではないテンプレでドロップダウンメニュー化しようとしてテンプレを観察したことがあるので、独自レイアウトとそうでないテンプレの仕様の違いで苦労するのはわかった。 ホームページにドロップダウン機能を加えたいのですが、(マウス.. - 人力検索はてな)

現行テンプレートのままヘッダー下にメニューを追加するサンプルを書いてみました。
JavaScriptで動的に生成する作戦。

結果

http://hateq.jimdo.com/




手順

ナビゲーションにヘッダー下用メニューを追加する。
今回はヘッダー下用メニューは名前の先頭に「HM_」を付けるルール。
ヘッダ用メニューは一番上の階層に作ってください。サブメニューの動作確認はやってません。


設定 - ヘッダー部分を編集 で下記のようにする。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>

<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
//]]>
</script>

<script type="text/javascript">
//<![CDATA[
//実行タイミングがdocument完了後なので移動する様子が見えちゃう。
jQuery(document).ready(function(){

var sub = jQuery('[id^="cc-nav-view-"]:has(span:contains(HM_))');
sub.css({'list-style':'none', 'float':'left'});
sub.find('span').each(function() {
 this.textContent = this.textContent.replace(/^HM_/,'');
});
var newNav = jQuery('<ul class="mainNav1">').append(sub);
jQuery('<div id="header-menu">').append(newNav, '<div style="clear:both;">').insertAfter('#cc-tp-header');
jQuery('[id^="cc-nav-view-"]:has(span:contains(header_menu))').remove();

});
//]]>
</script>
<script type="text/javascript">
//<![CDATA[

//簡易版
function createHeaderMenu() {
 var div = document.createElement('div');
 div.innerHTML = '<div id="header-menu"><a href="#">深海魚</a> | <a href="#">カエル</a> | <a href="#">シュークリーム</a></div>';
 var c = document.getElementById('cc-tp-wrapper');
 c.parentNode.insertBefore(div, c);
}

var watcher = function() {
 setTimeout(function() {
 if (document.getElementById('cc-tp-wrapper'))
 createHeaderMenu();
 else
 watcher();
 }, 100);
};
watcher();
//]]>
</script>

Cherenkovさんのコメント
jqueryを使わずにscriptタグにDOM完成時にメニューを生成するようにすれば、現状のページが表示されてからメニューが移動するのを改善できますね…

news1さんのコメント
テストしたのですが、当方のテンプレートでは反映されないようで、表示されません。 テンプレートによって違うのでしょうか?

Cherenkovさんのコメント
テンプレによってclass,idが違うのかも。URL提示してもらえれば確認します。

news1さんのコメント
参考までに jimdoPROレイアウトのP1328を使用しております。

news1さんのコメント
URLは次のとおりです http://www.saroma3732.com/

Cherenkovさんのコメント
回答の「ヘッダー部分を編集」は忘れて以下のように。これならHTMLとCSSを追加するだけで簡単に拡張できると思います。 >|javascript| <script type="text/javascript"> //<![CDATA[ function createHeaderMenu() { var div = document.createElement('div'); div.innerHTML = '<div id="header-menu"><a href="#">深海魚</a> | <a href="#">カエル</a> | <a href="#">シュークリーム</a></div>'; var c = document.getElementById('wrapper'); c.parentNode.insertBefore(div, c); } var watcher = function() { setTimeout(function() { if (document.getElementById('wrapper')) createHeaderMenu(); else watcher(); }, 100); }; watcher(); //]]> </script> ||<

Cherenkovさんのコメント
ちょっと修正 >|javascript| var div = document.createElement('div'); div.id = 'header-menu'; div.innerHTML = '<a href="#">深海魚</a> | <a href="#">カエル</a> | <a href="#">シュークリーム</a>'; var c = document.getElementById('wrapper'); c.parentNode.insertBefore(div, c); ||<

news1さんのコメント
横並びメニューが表示されるようになりました。ありがとうございます。 できれば、左のメニューに被らないように出来ないでしょうか? 深海魚に空欄を入れると、リンクのアンダーラインが長くなり、デザイン的に今ひとつになってしまいます。 できれば、最初の質問欄にもあるように『マウスオーバーで色が変化』が理想なのですが... もしお時間があればご協力お願いします。

news1さんのコメント
訂正 深海魚に空欄を入れて、メニューに被らないようにすると、リンクのアンダーラインが長くなり、デザイン的に今ひとつになってしまいます。

Cherenkovさんのコメント
左のメニューにかぶるの意味がよくわかりません。 「計画・予算」等ボタンの上にヘッダメニューが載っかって、左のメニューと高さが揃う感じにしたいということですか? 色の変化はどのような効果にしたらいいでしょうか。

Cherenkovさんのコメント
あと、表示確認に使っているブラウザはなんでしょうか。

news1さんのコメント
説明が下手で申し訳ありません。 使用しているブラウザはgoogle chromeです。 TOPページ以外にパンくずリストを置いてますが、その位置からメニューを置きたいのです。

Cherenkovさんのコメント
https://gist.github.com/2321084 でいかがでしょうか。 (はてなのシンタックスハイライトがバグっているので何度も投稿しました。すいません)

news1さんのコメント
連絡が遅くなりすいません。 テストしたところ、問題なく表示されました。 あとは当方で色変更などをしながら、調整してみたいと思います。 ありがとうございました。

news1さんのコメント
http://jp.jimdo.com/ 上記のサイトのメニュー表示を目標にしてCSSを修正していったのですが、うまくいきません。 フォントサイズの変更とフォントカラーの変更一部は反映されたのですが、以下の内容が反映されません。 ・text-decoration: none; が、マウスオーバー時にしか反映されず、通常の状態ではアンダーラインが出てしまいます。 ・フォントカラーも同様でマウスオーバー時にしか反映されません。 ・横メニューとパンくずリストが近すぎるため分かりづらいです。できれば間隔を開けたいのですが 以上の条件を改善して、http://jp.jimdo.com/ のトップページメニューのようにするには、どのようにCSSを記述すればよいのでしょうか? 以下、改造したソースを記載します。 https://gist.github.com/2335833

Cherenkovさんのコメント
更新しました。 https://gist.github.com/2321084 ここを全部読むといいですよ -[http://www.tagindex.com/stylesheet/basic/order.html:title=CSSの基本/スタイルの優先順位 - TAG index Webサイト] -[http://www.tagindex.com/stylesheet/basic/index.html:title=CSSの基本 - TAG index Webサイト]
関連質問

●質問をもっと探す●



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