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



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

Autor: 16v
Datum: 01.11.2014 19:59:46

wäre es damit realisierbar?
http://www.silent-fran.de/css/tutorial/aufklappmenue.html

mit dem css Eintrag :hover?



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

Autor: 16v
Datum: 09.11.2014 16:20:53

Hab jetze was bekommen.

So sieht es jetzt aus:
http://www.das-konsolenmuseum.de/menu2/menu.html

Allerdings:
1. WENN ich mit der Maus auf ein Untermenü fahre, dann hüpft der Slider wieder nach links
2. Zwischen dem Slider und der Linie ist nun ein Spalt.

Weiß zufällig jemand, wie ich den rausbekomme?



Re: Javascript Menü zu Dropdown Menü machen? - Komme nicht weiter

Autor: reporter
Datum: 10.11.2014 11:30:47

> Hab jetze was bekommen.
>
> So sieht es jetzt aus:
> http://www.das-konsolenmuseum.de/menu2/menu.html
>
> Allerdings:
> 1. WENN ich mit der Maus auf ein Untermenü fahre,
> dann hüpft der Slider wieder nach links
> 2. Zwischen dem Slider und der Linie ist nun ein
> Spalt.
>
> Weiß zufällig jemand, wie ich den rausbekomme?

In der Datei "menu.js" gibt es den Abschnitt

> m.onmouseout = function () {...}

Wenn du ein Untermenüpunkt auswählst, dann verlässt du mit dem Mauszeiger den oberen Eintrag und aktivierst somit onMousOut().
Unterumständen ist der enthaltene Aufruf 'sse1.move(items[k])' der Auslöser.



Re: Javascript Menü zu Dropdown Menü machen? - Komme nicht weiter

Autor: 16v
Datum: 10.11.2014 13:32:33

O.K.
Damit kann ich jetzt leider absolut gar nichts anfangen...

Für was ist der Eintrag?
Um den Slider dort zu lassen, wo er ist?

Hast Du mir ne komplette Lösung?
Hab das auch nur so von jemandem in nem Forum bekommen!

Danke trotzdem mal!



Re: Javascript Menü zu Dropdown Menü machen? - Komme nicht weiter

Autor: 16v
Datum: 11.11.2014 14:48:16

ich kann noch das als menu.js anbieten:

function Browser() {
  var ua, s, i;
  this.isIE    = false;  
  this.isNS    = false;  
  this.version = null;

  ua = navigator.userAgent;

  s = "MSIE";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isIE = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  s = "Netscape6/";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  // Treat any other "Gecko" browser as NS 6.1.

  s = "Gecko";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = 6.1;
    return;
  }
}

var browser = new Browser();

//----------------------------------------------------------------------------
// Code for handling the menu bar and active button.
//----------------------------------------------------------------------------

var activeButton = null;

// Capture mouse clicks on the page so any active button can be
// deactivated.

if (browser.isIE)
  document.onmouseover = pageMousedown;
else
  document.addEventListener("mouseover", pageMousedown, true);

function pageMousedown(event) {
  var el;
  if (activeButton == null)
    return;

  if (browser.isIE)
    el = window.event.srcElement;
  else
    el = (event.target.tagName ? event.target : event.target.parentNode);

  if (el == activeButton)
    return;

  if (getContainerWith(el, "DIV", "menu") == null) {
    resetButton(activeButton);
    activeButton = null;
  }
}

function buttonClick(event, menuId) {
  var button;

  if (browser.isIE)
    button = window.event.srcElement;
  else
    button = event.currentTarget;

  button.blur();

  if (button.menu == null) {
    button.menu = document.getElementById(menuId);
    menuInit(button.menu);
  }

  if (activeButton != null)
    resetButton(activeButton);

  if (button != activeButton) {
    depressButton(button);
    activeButton = button;
  }
  else
    activeButton = null;

  return false;
}

function buttonMouseover(event, menuId) {
  var button;

  if (browser.isIE)
    button = window.event.srcElement;
  else
    button = event.currentTarget;

  if (activeButton == null || activeButton != button)
    buttonClick(event, menuId);
}

function depressButton(button) {
  var x, y;

  button.className += " menuButtonActive";

  x = getPageOffsetLeft(button);
  y = getPageOffsetTop(button) + button.offsetHeight;

  if (browser.isIE) {
    x += button.offsetParent.clientLeft;
    y += button.offsetParent.clientTop;
  }

  button.menu.style.left = x + "px";
  button.menu.style.top  = y + "px";
  button.menu.style.visibility = "visible";
}

function resetButton(button) {
  removeClassName(button, "menuButtonActive");

  if (button.menu != null) {
    closeSubMenu(button.menu);
    button.menu.style.visibility = "hidden";
  }
}


function menuMouseover(event) {
  var menu;
  if (browser.isIE)
    menu = getContainerWith(window.event.srcElement, "DIV", "menu");
  else
    menu = event.currentTarget;

  if (menu.activeItem != null)
    closeSubMenu(menu);
}

function menuItemMouseover(event, menuId) {
  var item, menu, x, y;
  if (browser.isIE)
    item = getContainerWith(window.event.srcElement, "A", "menuItem");
  else
    item = event.currentTarget;
  menu = getContainerWith(item, "DIV", "menu");

  if (menu.activeItem != null)
    closeSubMenu(menu);
  menu.activeItem = item;

  item.className += " menuItemHighlight";

  if (item.subMenu == null) {
    item.subMenu = document.getElementById(menuId);
    menuInit(item.subMenu);
  }

  x = getPageOffsetLeft(item) + item.offsetWidth;
  y = getPageOffsetTop(item);
  
  var maxX, maxY;

  if (typeof window.innerWidth != 'undefined'){
maxX = window.innerWidth;
maxY = window.innerHeight;
  }else if (typeof document.documentElement != 'undefined'&& typeof document.documentElement.clientWidth !='undefined' && document.documentElement.clientWidth != 0){
maxX = document.documentElement.clientWidth;
maxY = document.documentElement.clientHeight;
  }else{
maxX = document.getElementsByTagName('body')[0].clientWidth,
maxY = document.getElementsByTagName('body')[0].clientHeight
  }

  maxX -= item.subMenu.offsetWidth;
  maxY -= item.subMenu.offsetHeight;
  
  if (x > maxX)
    x = Math.max(0, x - item.offsetWidth - item.subMenu.offsetWidth
      + (menu.offsetWidth - item.offsetWidth));
  y = Math.max(0, Math.min(y, maxY));

  item.subMenu.style.left = x + "px";
  item.subMenu.style.top  = y + "px";
  item.subMenu.style.visibility = "visible";

  if (browser.isIE)
    window.event.cancelBubble = true;
  else
    event.stopPropagation();
}

function closeSubMenu(menu) {
  if (menu == null || menu.activeItem == null)
    return;

  if (menu.activeItem.subMenu != null) {
    closeSubMenu(menu.activeItem.subMenu);
    menu.activeItem.subMenu.style.visibility = "hidden";
    menu.activeItem.subMenu = null;
  }
  removeClassName(menu.activeItem, "menuItemHighlight");
  menu.activeItem = null;
}

