simple_white
simple_white
対応デザイン:simple_white
工事中
申し訳ありません。しばらく、完成しそうもないです。急ぎの方は、以下のコードの★マークのところの色を修正すれば、なんとかなると思います。
#beforescript{{ <style type="text/css"> #navigator ul { height: 28px; } #navigator ul li a:hover { background-color: transparent; color: #FFFFFF; } /* Main menu */ #navigator, #menu { width: 100%; margin: 0; padding: 10px 0 0 0; list-style: none; background: #9c9c9c; /* ★ */ background: -moz-linear-gradient(top, #444, #9c9c9c); /* ★ */ background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #9c9c9c),color-stop(1, #444)); /* ★ */ -moz-border-radius: 50px; border-radius: 50px; -moz-box-shadow: 0 2px 1px #9c9c9c; /* ★ */ -webkit-box-shadow: 0 2px 1px #9c9c9c; /* ★ */ box-shadow: 0 2px 1px #9c9c9c; /* ★ */ } #navigator .list1 li, #navigator .list2 li, #menu li { float: left; padding: 0 0 10px 0; position: relative; } #navigator .list1 a, #navigator .list2 a, #menu a { float: left; height: 25px; padding: 0 25px; color: #999; text-transform: uppercase; font: bold 12px/25px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000; } #navigator .list1 li:hover > a, #navigator .list2 li:hover > a, #menu li:hover > a { color: #ffffff; } *html .list1 li a:hover, *html .list2 li a:hover, *html #menu li a:hover /* IE6 */ { color: #fafafa; /* ★ */ background: #9c9c9c; /* ★ */ } #navigator .list1 li:hover > ul, #navigator .list2 li:hover > ul, #menu li:hover > ul { display: block; } /* Sub-menu */ #navigator .list1 ul, #navigator .list2 ul, #menu ul { list-style: none; margin: 0; padding: 0; display: none; position: absolute; top: 35px; left: 0; z-index: 99999; background: -moz-linear-gradient(top, #444, #9c9c9c); /* ★ */ background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #9c9c9c),color-stop(1, #444)); /* ★ */ -moz-border-radius: 5px; border-radius: 5px; } #navigator .list1 ul li, #navigator .list2 ul li, #menu ul li { background-image: none; float: none; margin: 0; padding: 0; display: block; -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; /* ★ */ -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; /* ★ */ box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; /* ★ */ } #navigator .list1 ul li:last-child, #navigator .list2 ul li:last-child, #menu ul li:last-child { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #navigator .list1 ul a, #navigator .list2 ul a, #menu ul a { background: #9c9c9c; /* ★ */ padding: 10px; height: auto; line-height: 1; display: block; white-space: nowrap; float: none; text-transform: none; } /* *html .list1 ul a,*/ /* *html .list2 ul a, */ *html #menu ul a /* IE6 */ { height: 10px; width: 150px; } /* *:first-child+html .list1 ul a, */ /* *:first-child+html .list2 ul a, */ *:first-child+html #menu ul a /* IE7 */ { height: 10px; width: 150px; } #navigator .list1 ul a:hover, #navigator .list2 ul a:hover, #menu ul a:hover { background: #5A3529; /* ★ */ background: -webkit-gradient(linear, left top, left bottom, from(#804000), to(#5A3529)); /* ★ */ background: -moz-linear-gradient(top, #804000, #5A3529) !important; /* ★ */ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#804000', endColorstr='#5A3529'); /* IE */ /* ★ */ } #navigator .list1 ul li:first-child a, #navigator .list2 ul li:first-child a, #menu ul li:first-child a { -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } #navigator .list1 ul li:first-child a:after, #navigator .list2 ul li:first-child a:after, #menu ul li:first-child a:after { content: ''; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444; } #navigator .list1 ul li:first-child a:hover:after, #navigator .list2 ul li:first-child a:hover:after, #menu ul li:first-child a:hover:after { border-bottom-color: #804000; /* ★ */ } #navigator .list1 ul li:last-child a, #navigator .list2 ul li:last-child a, #menu ul li:last-child a { -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } /* Clear floated elements */ #navigator .list1:after, #navigator .list2:after, #menu:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } #navigator .list1 ul li:first-child a:after, #navigator .list2 ul li:first-child a:after, #menu ul li:first-child a:after { border-bottom-color: #111111; /* ★ */ } /* .list1 * html #menu, */ /* .list2 * html #menu, */ * html #menu { zoom: 1; } /* IE6 */ /* .list1 *:first-child+html #menu, */ /* .list2 *:first-child+html #menu, */ *:first-child+html #menu { zoom: 1; } /* IE7 */ </style> }}
ご意見箱
皆様のご意見をお待ちします。
- 業者に頼んで2週間ほどしても実現しなかった「プルダウン」が、簡単に装備でき感動です。後はg_wbrown01.にあったデザインが選択できればさらにいいです。更新をお待ちします。 -- 企画制作 楽大夢 岩瀬よしのり 2012-10-04 (木) 11:01:27
- ワイド画面にすると、ナビが左寄りに表示されます。センターに持ってくる方法はないでしょうか?あればお教えください。 -- 企画制作 楽大夢 岩瀬よしのり 2012-10-04 (木) 13:20:52
- 岩瀬さん こんにちは。g_wbrown01 に対応するデザインは、予定に入っていませんでしたが、時間があったらチャレンジしてみようと思います。あまり期待しないでください... ナビが左寄りになるのは、ちょっと調べましたが、もともとのデザインがそのようになっているので、ちょっと無理かもしれません。調査してみます。 -- tomzo 2012-10-17 (水) 09:00:09
- いつも拝見していあます。ありがとうございます。simple05で見ました。この表示はなかなかいいですね。吹き出し形式ではないメニューの方が自然でいいです。 -- esxtar 2013-04-13 (土) 09:44:45
- こんにちは。こちらで配布しているCSSを編集して、私のサイトのテンプレートに使わせていただきました。すごくいいですね。事後報告ですがお礼申し上げます。http://qhmtemps.com/index.php?QBlog-20140401-1 -- jun 2014-04-20 (日) 17:22:25
- junさん こんにちは。お役に立ててうれしいです。最近、サイトの更新ができてませんが、今後ともよろしくお願いいたします。 -- tomzo 2014-04-25 (金) 23:09:06
- こんにちは。こちらのサイトとjunさんのサイトのCSSを利用させていただき、私どものサイトにプルダウンメニューを設置することができました。まだ、色調等の調整等うまくいっていませんが、とても助かりました。お礼申し上げます。一般財団法人瑞陵高校助成基金 -- 日比野憲一 2015-01-28 (水) 00:09:07
- 日比野憲一さん、こんにちは。当サイトをご利用ありがとうございます。最近、更新していませんがこれからもよろしくお願いします。 -- tomzo 2015-04-06 (月) 08:54:28