Supportnet Computer
Planet of Tech

Supportnet / Forum / Skripte(PHP,ASP,Perl...)

Javascript Menu Farbe





Frage

Hallo habe ein JavaScript Menu auf meiner Page (horizontal). hier ein bild um das ganze ein wenig anschaulicher zu machen: [URL=http://imageshack.us][IMG]http://img99.imageshack.us/img99/6858/menufehlertk2.jpg[/IMG][/URL] nun möchte ich dass wenn ich auf "internet stuff" fahre, dass da die Farbe Orange erscheint und nicht grau... (Grundfarbe des Menus ist grau, Rollover dunkel orange, untermneus orange) habe bereits alle hex farben einmal ausgewechselt und geschaut was passiert... hat aber zu keinem Resultat geführt.... wie mach ich dass, Internet Stuff nicht grau wird wenn ich vom Button wegfahre (orange)? Gruss MIke

Antwort 1 von G-Styler

sorry.. anscheinend geht das hier nicht mit bilder anzeigen =) hier nochmal der link zum bild:

Klikce hier um zum Bild zu gelangen

Antwort 2 von rfb

Quellcode oder ein Link zur betreffenden Seite wäre sinnvoller!
So kann ich doch nicht sehen, wie das Script funktioniert. Wenn du wissen willst, warum dein Automotor stottert, bringst du doch wohl auch kein Foto in die Werkstatt, oder?

Antwort 3 von G-Styler

lol =) ja stimmt

habs nicht reingestellt weils ziemlich n brocken ist...

also hier das script:

<script type="text/javascript">
<!--
var currentMenu = null;
var lastMenuStarter = null;
var mytimer = null;
var timerOn = false;
var opera = window.opera ? true : false;

if (!document.getElementById)
document.getElementById = function() { return null; }

function initialiseDummy(dummy, root) {
dummy.onmouseover = function() {
containingMenu = this.parentNode.parentNode;
for (var x=0;x<containingMenu.childNodes.length;x++) {
if (containingMenu.childNodes[x].nodeName.toUpperCase()=="LI") {
if (containingMenu.childNodes[x].getElementsByTagName("ul").length>0) {
containingMenu.childNodes[x].getElementsByTagName("UL").item(0).style.visibility = 'hidden';
}
}
}
}
dummy.onfocus = function() {
dummy.onmouseover();
}
}

function initialiseMenu(menu, starter, root) {
var leftstarter = false;

if (menu == null || starter == null) return;
currentMenu = menu;

starter.onmouseover = function() {
if (currentMenu) {
if (this.parentNode.parentNode!=currentMenu) {
currentMenu.style.visibility = "hidden";
hideAllMenus(currentMenu, root);

}
if (this.parentNode.parentNode==root) {
while (currentMenu.parentNode.parentNode!=root) {
currentMenu.parentNode.parentNode.style.visibility = "hidden";
currentMenu = currentMenu.parentNode.parentNode;
}
}
currentMenu = null;
this.showMenu();
}
}

menu.onmouseover = function() {
if (currentMenu) {
currentMenu = null;
this.showMenu();
}
}

starter.showMenu = function() {
if (!opera) {
if (this.parentNode.parentNode==root) {
menu.style.left = this.offsetLeft + "px";
menu.style.top = this.offsetTop + this.offsetHeight + "px";
if (menu.offsetWidth < this.offsetWidth) menu.style.width = this.offsetWidth;
}
else {
menu.style.left = this.offsetLeft + this.offsetWidth + "px";
menu.style.top = this.offsetTop + "px";
}
}
else {
var rootOffset = root.offsetLeft;
if (this.parentNode.parentNode==root) {
menu.style.left = this.offsetLeft - rootOffset + "px";
menu.style.width = this.offsetWidth;
menu.style.top = this.offsetHeight + "px";
}
else {
menu.style.left = this.offsetWidth - rootOffset + "px";
menu.style.top = this.offsetTop + "px"; //menu.style.top - menu.style.offsetHeight + "px";
}

}
menu.style.visibility = "visible";
currentMenu = menu;
}

starter.onfocus = function() {
starter.onmouseover();
}

menu.onfocus = function() {
// currentMenu.style.visibility="hidden";
}

menu.showMenu = function() {
menu.style.visibility = "visible";
currentMenu = menu;
stopTime();
}

menu.hideMenu = function() {
if (!timerOn) {
mytimer = setInterval("killMenu('" + this.id + "', '" + root.id + "');", 2000);
timerOn = true;
for (var x=0;x<menu.childNodes.length;x++) {
if (menu.childNodes[x].nodeName=="LI") {
if (menu.childNodes[x].getElementsByTagName("UL").length>0) {
menuItem = menu.childNodes[x].getElementsByTagName("UL").item(0);
menuItem.style.visibility = "hidden";
}
}
}
}
}

menu.onmouseout = function(event) {
this.hideMenu();
}
menu.onblur = function() {
this.hideMenu();
}
starter.onmouseout = function() {
for (var x=0;x<menu.childNodes.length;x++) {
if (menu.childNodes[x].nodeName=="LI") {
if (menu.childNodes[x].getElementsByTagName("UL").length>0) {
menuItem = menu.childNodes[x].getElementsByTagName("UL").item(0);
menuItem.style.visibility = "hidden";
}
}
}
menu.style.visibility = "hidden";
}
}
function killMenu(menu, root) {
var menu = document.getElementById(menu);
var root = document.getElementById(root);
menu.style.visibility = "hidden";
for (var x=0;x<menu.childNodes.length;x++) {
if (menu.childNodes[x].nodeName=="LI") {
if (menu.childNodes[x].getElementsByTagName("UL").length>0) {
menuItem = menu.childNodes[x].getElementsByTagName("UL").item(0);
menuItem.style.visibility = "hidden";
}
}
}
while (menu.parentNode.parentNode!=root) {
menu.parentNode.parentNode.style.visibility = "hidden";
menu = menu.parentNode.parentNode;
}
stopTime();
}
function stopTime() {
if (mytimer) {
clearInterval(mytimer);
mytimer = null;
timerOn = false;
}
}

