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
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?
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>
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.
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.

