hypweb.net
XOOPSマニア  最新情報のRSS(サイト全体)
[ 自宅サーバーWebRing |ID=54 前後5表示乱移動サイト一覧 ]

19年3月21日(Thu) 11時21分
TOP » UsersWiki » nao-pon » blog » 2015-04-17-1

RSS of nao-pon/blog
2015 4月 17 (金)
 

[XCL:テーマ] marine さんの Snowland をちょっと改造 anchor.png

xc_legacy.jpg
PHP 5.6 系での動作確認のため、Raspberry Pi 2 に XOOPS X を入れて快調に動いている Raspoops ですが、XOOPS 123 marine さん作のテーマも全部入れて、その中から Snowland をデフォルトテーマにしています。

Snowland は、画面上方に各モジュールへのメニューが表示され、画面を下にスクロールして隠れそうになると position: fixed に切り替わり、常に場面上部に表示されるのでとても使い勝手がいいです。

当初、数個のモジュールを入れた状態では問題なかったのですが、動作検証ということで X-update でどんどん入れたら、メニュー部がど〜ん!って感じになってしまいました。 :-P

2bc506da.png

まあ、こんなに節操もなく数多くのモジュールを入れる人は、そうはいないでしょうからね。まったく、イレギュラーの状況だと思います。

そこで、ちょっとだけ手を入れさせて頂きました。

  • position: fixed で場面上部に張り付く時は1行分だけ表示
  • その表示範囲は、カレントモジュールのメニューが表示される位置
  • 1行表示の時にマウスオーバーすると、ちょっと間を置いて広げて全部表示
  • マウスカーソルを外すと、ちょっと間を置いて1行表示に戻る
  • 検索ボックスの下にメニューが隠れないように
  • メニューボックスが、上部固定モードに切り替わる時、メニューボックスの高さ分 body 要素の表示位置が上へずれるのを防止

と、だいたいこんな感じです。

9181360d.png

