قم بإنشاء قائمة منسدلة باستخدام جافا سكريبت وسي إس إس
تعليمات خطوة بخطوة حول كيفية إنشاء قائمة تنقل بسيطة لأسفل wiki الخاص بك دون كتابة أكواد javascript و css دقيقه. |
---|
المتطلبات
المقدرة على تغيير MediaWiki:Common.js و MediaWiki:Monobook.css
كود Common.js
/* Any JavaScript here will be loaded for all users on every page load. */
function ddm() {
// Variables, change these in case you need to set other class names (mmhide_ for
// contribute users for example)
var parentClass = 'isParent'; //gets applied when the LI has a nested UL
var activeParentClass = 'isActive'; //gets applied when the nested UL is visible
var preventHoverClass = 'nohover'; //denotes a navigation that should not get any hover effects
var indicateJSClass = 'dhtml'; //gets applied to the main navigation when JavaScript is available
var toHideClass = 'hiddenChild'; //gets applied to hide the nested UL
var toShowClass = 'shownChild'; //gets applied to show the nested UL
var currentClass = 'current'; //denotes the current active sub element and prevents collapsing
var d = document.getElementById('nav'); //denotes the navigation element
// if DOM is not available stop right here.
if (!document.getElementById && !document.createTextNode) {
return;
}
// if the navigation element is available, apply the class denoting DHTML capabilities
if (d) {
d.className += d.className == '' ? indicateJSClass : ' ' + indicateJSClass;
var lis, i, firstUL, j, apply;
// loop through all LIs and check which ones have a nested UL
lis = d.getElementsByTagName('li');
for (i = 0; i < lis.length; i++) {
firstUL = lis[i].getElementsByTagName('ul')[0];
// if there is a nested UL, deactivate the first nested link and apply the class to show
// there is a nested list
if (firstUL) {
lis[i].childNodes[0].onclick = function() {
return false;
};
lis[i].className += lis[i].className == '' ? parentClass : ' ' + parentClass;
// check if there is a "current" element
apply = true;
if (new RegExp('\\b' + currentClass + '\\b').test(lis[i].className)) {
apply = false;
}
if (apply) {
for (j = 0; j < firstUL.getElementsByTagName('li').length; j++) {
if (new RegExp('\\b' + currentClass + '\\b').test(firstUL.getElementsByTagName('li')[j].className)) {
apply = false;
break;
}
}
}
// if there is no current element, apply the class to hide the nested list
if (apply) {
firstUL.className += firstUL.className == '' ? toHideClass : ' ' + toHideClass;
// check if there is a class to prevent hover effects and only apply the function
// onclick if that is the case, otherwise apply it onclick and onhover
if (new RegExp('\\b' + preventHoverClass + '\\b').test(d.className)) {
lis[i].onclick = function() {
doddm(this);
};
} else {
lis[i].onclick = function() {
doddm(this);
};
lis[i].onmouseover = function() {
doddm(this);
};
lis[i].onmouseout = function() {
doddm(null);
};
}
// if there is a current element, define the list as being kept open and apply the
// classes to show the nested list and define the parent LI as an active one
} else {
lis[i].keepopen = 1;
firstUL.className += firstUL.className == '' ? toShowClass : ' ' + toShowClass;
lis[i].className = lis[i].className.replace(parentClass, activeParentClass);
}
}
}
}
// function to show and hide the nested lists and add the classes to the parent LIs
function doddm(o) {
var childUL, isobj, swap;
// loop through all LIs of the navigation
lis = d.getElementsByTagName('li');
for (i = 0; i < lis.length; i++) {
isobj = lis[i] == o;
// function to exchange class names in an object
swap = function(tmpobj, tmporg, tmprep) {
tmpobj.className = tmpobj.className.replace(tmporg, tmprep);
};
// if the current LI does not have an indicator to be kept visible
if (!lis[i].keepopen) {
childUL = lis[i].getElementsByTagName('ul')[0];
// check if there is a nested UL and if the current LI is not the one clicked on
// and exchange the classes accordingly (ie. hide all other nested lists and
// make the LIs parent rather than active.
if (childUL) {
if (new RegExp('\\b' + preventHoverClass + '\\b').test(d.className)) {
if (new RegExp('\\b' + activeParentClass + '\\b').test(lis[i].className)) {
swap(childUL, isobj ? toShowClass : toHideClass, isobj ? toHideClass : toShowClass);
swap(lis[i], isobj ? activeParentClass : parentClass, isobj ? parentClass : activeParentClass);
} else {
swap(childUL, isobj ? toHideClass : toShowClass, isobj ? toShowClass : toHideClass);
swap(lis[i], isobj ? parentClass : activeParentClass, isobj ? activeParentClass : parentClass);
}
} else {
swap(childUL, isobj ? toHideClass : toShowClass, isobj ? toShowClass : toHideClass);
swap(lis[i], isobj ? parentClass : activeParentClass, isobj ? activeParentClass : parentClass);
}
}
}
}
}
}
window.onload = function() {
ddm();
// add other functions to be called onload below
};
Monobook.css
/*Main Line Not Just Link Margin - From left Side*/
ul#nav {
margin: 3px;
padding: 2px;
list-style-type: none;
border: none;
background: #fff;
width: auto;
}
/*Drop Menu Line Colors that "flash" to load Menu*/
ul#nav li ul {
background: #fff;
margin: 0px;
padding: 5px;
width: auto;
}
ul#nav li {
position: relative;
margin: 5px;
width: auto;
padding: 5px;
list-style-type: none;
background: #333;
color: #333;
line-height: 150%;
}
/*Main Link Font Color and "loading border" set to fff for invisibility*/
ul#nav a {
border: 1px solid #fff;
color: #333;
text-decoration: none;
display: block;
}
/*Mouse over option text color*/
ul#nav a:hover {
border: 1px inset #333;
background: #333;
color: #333;
}
/*Color of Text option drop down without mouse on them.*/
ul#nav li li a {
padding-left: 1em;
color: #006AFF;
text-decoration: none;
display: block;
}
ul#nav li li a:hover {
background: #cef;
}
/* DDM relative dropdown example */
.hiddenChild {
position: absolute;
left: -999em;
}
.shownChild {
left: -1px;
}
p {
clear: both;
float: none;
}
/*Parent initial border information white fff set to hide "optional options area"*/
ul#nav.dhtml {
list-style-image: none;
display: block;
position: relative;
width: auto;
border: 2px solid #fff;
background: #333;
margin: 2px;
padding: 2px;
list-style-type: none;
height: 1.5em;
}
/*WIDTH IS TOP OPTION WIDTH. (OPTION WIDTH - 1)*/
ul#nav.dhtml li {
position: relative;
float: left;
width: 9em;
border-right: 1px solid #333;
border-top: 1px solid #333;
border-left: 1px solid #333;
border-bottom: 1px solid #333;
}
/*Initial background color of options with mouse hovered over main link*/
ul#nav.dhtml ul {
list-style-image: none;
display: block;
top: 1.5em;
position: absolute;
border-top: 1px solid #333;
border-right: 1px solid #333;
border-left: 1px solid #333;
background: #333;
width: auto;
z-index: 10;
}
ul#nav.dhtml li a,
ul#nav.dhtml li a:hover {
border: none;
background: #333;
}
ul#nav.dhtml li a {
padding: 0 .5em;
background: #333;
}
/*Options background color when main category is highlighted with mouse and options not selected WIDTH IS OPTIONS WIDTH*/
ul#nav.dhtml ul li {
border: none;
width: 9em;
background: #fff;
}
/*No Mouse On Main Link Background*/
ul#nav.dhtml li.isParent {
background: #cef;
}
/*Yes Mouse On Main Link Background*/
ul#nav.dhtml li.isActive {
background: #fff;
}
ul#nav.dhtml li.isActive a {
background: #cef;
}
ul#nav.dhtml li.isActive ul a {
padding: 0 .5em;
}
ul#nav.dhtml a:hover {
background: #333;
}
ul#nav.dhtml li.isParent a:hover {
background: #333;
}
ul#nav.dhtml li.isActive ul a:hover {
background: #333;
}
كود/ قائمة/ القائمة المستخدمة في مثال Wiki
<ul id="nav">
<li><span class="plainlinks">'''[[PageLinkLocated|NameofLink]]'''</span>
<ul>
<li><span class="plainlinks">'''[[Option1]]'''</span></li>
<li><span class="plainlinks">'''[[Option2]]'''</span></li>
<li><span class="plainlinks">'''[[Option3]]'''</span></li>
<li><span class="plainlinks">'''[[Option4]]'''</span></li>
<li><span class="plainlinks">'''[[Option5]]'''</span></li>
</ul>
</li>
</ul>
وبالتالي إنشاء قائمة خيارات فعاله بالكامل في موقع محدد.
مثال للكود:
<ul id="nav">
<li><span class="plainlinks">'''[[Main_Page|Shortcuts]]'''</span>
<ul>
<li><span class="plainlinks">'''[[Carnivores]]'''</span></li>
<li><span class="plainlinks">'''[[Herbivores]]'''</span></li>
<li><span class="plainlinks">'''[[Reptiles]]'''</span></li>
<li><span class="plainlinks">'''[[Amphibians]]'''</span></li>
<li><span class="plainlinks">'''[[Mammals]]'''</span></li>
</ul>
</li>
</ul>
مراجع
YADM | http://www.onlinetools.org/tools/yadm/ |
دعم منتدى نقاشات WikiMedia | http://www.mwusers.com/forums |
دعم مدرسة اكواد CSS | http://www.w3schools.com/Css/default.asp |