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

TOP » UsersWiki » nao-pon » blog » 2015-04-17-1

RSS of nao-pon/blog
Fri 17 Apr 2015
 

[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>


Front page   Freeze Diff Backup Copy Rename ReloadPrint View   New Page Page list Search Recent changes   Help   RSS of recent changes (RSS 1.0) RSS of recent changes (RSS 2.0) RSS of recent changes (RSS Atom) Powered by xpWiki
Counter: 36, today: 3, yesterday: 0
Princeps date: 2015-04-17 (Fri) 23:22:54
Last-modified: 2015-04-17 (Fri) 23:30:56 (JST) (1942d) by nao-pon
このページのTopへ
メインメニュー
ログイン

ユーザー名:


パスワード:





パスワード紛失  |新規登録
オンライン状況
33 人のユーザが現在オンラインです。 (1 人のユーザが UsersWiki を参照しています。)

登録ユーザ: 0
ゲスト: 33

もっと...