Rozwijane menu nie chowa się :: 4programmers.net

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?

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

0

Ponawiam moje pytanie

0

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

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

weź chociaż zaglądaj do konsoli

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?

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

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

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?

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";
	}
}

Rozwijane menu nie chowa się

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

Praca dla programistów

Forum dyskusyjne

Sprawy administracyjne

O nas

Skontaktuj się z nami