function menuInit(menu) {
  var itemList, spanList
  var textEl, arrowEl;
  var itemWidth;
  var w, dw;
  var i, j;

  if (browser.isIE) {
    menu.style.lineHeight = "2.5ex";
    spanList = menu.getElementsByTagName("SPAN");
    for (i = 0; i < spanList.length; i++)
      if (hasClassName(spanList[i], "menuItemArrow")) {
        spanList[i].style.fontFamily = "Webdings";
        spanList[i].firstChild.nodeValue = "4";
      }
  }

  itemList = menu.getElementsByTagName("A");
  if (itemList.length > 0)
    itemWidth = itemList[0].offsetWidth;
  else
    return;

  for (i = 0; i < itemList.length; i++) {
    spanList = itemList[i].getElementsByTagName("SPAN")
    textEl  = null
    arrowEl = null;
    for (j = 0; j < spanList.length; j++) {
      if (hasClassName(spanList[j], "menuItemText"))
        textEl = spanList[j];
      if (hasClassName(spanList[j], "menuItemArrow"))
        arrowEl = spanList[j];
    }
    if (textEl != null && arrowEl != null)
      textEl.style.paddingRight = (itemWidth
        - (textEl.offsetWidth + arrowEl.offsetWidth)) + "px";
  }

  if (browser.isIE) {
    w = itemList[0].offsetWidth;
    itemList[0].style.width = w + "px";
    dw = itemList[0].offsetWidth - w;
    w -= dw;
    itemList[0].style.width = w + "px";
  }
}

function getContainerWith(node, tagName, className) {
  while (node != null) {
    if (node.tagName != null && node.tagName == tagName &&
        hasClassName(node, className))
      return node;
    node = node.parentNode;
  }

  return node;
}

function hasClassName(el, name) {
  var i, list;
  list = el.className.split(" ");
  for (i = 0; i < list.length; i++)
    if (list[i] == name)
      return true;

  return false;
}

function removeClassName(el, name) {
  var i, curList, newList;
  if (el.className == null)
    return;
  newList = new Array();
  curList = el.className.split(" ");
  for (i = 0; i < curList.length; i++)
    if (curList[i] != name)
      newList.push(curList[i]);
  el.className = newList.join(" ");
}

function getPageOffsetLeft(el) {
  var x;
  x = el.offsetLeft;
  if (el.offsetParent != null)
    x += getPageOffsetLeft(el.offsetParent);

  return x;
}

function getPageOffsetTop(el) {
  var y;
  y = el.offsetTop;
  if (el.offsetParent != null)
    y += getPageOffsetTop(el.offsetParent);

  return y;
}



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

Autor: dsilac
Datum: 13.11.2014 13:06:49

> Hallo!
>
> Ich habe mir da was in den Kopf gesetzt...
> Ich habe ein - für mich - sehr schönes Menü
> gefunden.d Mühe.

Wo hast du es genau gefunden? Vielleicht gibt es dort weitere Beispiele oder Tutorials??



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

Autor: 16v
Datum: 13.11.2014 14:59:50

Hallo

> Wo hast du es genau gefunden? Vielleicht gibt es
> dort weitere Beispiele oder Tutorials??

http://www.menucool.com



soweit bin ich schon gekommen...

Autor: 16v
Datum: 26.11.2014 12:48:50

Hallo!

Ich bin schon ein Stückchen weiter...
http://www.das-konsolenmuseum.de/menu2/menu.html

allerdings wenn ich das rechte Untermenü anfahre, dann springt der Slider wieder nach links, und zwischen Slider und grüner Linie ist nun ein Leerraum...

http://www.das-konsolenmuseum.de/menu3/menu.html
wäre der letzte Stand.
Hier bleibt der Slider, auch wenn ich das rechte Untermenü anwähle.

ALLERDINGS habe ich hier auch weider die Leerzeile zwischen Slider und Linie,
UND:
Wenn man die Seite NEU lädt, fehlt der Slider.
Der kommt dann von gaaanz weit links reingefahren, wenn ich mit der Maus aufs Menü gehe.

Hier das Originale, von dem alles ausgeht:
http://www.das-konsolenmuseum.de/menu/menu.html

Slider ist da, und KEINE Leerzeile zwischen Slider und Linie.

Nun meine Fragen:
1. wie bekomme ich die Leerzeile raus?
2. wie mach ich das, das der Slider von anfang an da ist, und nicht erst ne halbe Stunde anfahrt hat?

Danke Euch