--=REKLAMA=--

JA Purity/Nawigacja pozioma

Z Joomla!WikiPL

Zalążek artykułu To jest tylko zalążek artykułu. Jeśli potrafisz, rozbuduj go.

Oryginalny szablon JA Purity został wydany przez JoomlArt.com w pakiecie instalacyjnym jako archiwum w formacie ZIP, ale później został umieszczony w pakiecie instalacyjnym Joomla!. Pliki związane z index.php, template.css, template_rtl.css, logo.png, logo.gif, ja.script.js, iepngfix.htc oraz style.css (wersje green oraz blue) znajdują się w poniższych katalogach :

    templates/ja_purity
                 index.php
                 css/
                     XXXXX.css

Jeśli korzystasz z samouczka, możesz pobrać specjalną wersję ćwiczebną wersję szablonu i zainstalować ją w następującym katalogu:

    templates/my_japurity
                 index.php
                 css/
                     XXXXXX

Pliki HTML i PHP

ja_purity/index.php

  1. <!-- BEGIN: MAIN NAVIGATION -->
  2. <?php if ($this->countModules('hornav')): ?>
  3. <div id="ja-mainnavwrap">
  4. 	<div id="ja-mainnav" class="clearfix">
  5. 	<jdoc:include type="modules" name="hornav" />
  6. 	</div>
  7. </div>
  8. <?php endif; ?>
  9. <!-- END: MAIN NAVIGATION -->

Pliki CSS

