Hallo!
Ich habe mir da was in den Kopf gesetzt...
Ich habe ein - für mich - sehr schönes Menü gefunden.
Leider nur eine Menüleiste, bestehend aus html code (is kalr denke ich), css und einem Javascript.
Das ist der html-part:
das das css dazu:
und das der javapart:
Jetzt hätte ich das gerne, das daraus ein DropDown Menü wird, bekomme es aber nicht hin.
Entweder das, was "droppen" soll, steht aufgeklappt in der 2. Zeile, oder es passiert einfach gar nichts...
Ich habe leider nicht viel Ahnung, und von Java ÜBERHAUPT keine. auch mit diversen Editoren komme ich hier nicht zurecht/weiter.
Daher bräuchte ich echt was "fertiges" - also keinen wink mit nem Zaunpfahl, was ich machen muss.
Bei dem Menü geht es mir ja auch eher um die rote Linie, wenn mir aber jemand eine Lösung mit der Linie OHNE den Javapart hat, bin ich damit natürlich auch einverstanden.
Aber ich finde auch mit google nichts was mich weiterhilft.
Ein Versuch gestern abend hat irgendwie die "Schrift" verschwinden lassen... - Nein, sie ist nicht einfach nur schwarz, und wenn man die Seite markiert, kann mans lesen, sie ist weg...
Ich verzweifel, und BEDANKE mich schonmal recht herzlich bei Euch für Eure Hilfe und Mühe.
Ich habe mir da was in den Kopf gesetzt...
Ich habe ein - für mich - sehr schönes Menü gefunden.
Leider nur eine Menüleiste, bestehend aus html code (is kalr denke ich), css und einem Javascript.
Das ist der html-part:
Code:
<div id="sse1">
<div id="sses1">
<ul>
<li><a href="?menu=1&skin=2&p=Javascript-Menus">Javascript Menus</a></li>
<li><a href="?menu=1&skin=2&p=Horizontal-Menus">Horizontal Menus</a></li>
<li><a href="?menu=1&skin=2&p=Web-Menus">Web Menus</a></li>
</ul>
</div>
</div>das das css dazu:
Code:
#sse1
{
/*You can decorate the menu's container, such as adding background images through this block*/
background-color: #222;
height: 38px;
padding: 15px;
border-radius: 3px;
box-sizing: content-box;
}
#sses1
{
margin:0 auto;/*This will make the menu center-aligned. Removing this line will make the menu align left.*/
}
#sses1 ul
{
position: relative;
list-style-type: none;
float:left;
padding:0;margin:0;
border-bottom:solid 1px #6C0000;
}
#sses1 li
{
float:left;
list-style-type: none;
padding:0;margin:0;background-image:none;
}
/*CSS for background bubble*/
#sses1 li.highlight
{
background-color:#800;
top:36px;
height:2px;
border-bottom:solid 1px #C00;
z-index: 1;
position: absolute;
overflow:hidden;
}
#sses1 li a
{
box-sizing: content-box;
height:30px;
padding-top: 8px;
margin: 0 20px;/*used to adjust the distance between each menu item. Now the distance is 20+20=40px.*/
color: #fff;
font: normal 12px arial;
text-align: center;
text-decoration: none;
float: left;
display: block;
position: relative;
z-index: 2;
}und das der javapart:
Code:
var sse1 = function () {
var rebound = 20; //set it to 0 if rebound effect is not prefered
var slip, k;
return {
buildMenu: function () {
var m = document.getElementById('sses1');
if(!m) return;
var ul = m.getElementsByTagName("ul")[0];
m.style.width = ul.offsetWidth+1+"px";
var items = m.getElementsByTagName("li");
var a = m.getElementsByTagName("a");
slip = document.createElement("li");
slip.className = "highlight";
ul.appendChild(slip);
var url = document.location.href.toLowerCase();
k = -1;
var nLength = -1;
for (var i = 0; i < a.length; i++) {
if (url.indexOf(a[i].href.toLowerCase()) != -1 && a[i].href.length > nLength) {
k = i;
nLength = a[i].href.length;
}
}
if (k == -1 && /:\/\/(?:www\.)?[^.\/]+?\.[^.\/]+\/?$/.test) {
for (var i = 0; i < a.length; i++) {
if (a[i].getAttribute("maptopuredomain") == "true") {
k = i;
break;
}
}
if (k == -1 && a[0].getAttribute("maptopuredomain") != "false")
k = 0;
}
if (k > -1) {
slip.style.width = items[k].offsetWidth + "px";
//slip.style.left = items[k].offsetLeft + "px";
sse1.move(items[k]); //comment out this line and uncomment the line above to disable initial animation
}
else {
slip.style.visibility = "hidden";
}
for (var i = 0; i < items.length - 1; i++) {
items[i].onmouseover = function () {
if (k == -1) slip.style.visibility = "visible";
if (this.offsetLeft != slip.offsetLeft) {
sse1.move(this);
}
}
}
m.onmouseover = function () {
if (slip.t2)
slip.t2 = clearTimeout(slip.t2);
};
m.onmouseout = function () {
if (k > -1 && items[k].offsetLeft != slip.offsetLeft) {
slip.t2 = setTimeout(function () { sse1.move(items[k]); }, 50);
}
if (k == -1) slip.t2 = setTimeout(function () { slip.style.visibility = "hidden"; }, 50);
};
},
move: function (target) {
clearInterval(slip.timer);
var direction = (slip.offsetLeft < target.offsetLeft) ? 1 : -1;
slip.timer = setInterval(function () { sse1.mv(target, direction); }, 15);
},
mv: function (target, direction) {
if (direction == 1) {
if (slip.offsetLeft - rebound < target.offsetLeft)
this.changePosition(target, 1);
else {
clearInterval(slip.timer);
slip.timer = setInterval(function () {
sse1.recoil(target, 1);
}, 15);
}
}
else {
if (slip.offsetLeft + rebound > target.offsetLeft)
this.changePosition(target, -1);
else {
clearInterval(slip.timer);
slip.timer = setInterval(function () {
sse1.recoil(target, -1);
}, 15);
}
}
this.changeWidth(target);
},
recoil: function (target, direction) {
if (direction == -1) {
if (slip.offsetLeft > target.offsetLeft) {
slip.style.left = target.offsetLeft + "px";
clearInterval(slip.timer);
}
else slip.style.left = slip.offsetLeft + 2 + "px";
}
else {
if (slip.offsetLeft < target.offsetLeft) {
slip.style.left = target.offsetLeft + "px";
clearInterval(slip.timer);
}
else slip.style.left = slip.offsetLeft - 2 + "px";
}
},
changePosition: function (target, direction) {
if (direction == 1) {
//following +1 will fix the IE8 bug of x+1=x, we force it to x+2
slip.style.left = slip.offsetLeft + Math.ceil(Math.abs(target.offsetLeft - slip.offsetLeft + rebound) / 10) + 1 + "px";
}
else {
//following -1 will fix the Opera bug of x-1=x, we force it to x-2
slip.style.left = slip.offsetLeft - Math.ceil(Math.abs(slip.offsetLeft - target.offsetLeft + rebound) / 10) - 1 + "px";
}
},
changeWidth: function (target) {
if (slip.offsetWidth != target.offsetWidth) {
var diff = slip.offsetWidth - target.offsetWidth;
if (Math.abs(diff) < 4) slip.style.width = target.offsetWidth + "px";
else slip.style.width = slip.offsetWidth - Math.round(diff / 3) + "px";
}
}
};
} ();
if (window.addEventListener) {
window.addEventListener("load", sse1.buildMenu, false);
}
else if (window.attachEvent) {
window.attachEvent("onload", sse1.buildMenu);
}
else {
window["onload"] = sse1.buildMenu;
}Jetzt hätte ich das gerne, das daraus ein DropDown Menü wird, bekomme es aber nicht hin.
Entweder das, was "droppen" soll, steht aufgeklappt in der 2. Zeile, oder es passiert einfach gar nichts...
Ich habe leider nicht viel Ahnung, und von Java ÜBERHAUPT keine. auch mit diversen Editoren komme ich hier nicht zurecht/weiter.
Daher bräuchte ich echt was "fertiges" - also keinen wink mit nem Zaunpfahl, was ich machen muss.
Bei dem Menü geht es mir ja auch eher um die rote Linie, wenn mir aber jemand eine Lösung mit der Linie OHNE den Javapart hat, bin ich damit natürlich auch einverstanden.
Aber ich finde auch mit google nichts was mich weiterhilft.
Ein Versuch gestern abend hat irgendwie die "Schrift" verschwinden lassen... - Nein, sie ist nicht einfach nur schwarz, und wenn man die Seite markiert, kann mans lesen, sie ist weg...
Ich verzweifel, und BEDANKE mich schonmal recht herzlich bei Euch für Eure Hilfe und Mühe.
Ernsthaft: das sind zwei zwei komplett verschiedene Dinge.
