Back to page

− Links

 Print 

[XCL:テーマ] marine さんの Snowland をちょっと改造 :: XOOPS マニア

UsersWiki:nao-pon/blog/2015-04-17-1


RSS of nao-pon/blog[5]
Fri 17 Apr 2015
 

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

Tag: XOOPS[7] XCL[8] テーマ[9] Theme[10] jQuery[11] JavaScript[12] CSS[13]

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

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

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

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

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

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

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

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

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


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

filesnowland.diff[23]
  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[1] 22:11:50.013566177 +0900
+++ html/xoopsx/themes/snowland_hyp/style.css	2015-04-17[1] 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[1] 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>


Last-modified: 2015-04-17 (Fri) 23:30:56 (JST) (3521d) by nao-pon