--=REKLAMA=--
(→Pliki CSS) |
(Brak różnic)
|
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
<!-- BEGIN: MAIN NAVIGATION -->
<?php if ($this->countModules('hornav')): ?>
<div id="ja-mainnavwrap">
<div id="ja-mainnav" class="clearfix">
<jdoc:include type="modules" name="hornav" />
</div>
</div>
<?php endif; ?>
<!-- END: MAIN NAVIGATION -->
/* Son of Suckerfish Dropdowns
---------------------------------------------------------
Originally developed by Patrick Griffiths and Dan Webb
http://www.htmldog.com/articles/suckerfish/dropdowns/
---------------------------------------------------------
NOTE: After a deep research, we decide to divide this
CSS into 2 parts. The first part will define the layout.
The second part will define the visual look for this menu.
---------------------------------------------------------*/
/*--------------------------- LAYOUT ----------------------------*/
#ja-mainnav, #ja-mainnav ul {
padding: 0;
margin: 0;
line-height: 20px;
}
#ja-mainnav a {
display: block;
line-height: 20px;
margin: 0;
padding: 10px 20px;
}
#ja-mainnav li { /* all list items */
float: left;
margin: 0;
padding: 0;
}
#ja-mainnav li ul { /* second-level lists */
position: absolute;
width: 202px;
/*
* Using left instead of display to hide menus because display: none isn't
* read by screen readers
*/
left: -999em;
}
#ja-mainnav ul ul a { /* sub-links */
width: 160px;
}
#ja-mainnav li ul ul { /* third-and-above-level lists */
margin: -42px 0 0 200px;
}
#ja-mainnav li:hover ul ul,
#ja-mainnav li:hover ul ul ul,
#ja-mainnav li.sfhover ul ul,
#ja-mainnav li.sfhover ul ul ul {
left: -999em;
}
#ja-mainnav li:hover ul,
#ja-mainnav li li:hover ul,
#ja-mainnav li li li:hover ul,
#ja-mainnav li.sfhover ul,
#ja-mainnav li li.sfhover ul,
#ja-mainnav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
/*--------------------------- VISUAL ----------------------------*/
/* -------- All levels -------- */
#ja-mainnavwrap {
border-top: 1px solid #666666;
background: #444444;
}
#ja-mainnav ul, #ja-mainnav li {
background-image: none;
list-style: none;
}
#ja-mainnav span.separator {
display:none;
}
/* -------- Top level -------- */
#ja-mainnav > ul {
background-color: #444444;
padding-left: 20px;
}
#ja-mainnav > ul > li {
background-color: #444444;
border-left: 1px solid #666666;
border-right: 1px solid #333333;
margin-right: 1px;
}
#ja-mainnav > ul > li.active {
background: url(../images/arrow2.png) no-repeat bottom center #444444;
color: #CCCCCC;
}
#ja-mainnav > ul > li:hover,
#ja-mainnav > ul > li:active,
#ja-mainnav > ul > li:focus {
background: url(../images/arrow2.png) no-repeat bottom center #555555;
color: #FFFFFF;
}
/* -------- sub-levels -------- */
#ja-mainnav ul ul li {
border-left: 1px solid #666666;
border-right: 1px solid #333333;
border-top: 1px solid #666666;
border-bottom: 1px solid #333333;
margin-bottom: 1px;
}
#ja-mainnav li ul { /* second-level lists */
background-color: #555555;
}
#ja-mainnav li a {
color: #CCCCCC;
font-weight: bold;
text-decoration: none;
}
#ja-mainnav ul ul li:hover,
#ja-mainnav ul ul li:active,
#ja-mainnav ul ul li:focus {
background: #444444;
color: #FFFFFF;
}
/*old css*/
/* Son of Suckerfish Dropdowns
---------------------------------------------------------
Originally developed by Patrick Griffiths and Dan Webb
http://www.htmldog.com/articles/suckerfish/dropdowns/
---------------------------------------------------------
NOTE: After a deep research, we decide to divide this
CSS into 2 parts. The first part will define the layout.
The second part will define the visual look for this menu.
---------------------------------------------------------*/
#ja-mainnav ul.menu {
margin: 0; /* all lists */
padding: 0;
float: left;
border-right: 1px solid #555555;
}
#ja-mainnav ul.menu ul {
margin: 0; /* all lists */
padding: 0;
}
#ja-mainnav ul.menu li {
margin: 0; /* all list items */
padding: 0;
float: left;
display: block;
background: none;
cursor: pointer;
position: relative;
list-style: none;
}
#ja-mainnav ul.menu li ul {
width: 16.4em;
position: absolute; /* second-level lists */
z-index: 99;
height: auto;
w\idth: 15.9em;
}
#ja-mainnav ul.menu li ul ul {
margin: -1.5em 0 0 14em; /* third-and-above-level lists */
}
#ja-mainnav ul.menu li li {
padding: 0 1em 0 0;
margin: 0;
width: 14.9em;
}
#ja-mainnav ul.menu ul a {
width: 14.8em;
w\idth: 10.8em;
}
#ja-mainnav ul.menu li ul {
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
#ja-mainnav ul.menu li:hover ul ul, #ja-mainnav ul.menu li:hover ul ul ul,
#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,
#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 {
left: -999em;
}
/* This "unhides" the sub-menus (left: -999em is what hides them) */
#ja-mainnav ul.menu li:hover ul, #ja-mainnav ul.menu li li:hover ul, #ja-mainnav ul.menu li li li:hover ul,
#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,
#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,
#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 {
left: auto;
}
/* STYLING THE MENU
-----------------------------------*/
/* 1st level */
#ja-mainnav ul.menu li a {
margin: 0;
padding: 10px 20px;
border-left: 1px solid #555555;
border-right: 1px solid #333333;
display: block;
color: #CCCCCC;
font-weight: bold;
line-height: normal;
text-decoration: none;
}
#ja-mainnav ul.menu li a:hover,
#ja-mainnav ul.menu li a:active,
#ja-mainnav ul.menu li a:focus {
background: url(../images/arrow2.png) no-repeat bottom center #555555;
color: #FFFFFF;
}
#ja-mainnav ul.menu li {
margin: 0;
}
#ja-mainnav ul.menu li:hover,
#ja-mainnav ul.menu li.sfhover,
#ja-mainnav ul.menu li.parentsfhover,
#ja-mainnav ul.menu li.parent-activesfhover {
background: url(../images/arrow2.png) no-repeat bottom center #555555;
color: #FFFFFF;
}
#ja-mainnav ul.menu li.active a,
#ja-mainnav ul.menu li.active a:hover,
#ja-mainnav ul.menu li.active a:active,
#ja-mainnav ul.menu li.active a:focus {
background: url(../images/arrow2.png) no-repeat bottom center #333333;
color: #FFFFFF;
}
/* 2nd level and above */
#ja-mainnav ul.menu li ul {
border: 1px solid #555555;
background: url(../images/opaque.png);
}
#ja-mainnav ul.menu li ul li {
border-top: 1px solid #777777;
border-bottom: 1px solid #444444;
background: none;
}
#ja-mainnav ul.menu li ul a {
border-right: none;
margin: 0;
padding: 7px 10px;
background: none;
color: #CCCCCC;
font-weight: normal;
line-height: normal;
text-transform: none;
}
#ja-mainnav ul.menu li.havesubchild,
#ja-mainnav ul.menu li.havesubchild-active {
background: url(../images/bullet2.gif) no-repeat 94% 50%;
}
#ja-mainnav ul.menu li ul a:hover,
#ja-mainnav ul.menu li ul a:active,
#ja-mainnav ul.menu li ul a:focus,
#ja-mainnav ul.menu ul li:hover,
#ja-mainnav ul.menu ul li.sfhover,
#ja-mainnav ul.menu ul li.havesubchildsfhover,
#ja-mainnav ul.menu ul li.havesubchild-activesfhover,
#ja-mainnav ul.menu ul ul li:hover,
#ja-mainnav ul.menu ul ul li.sfhover,
#ja-mainnav ul.menu ul ul li.havesubchildsfhover,
#ja-mainnav ul.menu ul ul li.havesubchild-activesfhover {
background: #333333;
color: #CCCCCC;
}
#ja-mainnav ul.menu ul li.active a,
#ja-mainnav ul.menu ul li.active a:hover,
#ja-mainnav ul.menu ul li.active a:active,
#ja-mainnav ul.menu ul li.active a:focus {
background: none !important;
color: #FFFFFF;
font-weight: bold;
}
#ja-mainnav ul.menu li.active li a,
#ja-mainnav ul.menu li.active li a:hover,
#ja-mainnav ul.menu li.active li a:active,
#ja-mainnav ul.menu li.active li a:focus {
background: none !important;
}
#ja-mainnav h3 {
display: none;
}
#ja-mainnav .moduletable_menu {
background: none;
margin: 0;
padding: 0;
}
/* Clearfix */
.clearfix:after {
clear: both;
display: block;
content: ".";
height: 0;
visibility: hidden;
}
* html > body .clearfix {
width: 100%;
display: block;
}
* html .clearfix {
height: 1%;
}
sfHover = function() {
var sfEls = document.getElementById("ja-mainnav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; ++i) {
sfEls[i].onmouseover=function() {
clearTimeout(this.timer);
if(this.className.indexOf(" sfhover") == -1)
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.timer = setTimeout(sfHoverOut.bind(this), 20);
}
}
}
function sfHoverOut() {
clearTimeout(this.timer);
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
if (typeof(MooTools) != 'undefined'){
var subnav = new Array();
Element.extend(
{
hide: function(timeout)
{
this.status = 'hide';
clearTimeout (this.timeout);
if (timeout)
{
this.timeout = setTimeout (this.anim.bind(this), timeout);
}else{
this.anim();
}
},
show: function(timeout)
{
this.status = 'show';
clearTimeout (this.timeout);
if (timeout)
{
this.timeout = setTimeout (this.anim.bind(this), timeout);
}else{
this.anim();
}
},
setActive: function () {
//this.addClass(classname);
this.className+='sfhover';
/*
for(var i=0;i<this.childNodes.length; i++) {
if(this.childNodes[i].nodeName.toLowerCase() == 'a') {
//$(this.childNodes[i]).addClass(classname);
$(this.childNodes[i]).setActive();
return;
}
}
*/
},
setDeactive: function () {
//this.removeClass(classname);
this.className=this.className.replace(new RegExp("sfhover\\b"), "");
/*
for(var i=0;i<this.childNodes.length; i++) {
if(this.childNodes[i].nodeName.toLowerCase() == 'a') {
$(this.childNodes[i]).setDeactive();
return;
}
}
*/
},
anim: function() {
if ((this.status == 'hide' && this.style.left != 'auto') || (this.status == 'show' && this.style.left == 'auto' && !this.hidding)) return;
this.setStyle('overflow', 'hidden');
if (this.status == 'show') {
this.hidding = 0;
this.hideAll();
//this.parentNode.setActive();
} else {
//this.parentNode.setDeactive();
}
if (this.status == 'hide')
{
this.hidding = 1;
//this.myFx1.stop();
this.myFx2.stop();
//this.myFx1.start(1,0);
if (this.parent._id) this.myFx2.start(this.offsetWidth,0);
else this.myFx2.start(this.offsetHeight,0);
} else {
this.setStyle('left', 'auto');
//this.myFx1.stop();
this.myFx2.stop();
//this.myFx1.start(0,1);
if (this.parent._id) this.myFx2.start(0,this.mw);
else this.myFx2.start(0,this.mh);
}
},
init: function() {
this.mw = this.clientWidth;
this.mh = this.clientHeight;
//this.myFx1 = new Fx.Style(this, 'opacity');
//this.myFx1.set(0);
if (this.parent._id)
{
this.myFx2 = new Fx.Style(this, 'width', {duration: 300});
this.myFx2.set(0);
}else{
this.myFx2 = new Fx.Style(this, 'height', {duration: 300});
this.myFx2.set(0);
}
this.setStyle('left', '-999em');
animComp = function(){
if (this.status == 'hide')
{
this.setStyle('left', '-999em');
this.hidding = 0;
}
this.setStyle('overflow', '');
}
this.myFx2.addEvent ('onComplete', animComp.bind(this));
},
hideAll: function() {
for(var i=0;i<subnav.length; i++) {
if (!this.isChild(subnav[i]))
{
subnav[i].hide(0);
}
}
},
isChild: function(_obj) {
obj = this;
while (obj.parent)
{
if (obj._id == _obj._id)
{
//alert(_obj._id);
return true;
}
obj = obj.parent;
}
return false;
}
});
var DropdownMenu = new Class({
initialize: function(element)
{
//$(element).mh = 0;
$A($(element).childNodes).each(function(el)
{
if(el.nodeName.toLowerCase() == 'li')
{
//if($(element)._id) $(element).mh += 30;
$A($(el).childNodes).each(function(el2)
{
if(el2.nodeName.toLowerCase() == 'ul')
{
$(el2)._id = subnav.length+1;
$(el2).parent = $(element);
subnav.push ($(el2));
el2.init();
el.addEvent('mouseover', function()
{
el.setActive();
el2.show(0);
return false;
});
el.addEvent('mouseout', function()
{
el.setDeactive();
el2.hide(20);
});
new DropdownMenu(el2);
el.hasSub = 1;
}
});
if (!el.hasSub)
{
el.addEvent('mouseover', function()
{
el.setActive();
return false;
});
el.addEvent('mouseout', function()
{
el.setDeactive();
});
}
}
});
return this;
}
});
Window.onDomReady(function() {new DropdownMenu($E('#ja-mainnav ul.menu'))});
}else {
sfHover = function() {
var sfEls = document.getElementById("ja-mainnav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; ++i) {
sfEls[i].onmouseover=function() {
this.className+="sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
}