jimdoで横並びメニューを作る方法を教えて下さい。現在はテンプレートを利用して使ってますが、縦メニューのみのテンプレートで、注目記事などをヘッダーの下に横並びでメニュー化したいのです。

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

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2012/04/08 19:31:16
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:Cherenkov No.1

回答回数1504ベストアンサー獲得回数493

ポイント100pt

>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>
他14件のコメントを見る
id:news1

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

https://gist.github.com/2335833

2012/04/08 16:51:08

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

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

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

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

回答リクエストを送信したユーザーはいません
${title} {{if price }}
${price}円
{{/if}}