すっきりして、本文表示部が広くなりました (∩´∀`)∩ワーイ

素敵なテーマを数多く公開されている marine さんに、感謝感激です。 :shy:


自分自身へのメモ書きとして、今回改造した内容の diff を置いておきます。
手を入れたファイルは、file_style.cssfiletheme_ext_js.html の2つです。(_style.css は style.css です。style.css を添付するとこのページのスタイルシートとして使用されてしまうのでリネームしています。)

filesnowland.diff
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
diff -u html/xoopsx/themes/snowland/style.css html/xoopsx/themes/snowland_hyp/style.css
--- html/xoopsx/themes/snowland/style.css	2015-04-17 22:11:50.013566177 +0900
+++ html/xoopsx/themes/snowland_hyp/style.css	2015-04-17 14:48:06.590316600 +0900
@@ -365,6 +365,7 @@
 	-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
 	-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
 	box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
+	overflow: hidden;
 }
 
 #latest	{ 
diff -u html/xoopsx/themes/snowland/theme_ext_js.html html/xoopsx/themes/snowland_hyp/theme_ext_js.html
--- html/xoopsx/themes/snowland/theme_ext_js.html	2015-04-17 22:11:50.053567053 +0900
+++ html/xoopsx/themes/snowland_hyp/theme_ext_js.html	2015-04-18 11:40:08.448889079 +0900
@@ -70,32 +70,68 @@
 });
 </script>
 <script type="text/javascript">
-jQuery(function() {
-	var nav = jQuery('.nav');
-	var headerSearch = jQuery('#headerSearch');
-	var navTop = nav.offset().top;
-	var GuideSentence = '<{$smarty.const._THEME_LANGUAGE_SEARCH}>';
-	var long = '200px';
-	var short = '156px';
-	jQuery(window).scroll(function () {
-		var winTop = jQuery(this).scrollTop();
+jQuery(function($) {
+	var nav = $('header#header div.nav'),
+		headerSearch = $('#headerSearch'),
+		GuideSentence = '<{$smarty.const._THEME_LANGUAGE_SEARCH}>',
+		long = '200px',
+		short = '156px',
+		lineH = nav.find('ul li:first').height(),
+		navH = nav.height(),
+		navTop = nav.offset().top + navH - lineH,
+		dum = $('<div>').addClass('nav').css({height: navH + 'px'}).hide().insertBefore(nav),
+		fixpos = function() {
+			var act, tm,
+				ul = nav.find('ul:first');
+			if (nav.hasClass('fixed') && !nav.hasClass('expand') && (act = nav.find('a.act:first'))) {
+				ul.css({marginRight: long});
+				act.length && ul.css({marginTop: nav.offset().top - act.offset().top});
+				nav.css({height: lineH+'px'});
+			} else {
+				ul.css({marginTop: 0, marginRight: nav.hasClass('fixed')? long : '10px'});
+				nav.css({height: 'auto'});
+			}
+		};
+	$(window).scroll(function () {
+		var winTop = $(this).scrollTop();
 		if (winTop >= navTop) {
-			nav.addClass('fixed'),headerSearch.addClass('hs_top'),headerSearch.removeClass('hs_normal')
-		} else if (winTop <= navTop) {
-			nav.removeClass('fixed'),headerSearch.addClass('hs_normal'),headerSearch.removeClass('hs_top')
+			if (!nav.hasClass('fixed')) {
+				dum.show();
+				nav.addClass('fixed'),headerSearch.addClass('hs_top').removeClass('hs_normal');
+				fixpos();
+			}
+		} else {
+			if (nav.hasClass('fixed')) {
+				dum.hide();
+				nav.removeClass('fixed'),headerSearch.addClass('hs_normal').removeClass('hs_top');
+				fixpos();
+			}
 		}
 	});
-	jQuery('input#headerSearch-keywords').focus(function(){
-	    if(jQuery(this).val()===GuideSentence){
-	        jQuery(this).val('');
-	    }
-	    jQuery(this).animate({width: long},400);
+	$('input#headerSearch-keywords').on('focus blur', function(e){
+			if (e.type == 'focus') {
+				$(this).val()===GuideSentence && $(this).val('');
+				$(this).animate({width: long},400);
+		} else {
+				$(this).val()==='' && $(this).val(GuideSentence);
+				$(this).animate({width: short},500);
+		}
+	});
+	$('header#header').on('mouseenter mouseleave', 'div.fixed', function(e){
+		var ev = e.type;
+		if (nav.data('tm')) {
+			clearTimeout(nav.data('tm'));
+			nav.data('tm', null);
+			return;
+		}
+		nav.data('tm', setTimeout(function() {
+			nav.data('tm', null);
+			ev === 'mouseenter'? !nav.hasClass('expand') && nav.addClass('expand') : nav.hasClass('expand') && nav.removeClass('expand');
+			fixpos();
+		}, 800));
 	});
-	jQuery('input#headerSearch-keywords').blur(function(){
-	    if(jQuery(this).val()===''){
-	        jQuery(this).val(GuideSentence);
-	    }
-	    jQuery(this).animate({width: short},500);
+	nav.on('mousedown', 'a', function(e){
+		nav.data('tm') && clearTimeout(nav.data('tm'));
 	});
 });
 </script>


新しくコメントをつける

題名
ゲスト名
投稿本文

より詳細なコメント入力フォームへ

トップ   凍結 差分 バックアップ 複製 名前変更 リロード印刷に適した表示   ページ新規作成 全ページ一覧 単語検索 最新ページの一覧   ヘルプ   最新ページのRSS 1.0 最新ページのRSS 2.0 最新ページのRSS Atom Powered by xpWiki
Counter: 2024, today: 1, yesterday: 0
初版日時: 2015-04-17 (金) 23:22:54
最終更新: 2015-04-17 (金) 23:30:56 (JST) (1433d) by nao-pon
このページのTopへ
ログイン
ユーザ名:

パスワード:

オートログイン

Basic 認証

新規登録 | パスワード紛失



メインメニュー
UsersWiki メニュー
付箋メニュー
付箋メニュー 
付箋の編集
文字色: 背景色:
お名前:  線接続id:
 
ブックマーク
オンサイトブックマークは
ログインするとご利用になれます
[ログインする]
サイト内 Wiki
☆ 検索 ☆



高度な検索(サイト内)
FireFox検索プラグイン
オンライン状況
合計 41 人がオンライン中 :-)
(UsersWiki : 4 人)

登録ユーザ: 0 & ゲスト: 41

もっと...
サイト情報
管理人

nao-pon
 

登録ユーザ数: 4600


Web Services by Yahoo! JAPAN
楽天ウェブサービスセンター
Amazon.co.jpアソシエイト
現在ページのQRコード
現在ページのQRコード
[携帯対応]
参照元情報