Autor Zpráva
norek
Profil *
#1 · Zasláno: 26. 3. 2008, 17:05:29
Odpovědět Citovat
Ahoj all, mám tento java script 
var PocetMenu = 13;

function Show(CisMenu)    {
  var menu = document.getElementById('submenu'+CisMenu);	
  menu.style.visibility="visible";
}

function Hide() {
  var menu, i;
  for(i=1; i<=PocetMenu; i++) {
      menu = document.getElementById('submenu'+i);	
      menu.style.visibility="hidden";
  }
}


a když najedu na položku tak se rozbalí dalších 10 položek, ale když zas najedu mimo menu tak se to nezabalí a zůstane to rozbalené :( pls poradte ?
Leo
Profil
#2 · Zasláno: 26. 3. 2008, 17:24:35
Odpovědět Citovat
Bez html (a pripadne css) tezko rict, Leo
norek
Profil *
#3 · Zasláno: 26. 3. 2008, 17:26:41
Odpovědět Citovat
css: 
#menu {display: block;float: left;position: relative;}
#menu ul {display: block;float: left;width: 900px;margin: 0px;padding: 0px;background: #103f70 url(../img/bg-menu.gif) repeat-x center top;}
#menu ul li {display: inline;float: left;height: 26px;}

#menu ul li.fotky 		{width: 50px;}
#menu ul li.videa 		{width: 50px;}
#menu ul li.tv			 	{width: 35px;}
#menu ul li.chat	 		{width: 45px;}
#menu ul li.srazy		 	{width: 55px;}
#menu ul li.lide		 	{width: 50px;}
#menu ul li.seznamka		{width: 90px;}
#menu ul li.forum 		{width: 60px;}
#menu ul li.katalog 		{width: 70px;}
#menu ul li.blog 			{width: 50px;}
#menu ul li.povidky 		{width: 70px;}
#menu ul li.magazin 		{width: 70px;}
#menu ul li.shop 			{width: 50px;}

#menu ul li.fotky a			{width: 50px;}
#menu ul li.videa a			{width: 50px;}
#menu ul li.tv a				{width: 35px;}
#menu ul li.chat a			{width: 45px;}
#menu ul li.srazy a			{width: 55px;}
#menu ul li.lide a			{width: 50px;}
#menu ul li.seznamka a		{width: 90px;}
#menu ul li.forum a			{width: 60px;}
#menu ul li.katalog a		{width: 70px;}
#menu ul li.blog a			{width: 50px;}
#menu ul li.povidky a		{width: 70px;}
#menu ul li.magazin a		{width: 70px;}
#menu ul li.shop a			{width: 50px;}

#menu ul li.fotky ol li a				{width: 170px;}
#menu ul li.videa ol li a				{width: 145px;}
#menu ul li.tv ol li a					{width: 170px;}
#menu ul li.chat ol li a				{width: 145px;}
#menu ul li.srazy ol li a				{width: 170px;}
#menu ul li.lide ol li a				{width: 170px;}
#menu ul li.seznamka ol li a			{width: 145px;}
#menu ul li.forum ol li a				{width: 145px;}
#menu ul li.katalog ol li a			{width: 145px;}
#menu ul li.blog ol li a				{width: 145px;}
#menu ul li.povidky ol li a			{width: 145px;}
#menu ul li.magazin ol li a			{width: 145px;}
#menu ul li.shop ol li a				{width: 145px;}

#menu ul li.fotky ol					{width: 170px;}
#menu ul li.videa ol li				{width: 170px;}
#menu ul li.tv ol li					{width: 170px;}
#menu ul li.chat ol li				{width: 170px;}
#menu ul li.srazy ol li				{width: 170px;}
#menu ul li.lide ol li				{width: 170px;}
#menu ul li.seznamka ol li			{width: 170px;}
#menu ul li.forum ol li a			{width: 170px;}
#menu ul li.katalog ol li a		{width: 170px;}
#menu ul li.blog ol li a			{width: 170px;}
#menu ul li.povidky ol li a		{width: 170px;}
#menu ul li.magazin ol li a		{width: 170px;}
#menu ul li.shop ol li a			{width: 170px;}

#menu ul li a {display: block;width: 100%;height: 26px;color: #ffffff;text-decoration: none;text-align: center;margin-right: 1px;font: bold 12px/26px Verdana, Arial, Tahoma, Sans-serif;}
#menu ul li a:hover {color: #FFFFFF;background: #40658d url(../img/bg-menu-hover.gif) repeat-x center top;margin-right: 1px;}
#menu ul li ol {display: block;visibility: hidden;position: absolute;left: 0px;top: 26px;padding: 0px;margin: 0px;}
#menu ul li ol li {display: block;float: none;padding: 0px;margin: 0px;height: 25px;text-align: center;background: none;}

#menu ul li ol#submenu1		{left: 0px;}
#menu ul li ol#submenu2		{left: 50px;}
#menu ul li ol#submenu3 	{left: 100px;}
#menu ul li ol#submenu4		{left: 135px;}
#menu ul li ol#submenu5 	{left: 180px;}
#menu ul li ol#submenu6 	{left: 235px;}
#menu ul li ol#submenu7 	{left: 285px;}
#menu ul li ol#submenu8 	{left: 375px;}
#menu ul li ol#submenu9		{left: 435px;}
#menu ul li ol#submenu10	{left: 505px;}
#menu ul li ol#submenu11 	{left: 555px;}
#menu ul li ol#submenu12 	{left: 625px;}
#menu ul li ol#submenu13 	{left: 695px;}

#menu ul li ol li a {display: block;padding-bottom:5px;clear: both;height: 18px;background: #396089;padding-left: 10px;font-size: 0.9em;font-weight: bold;text-decoration: none;text-align: left;border: 1px solid #103f70;}
#menu ul li ol li a.posledni {border-bottom: none;padding-bottom: 1px;}
#menu ul li ol li a:hover {background: #396089;color: #c60000;}
#menu ul li ol li a {-moz-opacity: 0.85;}
#menu ul li ol li a:hover {-moz-opacity: 1.00;}


Html: 
<div id="menu">

        <ul>

          <li class="fotky"><a href="#" title="Fotky" OnMouseOver="javascript: Hide(); Show(1);">Fotky</a>

            <ol id="submenu1">

              <li><a href="#" title="Fotky">Fotky</a></li>

              <li><a href="#" title="Fotky">Fotky</a></li>

            </ol>

          </li>

          <li class="videa"><a href="#" title="Videa" OnMouseOver="javascript: Hide(); Show(2);">Videa</a>

            <ol id="submenu2">

              <li><a href="#" title="Videa">Videa</a></li>

			        <li><a href="#" title="Videa">Videa</a></li>

            </ol>

          </li>

          <li class="tv"><a href="#" title="Zápasy Extraligy" OnMouseOver="javascript: Hide(); Show(3);">Tv</a>

            <ol id="submenu3">

              <li><a href="#" title="Tv">Tv</a></li>

              <li><a href="#" title="Tv">Tv</a></li>

            </ol>          

          </li>

          <li class="chat"><a href="#" title="Mládež" OnMouseOver="javascript: Hide(); Show(4);">Chat</a>

            <ol id="submenu4">

              <li><a href="#" title="Chat">Chat</a></li>

              <li><a href="#" title="Chat">Chat</a></li>

            </ol>

          </li>

          <li class="srazy"><a href="#" title="Srazy" OnMouseOver="javascript: Hide(); Show(5);">Srazy</a>

            <ol id="submenu5">

              <li><a href="#" title="Srazy">Srazy</a></li>   

              <li><a href="#" title="Srazy">Srazy</a></li>             

            </ol>

          </li>

          <li class="lide"><a href="#" title="Historie" OnMouseOver="javascript: Hide(); Show(6);">Lidé</a>

            <ol id="submenu6">

              <li><a href="#" title="Lidé">Lidé</a></li>

              <li><a href="#i" title="Lidé">Lidéi</a></li>

            </ol>

          </li>

          <li class="seznamka"><a href="#" title="Kontakt" OnMouseOver="javascript: Hide(); Show(7);">Seznamka</a>

            <ol id="submenu7">

              <li><a href="#" title="Seznamka">Seznamka</a></li>

              <li><a href="#" title="Seznamka">Seznamka</a></li>

            </ol>

          </li>

          <li class="forum"><a href="#" title="Klub" OnMouseOver="javascript: Hide(); Show(8);">Forum</a>

            <ol id="submenu8">

              <li><a href="#" title="Informace o klubu">Forum</a></li>

              <li><a href="#" title="Vedení">Forum</a></li>

            </ol>

          </li>

          <li class="katalog"><a href="#" title="Soupiska" OnMouseOver="javascript: Hide(); Show(9);">Katalog</a>

            <ol id="submenu9">

              <li><a href="#" title="Katalog">Katalog</a></li>

			        <li><a href="#" title="Katalog">Katalog</a></li>

            </ol>

          </li>

          <li class="blog"><a href="#" title="Zápasy Extraligy" OnMouseOver="javascript: Hide(); Show(10);">Blog</a>

            <ol id="submenu10">

              <li><a href="#" title="Blog">Blog</a></li>

              <li><a href="#" title="Blog">Blog</a></li>

            </ol>          

          </li>

          <li class="povidky"><a href="#" title="Mládež" OnMouseOver="javascript: Hide(); Show(11);">Povídky</a>

            <ol id="submenu11">

              <li><a href="#" title="Povídky">Povídky</a></li>

              <li><a href="#" title="Povídky">Povídky</a></li>

            </ol>

          </li>

          <li class="magazin"><a href="#p" title="Diskusní fórum" OnMouseOver="javascript: Hide(); Show(12);">Magazín</a>

            <ol id="submenu12">

              <li><a href="#" title="Magazín">Magazín</a></li>   

              <li><a href="#" title="Magazín">Magazín</a></li>             

            </ol>

          </li>

          <li class="shop"><a href="#" title="Historie" OnMouseOver="javascript: Hide(); Show(13);">Shop</a>

            <ol id="submenu13">

              <li><a href="#" title="Shop">Shop</a></li>

              <li><a href="#" title="Shop">Shop
norek
Profil *
#4 · Zasláno: 26. 3. 2008, 19:13:24
Odpovědět Citovat
lidi prosím poraďte je to nutné :(
peta
Profil
#5 · Zasláno: 27. 3. 2008, 08:21:17 · Upravil/a: peta
Odpovědět Citovat
norek
Bez odkazu zapomen. Takto mame kazdy jiny kod. Ten tvuj jsem musel doplnit.


OnMouseOver="javascript: Hide()
- OnMouseOver - javascriptova udalost sama o sobe, tudiz se tam javascript nepise
- OnMouseOver - se pise malymi pismeny

float: left;position: relative;
- nej prasarna, dela to problemy v IE i FF, kombinovat float a position navic v jednom prvku
- nikde nemas ukonceny float pomoci clear
- nemas prvky display:inline-block
Shrnme to, chybne floatovani, muze dojit ke skryvani textu v IE, k pretekani ve FF a dalsi neprijemne dusledky. Nechapu, proc to michas, kdys stejne kazdemu prvku zadavas presnou width. Zrovna muzes nastavit i pozici z leva a nepotrebujes float.

OnMouseOver="javascript: Hide(); Show(13);
jakpsatweb - javascript - udalosti
Podle kodu to funguje tak, ze pri prejeti odkazu se vse schova a objevi jen ten jeden. Pri prejeti jineho se opet vse schova a zobrazi jen ten jeden. Tak to ma fungovat podle kodu.
Ve FF mi to presne podle toho take funguje. Javascriptova konzola nehlasi zadny problem. v IE7 se to chova uplne stejne. Otazka je, zda mame stejny kod.

Pri tak velkem menu by stalo za to udalosti doplnit javascriptem. Zredukuje se ti html kod asi o 1-2k, protoze si myslim, ze ty udalosti potrebujes 2, ze to melo fungovat trochu jinak.
Navic bych zrusil vsechny class a Width nastavil podle offsetWidth daneho prvku pri stylu display:inline pro OL, LI, A. Totez pro Left. Vyhazenim class se zredukuje CSS o 3k, html o 1k.
Co se tyce scriptu, bude mit o 10-20 radku vic, coz je 1k navic.

Tez bych upravil funkci show ta, aby prvni v ni bylo hide. Tim padem neni treba na kazdy radek psat ="Hide(); Show(13);" staci pouze "Show(13);"

Nutne - poslys, tohle je forum. Cas na solidni odpoved je obvykle do 2 dnu. U specialni otazky i do 5, pokud ji nikdo nepochopi nebo je specializovana, ze odpoved zna malo lidi. Mozna bys mel najit spis chat, kdyz spechas.
Časová prodleva: 16 let

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0