Javascript Menu Farbe
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 schreiben
Antwort 1 von G-Styler vom 26.01.2019, 13:20 Options
Antwort 2 von rfb vom 26.01.2019, 13:24 Options
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 vom 26.01.2019, 13:28 Options
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 vom 26.01.2019, 16:16 Options
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.