エントリー
freoのメニューでカーソルを近づけると背景色が変わるようにする
- カテゴリー:カスタムテンプレート
- タグ:freoCSS
- 表示のサンプルは こちら
css/default.css のメニュー部分を以下のとおりに変更します。
div#menu {
display: inline-block;
background-color: #666666;
}
div#menu h2 {
display: none;
}
div#menu ul, div#menu ul li, div#menu a {
display: block;
margin: 0;
padding: 0;
}
div#menu ul li {
float: left;
list-style: none;
white-space: nowrap;
}
div#menu a:link, div#menu a:visited {
color: #FFFFFF;
text-decoration: none;
background: transparent;
padding: 4px 10px;
}
div#menu a:active, div#menu a:hover {
color: #FFFFFF;
background-color: #008B45;
}
div#menu:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac ¥*/
* html div#menu {height: 1%}
div#menu {display: block;}
/* End hide from IE-mac */
これでメニューの各項目にカーソルを近づけると項目の背景色が緑色に変わります。
背景色を変更したい場合は上記の太字部分(#008B45)のところを適宜変更してください。
関連エントリー
- 2023/09/05 freoのプロフィールやコメントでGravatarのアバターを表示する方法
- 2017/06/10 freoをスマートフォンから見た時にリストのリンクなどをボタン化する
- 2017/05/23 freoの管理用テンプレートをBootstrap3でカスタマイズ
- 2014/01/29 Twitterの新ウィジェットを幅220px以下のサイドバーに収める方法
- 2013/06/01 freoのサイドバーのカレンダーで今日の日付にclassをつける
- 2013/03/20 freoのプラグイン用テンプレートをjQuery Mobileでカスタマイズ(ver1.1)
- 2013/02/25 freoのiPhone版テンプレートをjQuery Mobileでカスタマイズ(ver1.1)
- 2013/02/24 freoのスマホ用テンプレートをカスタマイズ
- 2013/02/24 freoのプラグインのスマホ用テンプレート
- 2011/01/13 freoのメニューをタイトルより上にする
コメント
コメント登録
- コメントを入力してください。
- 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
tim
上記の css/common.css は css/default.css の間違いではないでしょうか。