ja_purity/css/ja-sosdmenu.css

  1. /* Son of Suckerfish Dropdowns
  2. ---------------------------------------------------------
  3. Originally developed by Patrick Griffiths and Dan Webb
  4. http://www.htmldog.com/articles/suckerfish/dropdowns/
  5. ---------------------------------------------------------
  6. NOTE: After a deep research, we decide to divide this
  7. CSS into 2 parts. The first part will define the layout.
  8. The second part will define the visual look for this menu.
  9. ---------------------------------------------------------*/
  10.  
  11. /*--------------------------- LAYOUT ----------------------------*/
  12. #ja-mainnav, #ja-mainnav ul {
  13. 	padding: 0;
  14. 	margin: 0;
  15. 	line-height: 20px;
  16. }
  17.  
  18. #ja-mainnav a {
  19. 	display: block;
  20. 	line-height: 20px;
  21. 	margin: 0;
  22. 	padding: 10px 20px;
  23. }
  24.  
  25. #ja-mainnav li { /* all list items */
  26. 	float: left;
  27. 	margin: 0;
  28. 	padding: 0;
  29. }
  30.  
  31. #ja-mainnav li ul { /* second-level lists */
  32. 	position: absolute;
  33. 	width: 202px;
  34. 	/*
  35. 	 * Using left instead of display to hide menus because display: none isn't
  36. 	 * read by screen readers
  37. 	 */
  38. 	left: -999em;
  39. }
  40.  
  41. #ja-mainnav ul ul a { /* sub-links */
  42. 	width: 160px;
  43. }
  44.  
  45. #ja-mainnav li ul ul { /* third-and-above-level lists */
  46. 	margin: -42px 0 0 200px;
  47. }
  48.  
  49. #ja-mainnav li:hover ul ul,
  50. #ja-mainnav li:hover ul ul ul,
  51. #ja-mainnav li.sfhover ul ul,
  52. #ja-mainnav li.sfhover ul ul ul {
  53. 	left: -999em;
  54. }
  55.  
  56. #ja-mainnav li:hover ul,
  57. #ja-mainnav li li:hover ul,
  58. #ja-mainnav li li li:hover ul,
  59. #ja-mainnav li.sfhover ul,
  60. #ja-mainnav li li.sfhover ul,
  61. #ja-mainnav li li li.sfhover ul { /* lists nested under hovered list items */
  62. 	left: auto;
  63. }
  64. /*--------------------------- VISUAL ----------------------------*/
  65. /* -------- All levels -------- */
  66. #ja-mainnavwrap {
  67. 	border-top: 1px solid #666666;
  68. 	background: #444444;
  69. }
  70. #ja-mainnav ul, #ja-mainnav li {
  71. 	background-image: none;
  72. 	list-style: none;
  73. }
  74.  
  75. #ja-mainnav span.separator {
  76. 	display:none;
  77. }
  78.  
  79. /* -------- Top level -------- */
  80. #ja-mainnav > ul {
  81. 	background-color: #444444;
  82. 	padding-left: 20px;
  83. }
  84.  
  85. #ja-mainnav > ul > li {
  86. 	background-color: #444444;
  87. 	border-left: 1px solid #666666;
  88. 	border-right: 1px solid #333333;
  89. 	margin-right: 1px;
  90. }
  91.  
  92. #ja-mainnav > ul > li.active {
  93. 	background: url(../images/arrow2.png) no-repeat bottom center #444444;
  94. 	color: #CCCCCC;
  95. }
  96.  
  97. #ja-mainnav > ul > li:hover,
  98. #ja-mainnav > ul > li:active,
  99. #ja-mainnav > ul > li:focus {
  100. 	background: url(../images/arrow2.png) no-repeat bottom center #555555;
  101. 	color: #FFFFFF;
  102. }
  103.  
  104. /* -------- sub-levels -------- */
  105. #ja-mainnav ul ul li {
  106. 	border-left: 1px solid #666666;
  107. 	border-right: 1px solid #333333;
  108. 	border-top: 1px solid #666666;
  109. 	border-bottom: 1px solid #333333;
  110. 	margin-bottom: 1px;
  111. }
  112.  
  113. #ja-mainnav li ul { /* second-level lists */
  114. 	background-color: #555555;
  115. }
  116.  
  117. #ja-mainnav li a {
  118. 	color: #CCCCCC;
  119. 	font-weight: bold;
  120. 	text-decoration: none;
  121. }
  122.  
  123. #ja-mainnav ul ul  li:hover,
  124. #ja-mainnav ul ul  li:active,
  125. #ja-mainnav ul ul  li:focus {
  126. 	background: #444444;
  127. 	color: #FFFFFF;
  128. }
  129. /*old css*/
  130. /* Son of Suckerfish Dropdowns
  131. ---------------------------------------------------------
  132. Originally developed by Patrick Griffiths and Dan Webb
  133. http://www.htmldog.com/articles/suckerfish/dropdowns/
  134. ---------------------------------------------------------
  135. NOTE: After a deep research, we decide to divide this
  136. CSS into 2 parts. The first part will define the layout.
  137. The second part will define the visual look for this menu.
  138. ---------------------------------------------------------*/
  139.  
  140. #ja-mainnav ul.menu {
  141. 	margin: 0; /* all lists */
  142. 	padding: 0;
  143. 	float: left;
  144. 	border-right: 1px solid #555555;
  145. }
  146.  
  147. #ja-mainnav ul.menu ul {
  148. 	margin: 0; /* all lists */
  149. 	padding: 0;
  150. }
  151.  
  152. #ja-mainnav ul.menu li {
  153. 	margin: 0; /* all list items */
  154. 	padding: 0;
  155. 	float: left;
  156. 	display: block;
  157. 	background: none;
  158. 	cursor: pointer;
  159. 	position: relative;
  160. 	list-style: none;
  161. }
  162.  
  163. #ja-mainnav ul.menu li ul {
  164. 	width: 16.4em;
  165. 	position: absolute; /* second-level lists */
  166. 	z-index: 99;
  167. 	height: auto;
  168. 	w\idth: 15.9em;
  169. }
  170.  
  171. #ja-mainnav ul.menu li ul ul {
  172. 	margin: -1.5em 0 0 14em; /* third-and-above-level lists */
  173. }
  174.  
  175. #ja-mainnav ul.menu li li {
  176. 	padding: 0 1em 0 0;
  177. 	margin: 0;
  178. 	width: 14.9em;
  179. }
  180.  
  181. #ja-mainnav ul.menu ul a {
  182. 	width: 14.8em;
  183. 	w\idth: 10.8em;
  184. }
  185.  
  186. #ja-mainnav ul.menu li ul {
  187. 	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
  188. }
  189.  
  190. #ja-mainnav ul.menu li:hover ul ul, #ja-mainnav ul.menu li:hover ul ul ul,
  191. #ja-mainnav ul.menu li.sfhover ul ul, #ja-mainnav ul.menu li.parentsfhover ul ul, #ja-mainnav ul.menu li.parent-activesfhover ul ul, #ja-mainnav ul.menu li.activesfhover ul ul,
  192. #ja-mainnav ul.menu li.sfhover ul ul ul, #ja-mainnav ul.menu li.parentsfhover ul ul ul, #ja-mainnav ul.menu li.parent-activesfhover ul ul ul, #ja-mainnav ul.menu li.activesfhover ul ul ul {
  193. 	left: -999em;
  194. }
  195.  
  196. /* This "unhides" the sub-menus (left: -999em is what hides them) */
  197. #ja-mainnav ul.menu li:hover ul, #ja-mainnav ul.menu li li:hover ul, #ja-mainnav ul.menu li li li:hover ul,
  198. #ja-mainnav ul.menu li.sfhover ul, #ja-mainnav ul.menu li.parentsfhover ul, #ja-mainnav ul.menu li.parent-activesfhover ul, #ja-mainnav ul.menu li.activesfhover ul,
  199. #ja-mainnav ul.menu li li.sfhover ul, #ja-mainnav ul.menu li li.havesubchildsfhover ul, #ja-mainnav ul.menu li li.havesubchild-activesfhover ul, #ja-mainnav ul.menu li li.activesfhover ul,
  200. #ja-mainnav ul.menu li li li.sfhover ul, #ja-mainnav ul.menu li li li.havesubchildsfhover ul, #ja-mainnav ul.menu li li li.havesubchild-activesfhover ul, #ja-mainnav ul.menu li li li.activesfhover ul {
  201. 	left: auto;
  202. }
  203.  
  204. /* STYLING THE MENU
  205. -----------------------------------*/
  206. /* 1st level */
  207. #ja-mainnav ul.menu li a {
  208. 	margin: 0;
  209. 	padding: 10px 20px;
  210. 	border-left: 1px solid #555555;
  211. 	border-right: 1px solid #333333;
  212. 	display: block;
  213. 	color: #CCCCCC;
  214. 	font-weight: bold;
  215. 	line-height: normal;
  216. 	text-decoration: none;
  217. }
  218.  
  219. #ja-mainnav ul.menu li a:hover,
  220. #ja-mainnav ul.menu li a:active,
  221. #ja-mainnav ul.menu li a:focus {
  222. 	background: url(../images/arrow2.png) no-repeat bottom center #555555;
  223. 	color: #FFFFFF;
  224. }
  225.  
  226. #ja-mainnav ul.menu li {
  227. 	margin: 0;
  228. }
  229.  
  230. #ja-mainnav ul.menu li:hover,
  231. #ja-mainnav ul.menu li.sfhover,
  232. #ja-mainnav ul.menu li.parentsfhover,
  233. #ja-mainnav ul.menu li.parent-activesfhover {
  234. 	background: url(../images/arrow2.png) no-repeat bottom center #555555;
  235. 	color: #FFFFFF;
  236. }
  237.  
  238. #ja-mainnav ul.menu li.active a,
  239. #ja-mainnav ul.menu li.active a:hover,
  240. #ja-mainnav ul.menu li.active a:active,
  241. #ja-mainnav ul.menu li.active a:focus {
  242. 	background: url(../images/arrow2.png) no-repeat bottom center #333333;
  243. 	color: #FFFFFF;
  244. }
  245.  
  246. /* 2nd level and above */
  247. #ja-mainnav ul.menu li ul {
  248. 	border: 1px solid #555555;
  249. 	background: url(../images/opaque.png);
  250. }
  251.  
  252. #ja-mainnav ul.menu li ul li {
  253. 	border-top: 1px solid #777777;
  254. 	border-bottom: 1px solid #444444;
  255. 	background: none;
  256. }
  257.  
  258. #ja-mainnav ul.menu li ul a {
  259. 	border-right: none;
  260. 	margin: 0;
  261. 	padding: 7px 10px;
  262. 	background: none;
  263. 	color: #CCCCCC;
  264. 	font-weight: normal;
  265. 	line-height: normal;
  266. 	text-transform: none;
  267. }
  268.  
  269. #ja-mainnav ul.menu li.havesubchild,
  270. #ja-mainnav ul.menu li.havesubchild-active {
  271. 	background: url(../images/bullet2.gif) no-repeat 94% 50%;
  272. }
  273.  
  274. #ja-mainnav ul.menu li ul a:hover,
  275. #ja-mainnav ul.menu li ul a:active,
  276. #ja-mainnav ul.menu li ul a:focus,
  277. #ja-mainnav ul.menu ul li:hover,
  278. #ja-mainnav ul.menu ul li.sfhover,
  279. #ja-mainnav ul.menu ul li.havesubchildsfhover,
  280. #ja-mainnav ul.menu ul li.havesubchild-activesfhover,
  281. #ja-mainnav ul.menu ul ul li:hover,
  282. #ja-mainnav ul.menu ul ul li.sfhover,
  283. #ja-mainnav ul.menu ul ul li.havesubchildsfhover,
  284. #ja-mainnav ul.menu ul ul li.havesubchild-activesfhover {
  285. 	background: #333333;
  286. 	color: #CCCCCC;
  287. }
  288.  
  289. #ja-mainnav ul.menu ul li.active a,
  290. #ja-mainnav ul.menu ul li.active a:hover,
  291. #ja-mainnav ul.menu ul li.active a:active,
  292. #ja-mainnav ul.menu ul li.active a:focus {
  293. 	background: none !important;
  294. 	color: #FFFFFF;
  295. 	font-weight: bold;
  296. }
  297.  
  298. #ja-mainnav ul.menu li.active li a,
  299. #ja-mainnav ul.menu li.active li a:hover,
  300. #ja-mainnav ul.menu li.active li a:active,
  301. #ja-mainnav ul.menu li.active li a:focus {
  302. 	background: none !important;
  303. }
  304.  
  305. #ja-mainnav h3 {
  306. 	display: none;
  307. }
  308.  
  309. #ja-mainnav .moduletable_menu {
  310. 	background: none;
  311. 	margin: 0;
  312. 	padding: 0;
  313. }

