Créer une liste déroulante en utilisant JavaScript et CSS
Explications étape par étape pour faire une liste déroulante pour votre wiki sans passer par les habillages et en utilisant seulement Javascript et CSS. |
---|
Exigences
La possibilité de changer votre MediaWiki:Common.js et MediaWiki:Monobook.css
Code 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;
}
Code/Menu/Liste utilisé dans Wiki Exemple
<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>
Créant ainsi une liste déroulante fonctionnelle à l'endroit désiré
Code d'exemple :
<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>
Références
YADM | http://www.onlinetools.org/tools/yadm/ |
Forums de support WikiMedia | http://www.mwusers.com/forums |
Code CSS de Support Scolaire | http://www.w3schools.com/Css/default.asp |