window.onload = function() {
var root = document.getElementById("menuList");
var rootOffset = root.offsetLeft;
getMenus(root, root);
}

function getMenus(elementItem, root) {
var selectedItem;
var menuStarter;
var menuItem;
for (var x=0;x<elementItem.childNodes.length;x++) {
if (elementItem.childNodes[x].nodeName.toUpperCase()=="LI") {
if (elementItem.childNodes[x].getElementsByTagName("ul").length>0) {
menuStarter = elementItem.childNodes[x].getElementsByTagName("A").item(0);
menuItem = elementItem.childNodes[x].getElementsByTagName("UL").item(0);
getMenus(menuItem, root);
initialiseMenu(menuItem, menuStarter, root);
}
else {
initialiseDummy(elementItem.childNodes[x].getElementsByTagName("A").item(0), root);
}
}
}
}
function hideAllMenus(elementItem, root) {
for (var x=0;x<elementItem.childNodes.length;x++) {
if (elementItem.childNodes[x].nodeName.toUpperCase()=="LI") {
if (elementItem.childNodes[x].getElementsByTagName("ul").length>0) {
elementItem.childNodes[x].getElementsByTagName("UL").item(0).style.visibility = 'hidden';
hideAllMenus(elementItem.childNodes[x].getElementsByTagName("UL").item(0), root);
}
}
}
}
// -->
</script>

und hier die styles:

<style type="text/css">

#mainMenu {
font-weight: bold;
position: relative;
text-align: center;
width: 100%;
color: white;
margin: 0px;
padding-bottom: 4px;
padding-top: 40px;
padding-left:0px;
padding-right: 0px;
border-top: none;
font-size:13px;
}

#mainMenu a {
color: white;
}

#menuList {
margin: 0px;
padding: 0px;
}

#menuList ul {
margin: 0px;
padding: 0px;
}

#menuList li {
display:inline;
list-style: none;
padding: 0px;
margin: 0px;
}

#menuList li a.starter_active, #menuList li a.starter_active:link {
background-color: #C9C9C9;
color: white;
text-decoration: none;
margin: 0px;
padding:4px;
border-right: 1px solid white;
}

#menuList li a.starter_normal, #menuList li a.starter_normal:link {
background-color: #666666;
color: white;
text-decoration: none;
margin: 0px;
padding:4px;
border-right: 0px solid white;
}

#menuList li a.starter_normal:hover, #menuList li a.starter_normal:active {
background-color: #F57618;
color: white;
text-decoration: none;
margin: 0px;
padding:4px;
border-right: 0px solid white;
}

.menu {
text-align: left;
color: white;
background-color: #F89E41;
position: absolute;
width: 150px;
visibility: hidden;
}

.menu li a, .menu li a:link {
background-color: transparent;
color: white;
display: block;
border-bottom: 1px solid #FFFFFF;
margin: 0px;
padding: 4px;
}

.menu li a:hover, .menu li a:active {
background-color: #F57618;
color: white;
}

.menubuilder {
width: 150px;
z-index:100;
}

.menubuilder a, {
background-color: #C9C9C9;
color: white;
}

.menubuilder a:hover {
background-color: #C9C9C9;
color: white;
}
-->
</style>

Antwort 4 von rfb

so wie ich das sehe ist es dem JavaScript völlig wurscht, welche Farbe dein Menüpunkt haben soll, spielt also keine Rolle bei der Fragestellung.

Geregelt wird das einfach über CSS.

Da nun der HTML-Teil fehlt weiß ich natürlich nicht, welcher Selektor nun den entsprechenden Menüpunkt anwählt.

Ich möchte kostenlos eine Frage an die Mitglieder stellen:


Ähnliche Themen:


Suche in allen vorhandenen Beiträgen: