selfhtml.de - Alles für den Webmaster!

 

Empfehlung:

wix.com

Kostenlose Homepage

Besuchen Sie auch:

Jobs:

Javascript Menü zu DORPDOWN Menü machen? - Komme nicht weiter

Autor: 16v [Beiträge: 24]
Datum: 01.11.2014 16:20:18

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:
[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>[/CODE]

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;
}[/CODE]

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;
}[/CODE]

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.


Beiträge

Antwort schreiben

Username: Usernamen registrieren
Passwort: Passwort vergessen?
Thema:
  Bitte benutze für deinen Beitrag die Groß-/Kleinschreibung!
Beitrag:
Link (URL):
Titel für Link:
Grafik (URL):
  Die Breite der Grafik darf 468 Pixel nicht überschreiten.
 
E-Mail-Benachrichtigung:



Zum Abschicken deines Beitrags bitte die Schaltfläche "Abschicken" nur einmal anklicken und warten. Der Server braucht manchmal einige Zeit, bis er den Beitrag in die Datenbank übernommen hat. Wenn du die Schaltfläche mehrmals drückst, erscheint dein Beitrag auch mehrmals im Forum.

Bewerten Sie Ihren Webhosting-Provider

Webhosting Provider bewerten und Apple iPad gewinnenWie zufrieden sind Sie mit Ihrem Webhosting-Provider? Gibt es Probleme beim Service, mit der Performance oder der Abrechnung?

Teilen Sie jetzt Ihre Erfahrungen mit anderen Webmastern und schreiben Sie eine Provider-Bewertung. Mit etwas Glück können Sie ein Apple iPad gewinnen!

Weitere Informationen und Teilnahme...