ジェネレータなどで、横並びメニューは作れる事は知ってますが、CSSを使うものが殆どで、現状では使う事が出来ません。
jimdoでは、CSS編集を行うと独自にレイアウトを作成する事になり、現行のテンプレートが利用できなくなるのです。残念ながら独自レイアウトを作成するほどのスキルは僕にはありません。
横並びメニューのイメージとしては、下記サイトのように「ツアー」「Pages」「お知らせ」のようなマウスオーバーで色が変化し、リンク先へ飛ぶものが理想です。
良い方法をご存じの方、よろしくご教授下さい。
http://jp.jimdo.com/
>CSSを使うものが殆どで、現状では使う事が出来ません
がよくわからないですね。なにか勘違いしているのかも。
jimdoはヘッダー編集ができ、style,scriptでゴリゴリやれば大体実現できるはずです。
(以前「独自レイアウト」ではないテンプレでドロップダウンメニュー化しようとしてテンプレを観察したことがあるので、独自レイアウトとそうでないテンプレの仕様の違いで苦労するのはわかった。 ホームページにドロップダウン機能を加えたいのですが、(マウス.. - 人力検索はてな)
現行テンプレートのままヘッダー下にメニューを追加するサンプルを書いてみました。
JavaScriptで動的に生成する作戦。
ナビゲーションにヘッダー下用メニューを追加する。
今回はヘッダー下用メニューは名前の先頭に「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>
http://jp.jimdo.com/
2012/04/08 16:51:08上記のサイトのメニュー表示を目標にしてCSSを修正していったのですが、うまくいきません。
フォントサイズの変更とフォントカラーの変更一部は反映されたのですが、以下の内容が反映されません。
・text-decoration: none; が、マウスオーバー時にしか反映されず、通常の状態ではアンダーラインが出てしまいます。
・フォントカラーも同様でマウスオーバー時にしか反映されません。
・横メニューとパンくずリストが近すぎるため分かりづらいです。できれば間隔を開けたいのですが
以上の条件を改善して、http://jp.jimdo.com/ のトップページメニューのようにするには、どのようにCSSを記述すればよいのでしょうか?
以下、改造したソースを記載します。
https://gist.github.com/2335833
更新しました。
https://gist.github.com/2321084
ここを全部読むといいですよ
- CSSの基本/スタイルの優先順位 - TAG index Webサイト
- CSSの基本 - TAG index Webサイト
2012/04/08 18:17:38