Rozwijane menu nie chowa się

2014-11-19 11:26

Rejestracja: 6 lat temu

Ostatnio: 2 lata temu

0

Zrobiłem rozwijane menu w javascript, ale gdy określam wartość z-index, to przestaje mi się chować po opuszczeniu elemenu przez mysz - bez z-index jest ok a nie mogę jej inaczej nadać, bo mam zły efekt

window.onload = initAll;

function initAll() {
    var allLinks = document.getElementsByTagName("a");

    for (var i=0; i<allLinks.length; i++) {
        if (allLinks[i].className.indexOf("menuLink") > -1) {
            allLinks[i].onmouseover = toggleMenu;
            allLinks[i].onclick = clickHandler;
        }
    }
}

function clickHandler(evt) {
    if (evt) {
        if (typeof evt.target == "string") {
            toggleMenu(evt,evt.target);
        }
        else {
            toggleMenu(evt,evt.target.toString());
        }
    }
    else {
        toggleMenu(evt,window.event.srcElement.href);
    }
    return false;
}

function toggleMenu(evt,currMenu) {
    if (toggleMenu.arguments.length < 2) {
        var currMenu = this.href;
    }

    var startMenu = currMenu.lastIndexOf("#")+1;
    var thisMenuName = currMenu.substring(startMenu);

    var thisMenu = document.getElementById(thisMenuName);
    thisMenu.style.display = "block";
    thisMenu.style.position="absolute";
    thisMenu.style.z-index="2";

    thisMenu.parentNode.className = thisMenuName;
    thisMenu.parentNode.onmouseout = function() {
        document.getElementById(this.className).style.display = "none";
    }
    thisMenu.parentNode.onmouseover = function() {
        document.getElementById(this.className).style.display = "block";
    }
}

Gdzie jest błąd?

edytowany 3x, ostatnio: xpeye, 2014-11-20 12:26

Pozostało 580 znaków

2014-11-19 11:46

Rejestracja: 12 lat temu

Ostatnio: 1 rok temu

Lokalizacja: Zielona Góra

0

Na pierwszy rzut oka masz tam

for (var i=0; i<allLinks.length; i++) {
        if (allLinks[i].className.indexOf("menuLink") > -1) {
            allLinks[i].onmouseover = toggleMenu;
            allLinks[i].onclick = clickHandler;
        }
    }

i dodajesz handler na zdarzenie onMouseOver, ale nie ma nic o onMouseOut.

EDIT:

OK zauważyłem że jest niżej :P

edytowany 1x, ostatnio: cisu, 2014-11-19 11:49

Pozostało 580 znaków

2014-11-24 16:07

Rejestracja: 6 lat temu

Ostatnio: 2 lata temu

0

Ponawiam moje pytanie

Pozostało 580 znaków

2014-11-24 17:59
Moderator

Rejestracja: 13 lat temu

Ostatnio: 2 dni temu

Lokalizacja: Rzeszów

0

thisMenu.style.z-index="2";

to znaczy tyle, co thisMenu.style.z MINUS index = "2";

weź chociaż zaglądaj do konsoli


Tyłko dziwne, że bez tego nakładanie warstw nie działa. Robiłem zIndex i nic z tego - xpeye 2014-11-24 18:46
to daj cały kod, jakieś live demo, a nie takie strzępki, które same w sobie nic nie przybliżają do problemu - dzek69 2014-11-24 19:55

Pozostało 580 znaków

2014-11-25 09:10

Rejestracja: 6 lat temu

Ostatnio: 2 lata temu

0

ok
Plik gora.php

<?php
if(!isset($_SESSION))
{
    session_start();
}
?>
<!DOCTYPE html>
<html lang="pl">
    <head>
        <title>Tytuł</title>
        <meta charset="utf-8"/>
        <meta name="robots" content="index,follow"/>
        <meta name="description" content=""/>
        <meta name="keywords" content=""/>
        <!--[if lt IE 9]>
            <script src="html5shiv.js"></script>
        <![endif]-->
        <script>
             //<![CDATA[ 
                document.write('<div id="fb-root"></div>'); 
             //]]> 
        </script>
        <script src="menu.js"></script>
        <script src="facebook.js"></script> 
        <script src="js/jquery-1.7.2.min.js"></script>
        <script src="js/lightbox.js"></script>
        <link rel="shortcut icon" href="jacekikona.ico"/>
        <link rel="stylesheet" href="css/lightbox.css"/>
        <link rel="stylesheet" href="style2.css"/>
    </head>
    <body>
        <header role="banner">
            <table class="logo">
                <tr>
                    <th class="tytul">
                        <p class="tytul">Tytuł</p>
                    </th>
                    <th class="adres">
                        <p class="adres">www.xpeye.za.pl</p>
                    </th>
                </tr>
            </table>
        </header>
        <nav role="navigation">
            <nav class="menu">
                <nav class="menu1">
                    <a class="menu" href="http://www.xpeye.za.pl/">News</a>
                    <a class="menu" href="http://www.xpeye.za.pl/jacek.php">O Jacku</a>
                </nav>
                <nav class="menu2" id="#fanclub">
                    <a class="menuLink" href="#fanclub">FanClub</a>
                    <ul class="menu" id="fanclub">
                        <li><a class="menuRozwijane" href="http://www.xpeye.za.pl/czlonkowie.php">Członkowie OFC</a></li>
                        <li><a class="menuRozwijane" href="http://www.xpeye.za.pl/zapisy.php">Jak się zapisać?</a></li>
                    </ul>
                </nav>
                <nav class="menu3">
                    <a class="menu" href="http://www.xpeye.za.pl/zdjecia.php">Zdjęcia</a>               
                    <a class="menu" href="http://www.xpeye.za.pl/filmy.php">Filmy</a>
                    <a class="menu" href="http://www.xpeye.za.pl/plan.php">Zaplanowane koncerty i wydarzenia</a>
                    <a class="menu" href="http://www.xpeye.za.pl/czat.php">Czat</a>
                    <a class="menu" href="http://www.xpeye.za.pl/ksiega.php">Księga gości</a>
                    <a class="menu" href="http://www.xpeye.za.pl/linki.php">Linki</a>
                    <a class="menuOstatni" href="http://www.xpeye.za.pl/kontakt.php">Kontakt</a>
                </nav>
            </nav>
        </nav>
        <div style="width: 1000px; margin: 0 auto; z-index: 2;">
            <article role="main">

Fragment pliku style2.css

nav.menu {
    width: 920px;
    margin: 0 auto;
}

nav.menu1,nav.menu2 {
    float: left;
    display: inline;
}

nav.menu3 {
    display: inline;
}

ul.menu {
    display: none;
    text-align: center;
    background-image: url('kolory/tlotresci2.jpg'); 
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 2;
}

ul.menu li {
    padding-left: 5px;
    padding-right: 5px;
}

a.menu,a.menuOstatni,a.menuLink {
    font-size: 13pt;
    margin-left: 0px;
    margin-right: 15px;
}

a.menuOstatni {
    margin-right: 0px;
}

a.menuRozwijane {
    font-size: 13pt;
}

Plik menu.js

window.onload = initAll;

function initAll() {
    var allLinks = document.getElementsByTagName("a");

    for (var i=0; i<allLinks.length; i++) {
        if (allLinks[i].className.indexOf("menuLink") > -1) {
            allLinks[i].onmouseover = toggleMenu;
            allLinks[i].onclick = clickHandler;
        }
    }
}

function clickHandler(evt) {
    if (evt) {
        if (typeof evt.target == "string") {
            toggleMenu(evt,evt.target);
        }
        else {
            toggleMenu(evt,evt.target.toString());
        }
    }
    else {
        toggleMenu(evt,window.event.srcElement.href);
    }
    return false;
}

function toggleMenu(evt,currMenu) {
    if (toggleMenu.arguments.length < 2) {
        var currMenu = this.href;
    }

    var startMenu = currMenu.lastIndexOf("#")+1;
    var thisMenuName = currMenu.substring(startMenu);

    var thisMenu = document.getElementById(thisMenuName);
    thisMenu.style.display="block";
    thisMenu.style.position="absolute";
    thisMenu.style.z-index="2";

    thisMenu.parentNode.className = thisMenuName;
    document.getElementById(currMenu).onmouseout = function() {
        document.getElementById(this.className).style.display = "none";
    }
    thisMenu.parentNode.onmouseover = function() {
        document.getElementById(this.className).style.display = "block";
    }
}

Gdzie jest błąd?

edytowany 3x, ostatnio: xpeye, 2014-11-25 09:21

Pozostało 580 znaków

2014-11-25 09:54

Rejestracja: 7 lat temu

Ostatnio: 11 godzin temu

Lokalizacja: Dąbrowa Górnicza

0

bledem jestz e nie czyatsz konsoli, wystarczy tam zajrzec i zobaczysz:

Line 31: 'currMenu' is already defined.
Line 40: Bad assignment.
Line 40: Expected an assignment or function call and instead saw an expression.
Line 40: Missing semicolon. 

