Antwort #15 am: 27. Juli 2012, 11:57:52
mouseover funktioniert schon mal
allerdings border-top nicht
var topmenu = function () {
// For the six color variables below, you can set one color for all menu tabs, or specify a list of colors for each menu tab.
var fontColors = ["#FFFFFF"];
var fontHoverColors = ["#FFFFFF"];
var borderColors = ["#D43C00", "#74A824", "#D12E2E", "#CC8300", "#0D507A", "#CC33CC", "#8B6846", "#AA9311"];
var borderHoverColors = ["#D43C00", "#74A824", "#D12E2E", "#CC8300", "#0D507A", "#CC33CC", "#8B6846", "#AA9311"];
var bgColors = ["none", "none", "none", "none", "none", "none", "none", "none"];
var bgHoverColors = ["#D43C00", "#74A824", "#D12E2E", "#CC8300", "#0D507A", "#CC33CC", "#8B6846", "#AA9311"];
var hrefArr = [];
return {
initMenu: function () {
// Wenn ein Treffer mehrfach benötigt wird, speichert man das Objekt
// lieber in einer Variable, dann muss JavaScript nicht jedes Mal
// aufs Neue suchen
var m = $('#topm');
// Existiert ein Topmenü?
if (!m.length)
return;
// Breite des Menüs festlegen
m.attr('style', 'width: '+m.find('ul:first').outerWidth()+'px');
// Splitten der Links
var lis = m.find('> ul > li'); // Dito für Performance
var others = lis.find('> a[class!="Current"][class!="CurrentParent"]');
var current = lis.find('> a[class^="Current"]');
// Alle hrefs speichern für später
lis.find('> a').each(function(idx) {
hrefArr[idx] = $(this).attr('href');
});
// Mouseover Funktionen
others.mouseover(function() {
topmenu.setColors($(this), true);
}).mouseout(function() {
topmenu.setColors($(this), false);
});
// Topmenü einfärben
topmenu.setColors(current, true);
topmenu.setColors(others, false);
},
setColors: function (tagobj, hover) {
tagobj.each(function() {
var curPos = $(this);
// Position der Farbewerte ermitteln mittels des href
i = $.inArray(curPos.attr('href'), hrefArr);
// Wenn es keinen Treffer gab, zum nächsten iterieren
if (i === -1)
return true;
setStyle = '';
if (hover) {
setStyle += 'color: ' + (typeof fontHoverColors[i] != 'undefined' ? fontHoverColors[i] : fontHoverColors[0]) + ';';
setStyle += ' borderTop: solid 10px ' + (typeof borderHoverColors[i] != 'undefined' ? borderHoverColors[i] : borderHoverColors[0]) + ';';
setStyle += ' background: ' + (typeof bgHoverColors[i] != 'undefined' ? bgHoverColors[i] : bgHoverColors[0]) + ';';
}
else {
setStyle += 'color: ' + (typeof fontColors[i] != 'undefined' ? fontColors[i] : fontColors[0]) + ';';
setStyle += ' borderTop: solid 10px ' + (typeof borderHoverColors[i] != 'undefined' ? borderColors[i] : borderColors[0]) + ';';
setStyle += ' background: ' + (typeof bgHoverColors[i] != 'undefined' ? bgColors[i] : bgColors[0]) + ';';
}
// Farbstyle setzen
curPos.attr('style', setStyle);
});
}
};
} ();
// OnLoad Funktion
$(function() {
topmenu.initMenu();
});