ja_purity/css/template.css

  1. /* Clearfix */
  2. .clearfix:after {
  3. 	clear: both;
  4. 	display: block;
  5. 	content: ".";
  6. 	height: 0;
  7. 	visibility: hidden;
  8. }
  9.  
  10. * html > body .clearfix {
  11. 	width: 100%;
  12. 	display: block;
  13. }
  14.  
  15. * html .clearfix {
  16. 	height: 1%;
  17. }

Pliki obrazków

Pliki Javascript

ja_purity/js/ja.cssmenu.js

  1. sfHover = function() {
  2. 	var sfEls = document.getElementById("ja-mainnav").getElementsByTagName("li");
  3. 	for (var i=0; i<sfEls.length; ++i) {
  4. 		sfEls[i].onmouseover=function() {
  5. 			clearTimeout(this.timer);
  6. 			if(this.className.indexOf(" sfhover") == -1)
  7. 				this.className+=" sfhover";
  8. 		}
  9. 		sfEls[i].onmouseout=function() {
  10. 			this.timer = setTimeout(sfHoverOut.bind(this), 20);
  11. 		}
  12. 	}
  13. }
  14.  
  15. function sfHoverOut() {
  16. 	clearTimeout(this.timer);
  17. 	this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
  18. }
  19.  
  20. if (window.attachEvent) window.attachEvent("onload", sfHover);