2 ostatnie to brakuajcy semicolo, ale to pikus, 3 od dolu to blad o ktorym napisal dzek, a pierwszy mowi ze tu:

var currMenu = this.href;

tworzysz zmienna currMenu, ale ona juz istnieje (bo przesylasz ja w parametrze) i stad blad

Pozostało 580 znaków

2014-11-25 11:15

Rejestracja: 6 lat temu

Ostatnio: 2 lata temu

0

Ale tak

window.onload = initAll;

function initAll() {
    var allLinks = document.getElementsByTagName("a");

    for (var i=0; i<allLinks.length; i++) {
        if (allLinks[i].className.indexOf("menuLink") > -1) {
            allLinks[i].onmouseover = toggleMenu;
            allLinks[i].onclick = clickHandler;
        }
    }
}

function clickHandler(evt) {
    if (evt) {
        if (typeof evt.target == "string") {
            toggleMenu(evt,evt.target);
        }
        else {
            toggleMenu(evt,evt.target.toString());
        }
    }
    else {
        toggleMenu(evt,window.event.srcElement.href);
    }
    return false;
}

function toggleMenu(evt,currMenu) {
    if (toggleMenu.arguments.length < 2) {
        currMenu = this.href;
    }

    var startMenu = currMenu.lastIndexOf("#")+1;
    var thisMenuName = currMenu.substring(startMenu);

    var thisMenu = document.getElementById(thisMenuName);
    thisMenu.style.display="block";
    thisMenu.style.position="absolute";
    thisMenu.style.zIndex=2;

    thisMenu.parentNode.className = thisMenuName;
    thisMenu.parentNode.onmouseout = function() {
        document.getElementById(this.className).style.display = "none";
    }
    thisMenu.parentNode.onmouseover = function() {
        document.getElementById(this.className).style.display = "block";
    }
}

źle się to wyświetla. Nie ma efektu nakładania, rozwijanie zaczynia się od początku wiersza(czy pod słowem "News" a nie "FanClub") i reszta linków przechodzi na nowy wiersz

edytowany 3x, ostatnio: xpeye, 2014-11-27 16:11

Pozostało 580 znaków

2014-11-27 16:23

Rejestracja: 6 lat temu

Ostatnio: 2 lata temu

0

Może Wam pokażę to lepiej mnie zrozumiecie. Pierwsze zdjęcie pokazuje widok podstawowy, drugie po najechaniu myszką przy z-index, trzecie po najechaniu myszką przy zIndex a czwarte po opuszczeniu elementu przez myszkę przy zIndex. Chcę, aby po opuszczeniu elementu przez myszkę wrócił widok podstawowy. Gdzie jest błąd?

  • 2.jpg (0.03 MB) - ściągnięć: 99
  • 4.jpg (0.03 MB) - ściągnięć: 88
  • 3.jpg (0.03 MB) - ściągnięć: 93
  • 1.jpg (0.03 MB) - ściągnięć: 100

Pozostało 580 znaków

2015-04-04 12:55

Rejestracja: 6 lat temu

Ostatnio: 2 lata temu

0

Nadal liczę na Waszą pomoc, bo nie mogę sobie poradzić

window.onload = initAll;

function initAll() {
    var allLinks = document.getElementsByTagName("a");

    for (var i=0; i<allLinks.length; i++) {
        if (allLinks[i].className.indexOf("menuLink") > -1) {
            allLinks[i].onmouseover = toggleMenu;
            allLinks[i].onclick = clickHandler;
        }
    }
}

function clickHandler(evt) {
    if (evt) {
        if (typeof evt.target == "string") {
            toggleMenu(evt,evt.target);
        }
        else {
            toggleMenu(evt,evt.target.toString());
        }
    }
    else {
        toggleMenu(evt,window.event.srcElement.href);
    }
    return false;
}

function toggleMenu(evt,currMenu) {
    if (toggleMenu.arguments.length < 2) {
        currMenu = this.href;
    }

    var startMenu = currMenu.lastIndexOf("#")+1;
    var thisMenuName = currMenu.substring(startMenu);

    var thisMenu = document.getElementById(thisMenuName);
    thisMenu.style.display="block";
    thisMenu.style.position="absolute";
    thisMenu.style.z-index="2";

    thisMenu.parentNode.className = thisMenuName;
    thisMenu.parentNode.onmouseout = function() {
        document.getElementById(this.className).style.display = "none";
    }
    thisMenu.parentNode.onmouseover = function() {
        document.getElementById(this.className).style.display = "block";
    }
}

Pozostało 580 znaków

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0