Menü zu Slidemenü , wie CSS und JS angeben?

[Taschmahal]

Guten Tag.

Ich benutze Wordpress, was hier jedoch nichts zu Sache tut, denn mein Menü habe ich extra gestaltet.

Ich will nun aus meinem simplen Menü ein Slidemenü machen. ich habe im Internet schon ein Paket gefunden, welches eine CSS und eine JS-Datei enthält. Nur weiß ich nicht, wie ich diese beiden Dateien mit meinem menü in Verbindung bringe.

Kann mir jemand helfen?

Menü~~~html

<a style="boarder:0px" href="website.de/beispiel">
<img alt="Skate" src="Bild.jpg"
border="0" width="25" height="25"/>
</a>

<a style="boarder:0px" href="website.de/impressum">
<img alt="Skate" src="Bild.jpg"
border="0" width="25" height="25"/>
</a>
...

  
Vielen Dank  
  
Taschmahal

[Ole]

Hallo Taschmahal,

so wie es aussieht hast du uns relevante Informationen vorenthalten die uns dabei helfen würde dein Problem auch ohne Glaskugel nachvollziehen zu können.

z.B. Welches Paket hast du gefunden?

Btw. Für Wordpress gibt es Plugins die genau das machen was du vorhast.

Gruß
Ole

[Taschmahal]

Das "Paket" CSS-Datei

#dhtmlgoodies_menu{
	font-family:arial;	/* Font for main menu items */
	width:150px;	/* Width of main menu */

}
#dhtmlgoodies_menu	li{	/* Main menu <li> */
	list-style-type:none;	/* No bullets */
	margin:0px;	/* No margin - needed for Opera */
}
#dhtmlgoodies_menu ul{
	margin:0px;	/* No <ul> air */
	padding:0px;	/* No <ul> air */
}
#dhtmlgoodies_menu ul li ul{	/* Styling for those who doesn't have javascript enabled */
	padding-left:10px;
}
#dhtmlgoodies_menu	li a{	/* Main menu links */
	text-decoration:none;	/* No underline */
	color:#000;	/* Black text color */

	height:20px;	/* 20 pixel height */
	line-height:20px;	/* 20 pixel height */
	vertical-align:middle;	/* Align text in the middle */
	border:1px solid #000;	/* Black border */
	background-color:#FAFAFA;	/* Light blue background color */
	margin:1px;	/* A little bit of air */
	padding:1px;	/* Air between border and text inside */

	display:block;
}
#dhtmlgoodies_menu	li a:hover,#dhtmlgoodies_menu .activeMainMenuItem{
	color:#FFF;
	background-color:#317082;
}
.dhtmlgoodies_subMenu{
	visibility:hidden;
	position:absolute;
	overflow:hidden;
	border:1px solid #000;
	background-color:#FAFAFA;
	font-family:arial;
	text-align:left;

}
.dhtmlgoodies_subMenu ul{
	margin:0px;
	padding:0px;
}
.dhtmlgoodies_subMenu ul li{
	list-style-type:none;
	margin:0px;
	padding:1px;	/* 1px of air between submenu border and sub menu item - (the "white" space you see on mouse over )*/
}
.dhtmlgoodies_subMenu ul li a{	/* Sub menu items */
	white-space:nowrap;	/* No line break */
	text-decoration:none;	/* No underline */
	color:#000;	/* Black text color */

	height:16px;	/* 16 pixels height */
	line-height:16px;	/* 16 pixels height */
	padding:1px;	/* 1px of "air" inside */

	display:block;	/* Display as block - you shouldn't change this */
}
.dhtmlgoodies_subMenu ul li a:hover{	/* Sub menu items - mouse over effects */
	color:#FFF;	/* White text */
	background-color:#317082;	/* Blue background */
}

JS-Datei

var MENUDIV_ID = "dhtmlgoodies_menu";
var SUBMENU_CLASS = 'dhtmlgoodies_subMenu';
var menuItems;
var slideSpeed_out = 10;	// Steps to move sub menu at a time ( higher = faster)
var slideSpeed_in = 10;
var delayMenuClose = 150;	// Microseconds from mouseout to close of menu
var slideTimeout_out = 25;	// Microseconds between slide steps ( lower = faster)
var slideTimeout_in = 10;	// Microseconds between slide steps ( lower = faster)
var xOffsetSubMenu = 0; 	// Offset x-position of sub menu items - use negative value if you want the sub menu to overlap main menu

/* Don't change anything below here */

var indeces = new Array();
indeces[0] = 0;
var isMSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;
var browserVersion = parseInt(navigator.userAgent.replace(/.*?MSIE ([0-9]+?)[^0-9].*/g,'$1'));
if(!browserVersion)browserVersion=1;

function mouseOn(obj) {
	var mi = findNode(getSearchIdFromObj(obj));
	if (mi) mi.mouseOn();
}

function mouseOff(obj) {
	var mi = findNode(getSearchIdFromObj(obj));
	if (mi) mi.mouseOff();
}

function getSearchIdFromObj(obj) {
	// pull the postfix off the A link or LI tag id and return the menu item ID
	var objId = obj.id;
	var idx = objId.indexOf('_');
	if (idx>=0) {
		return "MenuItem" + objId.substring(idx);
	}
	return null;
}

function slideChildMenu(aId) {
	var mi = findNode(aId);
	if (mi) mi.slideChildMenu();
}

function findNode(searchId) {
	var result;
	for (var no=0;no<menuItems.length;no++) {
		result = menuItems[no].findNode(searchId);
		if (result) return result;
	}
	return null;
}

function getNextIndex(lvl) {
	var result = 0;
	if (indeces.length<=lvl) {
		indeces[lvl] = 1;
	} else {
		result = indeces[lvl];
		indeces[lvl]++;
	}
	return result;
}

function MenuItem(divref, ulref, liref, lvlnum, parentref) {
	this.parent = parentref;
	this.div = divref;
	this.ul = ulref;
	this.width = this.ul.offsetWidth;
	// this.left = div.style.left.replace(/[^0-9]/g,'');
	this.li = liref;
	this.alink = this.li.getElementsByTagName('A')[0];
	this.lvl = lvlnum;
	this.idx = getNextIndex(this.lvl);
	this.children;
	this.subUL = this.li.getElementsByTagName('UL')[0];
	this.children;
	this.isMouseOnMe = false;
	// note: if !isOpen && !isClosed then I am animating a slide
	this.isChildMenuOpen = false;
	this.isChildMenuClosed = true;

	// Constructor
	// if a node does not have an A tag but it's children do then we need
	// null out this node's alink field...
	if (this.alink) {
		if (this.alink.parentNode!=this.li) this.alink = null;
	}
	if (this.subUL) {
		this.children = new Array();
		var subLI = this.subUL.getElementsByTagName('LI')[0];
		while(subLI) {
			if(subLI.tagName && subLI.tagName.toLowerCase()=='li') {
				this.children[this.children.length] = new MenuItem(null, this.subUL, subLI, this.lvl + 1, this);
			}
			subLI = subLI.nextSibling;
		}
	}

	this.getPostfix = function() {
		return '_' + this.idx + '_' + this.lvl;
	}
	
	this.getId = function() {
		return "MenuItem" + this.getPostfix();
	}

	this.hasChildren = function() {
		return (this.children!=null);
	}

	this.getTopPos = function() {
		var origDisp = this.div.style.display;
		this.div.style.display = "";
		var obj = this.li;
		var result = obj.offsetTop;
		while((obj = obj.offsetParent) != null) result += obj.offsetTop;
		this.div.style.display = origDisp;
		return result;
	}

	this.getLeftPos = function() {
		var origDisp = this.div.style.display;
		this.div.style.display = "";
		var obj = this.li;
		var result = obj.offsetLeft;
		while((obj = obj.offsetParent) != null) result += obj.offsetLeft;
		this.div.style.display = origDisp;
		return result;
	}

	this.renderNode = function() {
		// set node properties
		this.li.id = "menuItemLI" + this.getPostfix();
		this.ul.style.position = "relative";
		if (this.alink) {
			this.alink.id = "menuItemA" + this.getPostfix();
			this.alink.onmouseover = function() {mouseOn(this);};
			this.alink.onmouseout = function() {mouseOff(this);};
		} else {
			this.li.onmouseover = function() {mouseOn(this);};
			this.li.onmouseout = function() {mouseOff(this);};
		}

		// set sub-menu nodes
		if (this.hasChildren()) {
			var mi = this.children[0];
			var subdiv = document.createElement('DIV');
			subdiv.className=SUBMENU_CLASS;
			document.body.appendChild(subdiv);
			subdiv.id = "menuItemDIV" + mi.getPostfix();
			this.subUL.id = "menuItemUL" + mi.getPostfix();
			subdiv.appendChild(this.subUL);
			subdiv.style.left = this.getLeftPos() + this.width + xOffsetSubMenu + 'px';
			subdiv.style.top = this.getTopPos() + 'px';
			subdiv.style.visibility = "hidden";
			subdiv.style.display = "none";
			subdiv.style.zindex = "1000";
			for (var no=0;no<this.children.length;no++) {
				var mi = this.children[no];
				mi.div = subdiv;
				mi.renderNode();
			}
		}
		return this.li;
	}

	this.findNode = function(searchId) {
		var result;
		if (this.getId() == searchId) {
			result = this;
		} else {
			if (this.hasChildren()) {
				for (var no=0;no<this.children.length;no++) {
					var mi = this.children[no];
					result = mi.findNode(searchId);
					if (result!=null) break;
				}
			}
		}
		return result;
	}

	this.mouseOn = function() {
		this.isMouseOnMe = true;
		if (this.hasChildren() && this.isChildMenuClosed) {
			this.initiateChildMenuOpen();
		}
	}

	this.mouseOff = function() {
		this.isMouseOnMe = false;
		if (this.hasChildren() && !this.isChildMenuClosed) {
			this.initiateChildMenuClose();
		} else if (this.parent) {
			this.parent.mouseOff();
		}
	}

	this.isMouseOnChild = function() {
		if (this.isMouseOnMe) return true;
		if (this.hasChildren()) {
			for (var no=0;no<this.children.length;no++) {
				if (this.children[no].isMouseOnChild()) return true;
			}
		}
		return false;
	}

	this.initiateChildMenuOpen = function() {
		this.isChildMenuClosed = false;
		var childDiv = this.children[0].div;
		childDiv.style.width = "0px";
		childDiv.style.visibility = "visible";
		childDiv.style.display = "";
		this.slideChildMenu();
	}

	this.initiateChildMenuClose = function() {
		this.isChildMenuOpen = false;
		// we have to wait to close the menu
		// allow the mouse to navigate over the child menu
		setTimeout("slideChildMenu('" + this.getId() + "')", delayMenuClose);
	}

	this.slideChildMenu = function() {
		var divref = this.children[0].div;
		var ulref = this.children[0].ul;
		var maxwidth = this.children[0].width;
		var nextWidth;
		if (this.isMouseOnMe  || this.isMouseOnChild()) {
			nextWidth = divref.offsetWidth + slideSpeed_out;
			if (nextWidth >= maxwidth) {
				this.finishOpeningChild(divref, ulref, maxwidth);
			} else {
				ulref.style.left = nextWidth - maxwidth + "px";
				divref.style.width = nextWidth + "px";
				setTimeout("slideChildMenu('" + this.getId() + "')", slideTimeout_out);
			}
		} else {
			nextWidth = divref.offsetWidth - slideSpeed_in;
			if (nextWidth <= 0) {
				this.finishClosingChild(divref, ulref, maxwidth);
			} else {
				ulref.style.left = nextWidth - maxwidth + "px";
				divref.style.width = nextWidth + "px";
				setTimeout("slideChildMenu('" + this.getId() + "')", slideTimeout_out);
			}
		}
	}

	this.finishOpeningChild = function(divref, ulref, maxwidth) {
		this.isChildMenuOpen = true;
		this.isChildMenuClosed = false;
		ulref.style.left = "0px";
		divref.style.width = maxwidth + "px";
	}

	this.finishClosingChild = function(divref, ulref, maxwidth) {
		this.isChildMenuOpen = false;
		this.isChildMenuClosed = true;
		divref.style.visibility = "hidden";
		divref.style.display = "none";
		divref.style.width = maxwidth + "px";
		if (this.parent) this.parent.mouseOff();
	}

}

function collectMenuNodes(menuObj) {
     if (!menuObj) return null;

     var results = new Array();
     var menuUL = menuObj.getElementsByTagName('UL')[0];
     var menuLI = menuUL.getElementsByTagName('LI')[0];
     while(menuLI) {
        if(menuLI.tagName && menuLI.tagName.toLowerCase()=='li') {
              results[results.length] = new MenuItem(menuObj, menuUL, menuLI, 0, null);
        }
        menuLI = menuLI.nextSibling;
     }
     return results;
}

function initMenu() {
	var mainDiv = document.getElementById(MENUDIV_ID);
	menuItems = collectMenuNodes(mainDiv);
	if (menuItems) {
		for (var no=0;no<menuItems.length;no++) {
			var mi = menuItems[no];
			mi.renderNode();
		}
		mainDiv.style.visibility = 'visible';
	}
	// window.onresize = resetPosition;
}

window.onload = initMenu;

Ein Wordpress-Plugin kann ich nicht verwenden, da ich mein Menü sozusagen extern gestaltet habe, also die Links manuell eingefügt habe. Da funktionieren Plugins leider nicht mehr.

Und so muss ich es jetzt auf diese weise machen. Also irgendwie die CSS und die JS Datei auf meine links verweisen. Aber da liegt der punkt, ich weiß nicht wie ich das mache.

[Ole]

Hallo,

wenn ich mir die Seite DHTMLgoodies anschaue, von welcher du ja dein Menuscript hast, ist da zumindest bei den Scripten die ich mir angeschaut habe immer eine brauchbare Anleitung dabei.

Die Wordpress Menu-Plugins sind meistens auch nichts anderes als Scripte wie z.B. Superfish welche die von Wordpress generierte Liste umformatieren. Und wenn da manuelle Einträge drin sind, werden die eben mitformatiert.

Gruß
Ole

[Taschmahal]

Vielen Dank! Habe es nun gelöst. habe aber auch ein kleines Problem:

In meinem Menü-Buttons ist irgendwie in Schwarz ein " » ". Aber ich kann nicht finden, woher es kommt.

Liegt das an einem Code, oder woher kommt das?

Viele Grüße und Dank

Taschmahal

[Taschmahal]

Ich sollte noch einen link angeben :/

link!

[ChrisB]

Hi,

In meinem Menü-Buttons ist irgendwie in Schwarz ein " » ". Aber ich kann nicht finden, woher es kommt.

Liegt das an einem Code, oder woher kommt das?

Das kommt daher, dass sich im DOM-Baum letztendlich in den Links ein Element
<span class="sf-sub-indicator"> »</span>
befindet.

(Ob das aus dem HTML kommt, oder dynamisch vom Script generiert wird, habe ich mir jetzt nicht genauer angesehen. Du willst das Script bei dir einsetzen, also solltest du dich auch zumindest so weit damit beschäftigen, dass du diese Frage selber beantworten kannst.)

MfG ChrisB

[Taschmahal]

Guten Tag und vielen Dank für deine Antwort.

Ich habe jetzt alle JS-Dateien und den Css-Teil nach dem " » " durchsucht, welcher in dem "Paket" enthalten war. Was ich jedoch sehr komisch finde, dass das Zeichen auch nicht im Quelltext gefunden wird.

Die Klasse sf-sub-indicator wird ja im CSS definiert, aber dort ist das Zeichen auch nicht. Und irgendwo muss es doch stehen oder?

Viele Grüße

Taschmahal

[Taschmahal]

Ok, habe das Problem gefunden. Das " » " stand in der UTF-8 (?) Form da, deswegen konnte ich es nicht finden. Ich habe es gelöscht, und nun ist alles wie gewollt.

Vielen Dank!

Man wünscht sich hier immer ausführliche Antworten, damit man selbst nichts mehr machen muss, aber diese Hilfe zur Selbsthilfe ist im Endeffekt viel besser. Denn nun wusste ich wie ich die Sache angehen musste, und mit etwas hirnen kommt man drauf, wie man es machen muss.