Ergebnis 1 bis 2 von 2
  1. #1
    Avatar von Nonens
    Nonens ist offline Lounge-Member
    registriert
    28-05-2001
    Ort
    Mainhättän
    Beiträge
    1.654

    Question JavaScript umändern

    Hi Ihr, ich mal wieder!

    Ich habe mir gestern von Michaels Seite ein JavaScript Menü kopiert und möchte das jetzt auf meine Seite anpassen, weiss aber nicht ganz so genau, wie.

    Und zwar ist es dieses Navi-Menü, das eine horizontale Leiste hat, in Grautönen (ist an Microsoft angelehnt) und bei Anklicken die Menübar ausklappt. (Nach unten)

    Farbwahl usw. habe ich prima hinbekommen. Was ich aber ändern möchte, ist die "Lage" des Menüs. Ich möchte das ganze vertikal statt horizontal haben, also die Menüpunkte untereinander, und dann die ausklappbare Menübar dann nicht unter den einzelnen Punkten, sondern ein Stück seitlich versetzt (nach rechts).

    Ich finde aber einfach nicht die Stelle, die ich dazu verändern muss. Habe schon diverses rumprobiert, aber es tut sich da nichts.

    Ach, was ich noch dazu sagen sollte: ich hatte die Menüpunkte in eine Tabelle eingefügt, damit sie schön untereinander stehen, da lauter <br>-Tags unsauberes Programmieren gewesen wären.

    Hier mein abgeändertes Script:
    (sorry, ist sehr lang ...)

    <style type="text/css">

    #menuBar {
    background-color: #ffffcc;
    border: 1px solid;
    border-color: #000000 #000000 #000000 #000000;
    color: #000000;
    font-size: 1pt;
    padding: 4px 2px 4px 2px;
    text-align: left;
    height: 150px;
    width: 20%;
    }

    a.menuButton, a.menuButtonActive {
    background-color: transparent;
    border: 1px solid #000000;
    color: #000000; //Schriftfarbe
    cursor: default;
    font-family: Arial, Tahoma, sans-serif;
    font-size: 8pt;
    font-style: normal;
    font-weight: normal;
    margin: 1px;
    padding: 2px 6px 2px 6px;
    position: relative;
    left: 0px;
    top: 0px;
    text-decoration: none;
    }

    a.menuButton:hover {
    background-color: transparent;
    border-color: #000000 #000000 #000000 #000000;
    color: #000000;
    }

    a.menuButtonActive, a.menuButtonActive:hover {
    background-color: #ffffcc;
    border-color: #000000 #000000 #000000 #000000;
    color: #000099;
    left: 0px;
    top: 0px;
    }

    .menu {
    background-color: #ffffcc;
    border: 1px solid;
    border-color: #000000 #000000 #000000 #000000;
    padding: 0px;
    position: absolute;
    text-align: left;
    visibility: hidden;
    }

    a.menuItem {
    background-color: transparent;
    color: #000099;
    cursor: default;
    display: block;
    font-family: Arial, Tahoma,sans-serif;
    font-size: 8pt;
    font-style: normal;
    font-weight: normal;
    margin: 0px;
    padding: 2px;
    padding-left: 12px;
    padding-right: 16px;
    text-decoration: none;
    white-space: nowrap;
    }

    a.menuItem:hover {
    background-color: #000099;
    color: #ffffff;
    }

    .menuItemSep {
    border-bottom: 1px solid #000000;
    border-top: 1px solid #ffffff;
    margin: 3px 4px 3px 4px;
    }

    </style>
    <script type="text/javascript">
    <!-- ---------------------------------------------------- -->
    <!-- Menu Bar Demo -->
    <!-- -->
    <!-- Copyright 2000 by Mike Hall -->
    <!-- Please see http://www.brainjar.com for terms of use. -->
    <!-- ---------------------------------------------------- -->
    // Determine browser and version.

    function Browser() {

    var ua, s, i;

    this.isIE = false; // Internet Explorer
    this.isNS = false; // Netscape
    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();

    // Global variable for tracking the currently active button.

    var activeButton = null;

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

    if (browser.isIE)
    document.onmousedown = pageMousedown;
    if (browser.isNS)
    document.addEventListener("mousedown", pageMousedown, true);

    function pageMousedown(event) {

    var el;

    // If there is no active menu, exit.

    if (!activeButton)
    return;

    // Find the element that was clicked on.

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

    // If the active button was clicked on, exit.

    if (el == activeButton)
    return;

    // If the element clicked on was not a menu button or item, close the
    // active menu.

    if (el.className != "menuButton" && el.className != "menuItem" &&
    el.className != "menuItemSep" && el.className != "menu")
    resetButton(activeButton);
    }

    function buttonClick(button, menuName) {

    // Blur focus from the link to remove that annoying outline.

    button.blur();

    // Associate the named menu to this button if not already done.

    if (!button.menu)
    button.menu = document.getElementById(menuName);

    // Reset the currently active button, if any.

    if (activeButton && activeButton != button)
    resetButton(activeButton);

    // Toggle the button's state.

    if (button.isDepressed)
    resetButton(button);
    else
    depressButton(button);

    return false;
    }

    function buttonMouseover(button, menuName) {

    // If any other button menu is active, deactivate it and activate this one.
    // Note: if this button has no menu, leave the active menu alone.

    if (activeButton && activeButton != button) {
    resetButton(activeButton);
    if (menuName)
    buttonClick(button, menuName);
    }
    }

    function depressButton(button) {

    var w, dw, x, y;

    // Change the button's style class to make it look like it's depressed.

    button.className = "menuButtonActive";

    // For IE, set an explicit width on the first menu item. This will
    // cause link hovers to work on all the menu's items even when the
    // cursor is not over the link's text.

    if (browser.isIE && !button.menu.firstChild.style.width) {
    w = button.menu.firstChild.offsetWidth;
    button.menu.firstChild.style.width = w + "px";
    dw = button.menu.firstChild.offsetWidth - w;
    w -= dw;
    button.menu.firstChild.style.width = w + "px";
    alert('w:' + w + ' dw:' + dw);
    }

    // Position the associated drop down menu under the button and
    // show it. Note that the position must be adjusted according to
    // browser, styling and positioning.

    x = getPageOffsetLeft(button);
    y = getPageOffsetTop(button) + button.offsetHeight;
    if (browser.isIE) {
    x += 2;
    y += 2;
    }
    if (browser.isNS && browser.version < 6.1)
    y--;

    // Position and show the menu.

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

    // Set button state and let the world know which button is
    // active.

    button.isDepressed = true;
    activeButton = button;
    }

    function resetButton(button) {

    // Restore the button's style class.

    button.className = "menuButton";

    // Hide the button's menu.

    if (button.menu)
    button.menu.style.visibility = "hidden";

    // Set button state and clear active menu global.

    button.isDepressed = false;
    activeButton = null;
    }

    function getPageOffsetLeft(el) {

    // Return the true x coordinate of an element relative to the page.

    return el.offsetLeft + (el.offsetParent ? getPageOffsetLeft(el.offsetParent) : 0);
    }

    function getPageOffsetTop(el) {

    // Return the true y coordinate of an element relative to the page.

    return el.offsetTop + (el.offsetParent ? getPageOffsetTop(el.offsetParent) : 0);
    }

    </script>


    <!-- Tags for the menu bar. -->
    <body bgcolor="#FFFFCC" text="#000000">

    <!-- Hier hatte ich die Tabelle hinzugefügt -->
    <table border="0">
    <tr>
    <td><div id="menuBar">
    <a class="menuButton"
    href=""
    onclick="return buttonClick(this, 'fileMenu');"
    onmouseover="buttonMouseover(this, 'fileMenu');">File</a>
    </div>
    </td>
    </tr>

    <tr>
    <td><div id="menuBar">
    <a class="menuButton"
    href=""
    onclick="return buttonClick(this, 'editMenu');"
    onmouseover="buttonMouseover(this, 'editMenu');">Edit</a>
    </div>
    </td>
    </tr>

    <tr>
    <td><div id="menuBar">
    <a class="menuButton"
    href=""
    onclick="return buttonClick(this, 'viewMenu');"
    onmouseover="buttonMouseover(this, 'viewMenu');">View</a>
    </div>
    </td>
    </tr>

    <tr>
    <td><div id="menuBar">
    <a class="menuButton"
    href=""
    onclick="return buttonClick(this, 'toolsMenu');"
    onmouseover="buttonMouseover(this, 'toolsMenu');">Tools</a>
    </div>
    </td>
    </tr>

    <tr>
    <td><div id="menuBar">
    <a class="menuButton"
    href=""
    onclick="return buttonClick(this, 'optionsMenu');"
    onmouseover="buttonMouseover(this, 'optionsMenu');">Options</a>
    </div>
    </td>
    </tr>

    <tr>
    <td><div id="menuBar">
    <a class="menuButton"
    href=""
    onclick="return buttonClick(this, 'helpMenu');"
    onmouseover="buttonMouseover(this, 'helpMenu');">Help</a>
    </div>
    </td>
    </tr>
    </table>

    <!-- Tags for the drop down menus. -->

    <div id="fileMenu" class="menu">
    <a class="menuItem" href="blank.html">File Menu Item 1</a>
    <a class="menuItem" href="blank.html">File Menu Item 2</a>
    <a class="menuItem" href="blank.html">File Menu Item 3</a>
    <div class="menuItemSep"></div>
    <a class="menuItem" href="blank.html">File Menu Item 4</a>
    <a class="menuItem" href="blank.html">File Menu Item 5</a>
    <div class="menuItemSep"></div>
    <a class="menuItem" href="blank.html">File Menu Item 6</a>
    </div>

    <div id="editMenu" class="menu">
    <a class="menuItem" href="blank.html">Edit Menu Item 1</a>
    <div class="menuItemSep"></div>
    <a class="menuItem" href="blank.html">Edit Menu Item 2</a>
    <a class="menuItem" href="blank.html">Edit Menu Item 3</a>
    <a class="menuItem" href="blank.html">Edit Menu Item 4</a>
    <div class="menuItemSep"></div>
    <a class="menuItem" href="blank.html"
    target="_blank" onclick="resetButton(activeButton);return true;">Edit Menu Item 5</a>
    </div>

    <div id="viewMenu" class="menu">
    <a class="menuItem" href="blank.html">View Menu Item 1</a>
    <a class="menuItem" href="blank.html">View Menu Item 2</a>
    <a class="menuItem" href="blank.html">View Menu Item 3</a>
    </div>

    <div id="toolsMenu" class="menu">
    <a class="menuItem" href="blank.html">Tools Menu Item 1</a>
    <a class="menuItem" href="blank.html">Tools Menu Item 2</a>
    <a class="menuItem" href="blank.html">Tools Menu Item 3</a>
    <div class="menuItemSep"></div>
    <a class="menuItem" href="blank.html">Tools Menu Item 4</a>
    <a class="menuItem" href="blank.html">Tools Menu Item 5</a>
    </div>

    <div id="optionsMenu" class="menu">
    <a class="menuItem" href="blank.html">Options Menu Item 1</a>
    <a class="menuItem" href="blank.html">Options Menu Item 2</a>
    <a class="menuItem" href="blank.html">Options Menu Item 3</a>
    </div>

    <div id="helpMenu" class="menu">
    <a class="menuItem" href="blank.html">Help Menu Item 1</a>
    <a class="menuItem" href="blank.html">Help Menu Item 2</a>
    <div class="menuItemSep"></div>
    <a class="menuItem" href="blank.html">Help Menu Item 3</a>
    </div>



    Könnte mir da jemand evtl. weiterhelfen?

    Wäre schön ...

    Greetz,
    Nonens

  2. #2
    Lethe ist offline Tripel-As
    registriert
    11-03-2002
    Ort
    Saarbrücken
    Beiträge
    206
    Im Grunde läuft das darauf hinaus, daß du ein völlig anderes Menü willst , wenn ich dich richtig verstehe. Schau doch mal unter

    http://www.burmees.nl/menu/menus.htm

    da findest du ein richtig starkes Menu, das du laufen lassen kannst, wie immer du willst, horizontal oder vertikal, von oben nach unten, unten nach oben, links nach rechts, rechts nach links, versetzt oder nicht, frameübergreifend oder nicht, frei positionierbar, völlig freie layoutgestaltung usw. usw.

    Ein Menü, das meiner Meinung nach jedes andere seiner Art locker in die Tasche steckt ...
    Geändert von Lethe (11-04-2002 um 12:21 Uhr)
    Kommunikation ist nur zwischen Gleichen möglich

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •