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

  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>