ja_purity/js/ja.moomenu.js

  1. if (typeof(MooTools) != 'undefined'){
  2.  
  3. 		var subnav = new Array();
  4.  
  5. 		Element.extend(
  6. 		{
  7. 			hide: function(timeout)
  8. 			{
  9. 				this.status = 'hide';
  10. 				clearTimeout (this.timeout);
  11. 				if (timeout)
  12. 				{
  13. 					this.timeout = setTimeout (this.anim.bind(this), timeout);
  14. 				}else{
  15. 					this.anim();
  16. 				}
  17. 			},
  18.  
  19. 			show: function(timeout)
  20. 			{
  21. 				this.status = 'show';
  22. 				clearTimeout (this.timeout);
  23. 				if (timeout)
  24. 				{
  25. 					this.timeout = setTimeout (this.anim.bind(this), timeout);
  26. 				}else{
  27. 					this.anim();
  28. 				}
  29. 			},
  30.  
  31. 			setActive: function () {
  32. 				//this.addClass(classname);
  33. 				this.className+='sfhover';
  34. 				/*
  35. 				for(var i=0;i<this.childNodes.length; i++) {
  36. 					if(this.childNodes[i].nodeName.toLowerCase() == 'a') {
  37. 						//$(this.childNodes[i]).addClass(classname);
  38. 						$(this.childNodes[i]).setActive();
  39. 						return;
  40. 					}
  41. 				}
  42. 				*/
  43. 			},
  44.  
  45. 			setDeactive: function () {
  46. 				//this.removeClass(classname);
  47. 				this.className=this.className.replace(new RegExp("sfhover\\b"), "");
  48. 				/*
  49. 				for(var i=0;i<this.childNodes.length; i++) {
  50. 					if(this.childNodes[i].nodeName.toLowerCase() == 'a') {
  51. 						$(this.childNodes[i]).setDeactive();
  52. 						return;
  53. 					}
  54. 				}
  55. 				*/
  56. 			},
  57.  
  58. 			anim: function() {
  59. 				if ((this.status == 'hide' && this.style.left != 'auto') || (this.status == 'show' && this.style.left == 'auto' && !this.hidding)) return;
  60. 				this.setStyle('overflow', 'hidden');
  61. 				if (this.status == 'show') {
  62. 					this.hidding = 0;
  63. 					this.hideAll();
  64. 					//this.parentNode.setActive();
  65. 				} else {
  66. 					//this.parentNode.setDeactive();
  67. 				}
  68.  
  69. 				if (this.status == 'hide')
  70. 				{
  71. 					this.hidding = 1;
  72. 					//this.myFx1.stop();
  73. 					this.myFx2.stop();
  74. 					//this.myFx1.start(1,0);
  75. 					if (this.parent._id) this.myFx2.start(this.offsetWidth,0);
  76. 					else this.myFx2.start(this.offsetHeight,0);
  77. 				} else {
  78. 					this.setStyle('left', 'auto');
  79. 					//this.myFx1.stop();
  80. 					this.myFx2.stop();
  81. 					//this.myFx1.start(0,1);
  82. 					if (this.parent._id) this.myFx2.start(0,this.mw);
  83. 					else this.myFx2.start(0,this.mh);
  84. 				}
  85. 			},
  86.  
  87. 			init: function() {
  88. 				this.mw = this.clientWidth;
  89. 				this.mh = this.clientHeight;
  90. 				//this.myFx1 = new Fx.Style(this, 'opacity');
  91. 				//this.myFx1.set(0);
  92. 				if (this.parent._id)
  93. 				{
  94. 					this.myFx2 = new Fx.Style(this, 'width', {duration: 300});
  95. 					this.myFx2.set(0);
  96. 				}else{
  97. 					this.myFx2 = new Fx.Style(this, 'height', {duration: 300});
  98. 					this.myFx2.set(0);
  99. 				}
  100. 				this.setStyle('left', '-999em');
  101. 				animComp = function(){
  102. 					if (this.status == 'hide')
  103. 					{
  104. 						this.setStyle('left', '-999em');
  105. 						this.hidding = 0;
  106. 					}
  107. 					this.setStyle('overflow', '');
  108. 				}
  109. 				this.myFx2.addEvent ('onComplete', animComp.bind(this));
  110. 			},
  111.  
  112. 			hideAll: function() {
  113. 				for(var i=0;i<subnav.length; i++) {
  114. 					if (!this.isChild(subnav[i]))
  115. 					{
  116. 						subnav[i].hide(0);
  117. 					}
  118. 				}
  119. 			},
  120.  
  121. 			isChild: function(_obj) {
  122. 				obj = this;
  123. 				while (obj.parent)
  124. 				{
  125. 					if (obj._id == _obj._id)
  126. 					{
  127. 						//alert(_obj._id);
  128. 						return true;
  129. 					}
  130. 					obj = obj.parent;
  131. 				}
  132. 				return false;
  133. 			}
  134.  
  135.  
  136. 		});
  137.  
  138.  
  139. 		var DropdownMenu = new Class({
  140. 			initialize: function(element)
  141. 			{
  142. 				//$(element).mh = 0;
  143. 				$A($(element).childNodes).each(function(el)
  144. 				{
  145. 					if(el.nodeName.toLowerCase() == 'li')
  146. 					{
  147. 						//if($(element)._id) $(element).mh += 30;
  148. 						$A($(el).childNodes).each(function(el2)
  149. 						{
  150. 							if(el2.nodeName.toLowerCase() == 'ul')
  151. 							{
  152. 								$(el2)._id = subnav.length+1;
  153. 								$(el2).parent = $(element);
  154. 								subnav.push ($(el2));
  155. 								el2.init();
  156. 								el.addEvent('mouseover', function()
  157. 								{
  158. 									el.setActive();
  159. 									el2.show(0);
  160. 									return false;
  161. 								});
  162.  
  163. 								el.addEvent('mouseout', function()
  164. 								{
  165. 									el.setDeactive();
  166. 									el2.hide(20);
  167. 								});
  168. 								new DropdownMenu(el2);
  169. 								el.hasSub = 1;
  170. 							}
  171. 						});
  172. 						if (!el.hasSub)
  173. 						{
  174. 							el.addEvent('mouseover', function()
  175. 							{
  176. 								el.setActive();
  177. 								return false;
  178. 							});
  179.  
  180. 							el.addEvent('mouseout', function()
  181. 							{
  182. 								el.setDeactive();
  183. 							});
  184. 						}
  185. 					}
  186. 				});
  187. 				return this;
  188. 			}
  189. 		});
  190.  
  191. 		Window.onDomReady(function() {new DropdownMenu($E('#ja-mainnav ul.menu'))});
  192.  
  193. 	}else {
  194.  
  195. 		sfHover = function() {
  196. 		var sfEls = document.getElementById("ja-mainnav").getElementsByTagName("li");
  197. 		for (var i=0; i<sfEls.length; ++i) {
  198. 			sfEls[i].onmouseover=function() {
  199. 				this.className+="sfhover";
  200. 			}
  201. 			sfEls[i].onmouseout=function() {
  202. 				this.className=this.className.replace(new RegExp("sfhover\\b"), "");
  203. 			}
  204. 		}
  205. 	}
  206. 	if (window.attachEvent) window.attachEvent("onload", sfHover);
  207. }


ja_purity/js/ja.cssmenu.js

  1.  

Dziękujemy za wkład

» Stefan Wajda [zwiastun],

Źródło „http://wiki.joomla.pl/index.php?title=JA_Purity/Nawigacja_pozioma&oldid=21261