» »

[JS]Visible-hidden

[JS]Visible-hidden

DiTi ::

Imam en problemček v javascriptu. Nisem preveč vešč JSja in skušam na najbolj enostaven način rešiti zadevo.

No ideja je ta. Imam vodoravni glavni meni (5 povezav). 4 od 5 povezav imajo podmenije. Te povezave se prikažejo vodoravno eno vrstico nižje, ko greš z miško čez glavno povezavo. (podobno kot navaden dropdown meni). Sedaj pa nočem, da se ta spodnji meni takoj skrije če greš z miško dol iz glavne povezave, ampak da ostane, dokler ne greš z miško na drugi meni v glavni navigaciji, takrat se prikaže drugi podmeni.

Zadeva mi trenutno deluje tako da imam na začetku vse podmenije narejene na "hidden" in ko greš z miško na določen glavni meni se spodaj prikaže podmeni in tudi ostane. problem je pa da ko greš spet na drugi meni prvi ostani, torej pride do prekrivanja.

upam da sem napisal dovolj razumno, prilagam še pa kodo.
HTML
<div title="Navigation" id="navi">
<span id="home"><a href="news.php" class="navi_link">Domov</a></span>
<span id="translate" onmouseover="javascript:visible('navi_p')" ><a href="news.php" class="navi_link">Prevajanja</a></span>
<span id="seminars" onmouseover="javascript:visible('navi_t')"><a href="news.php" class="navi_link">Tečaji in seminarji</a></span>
<span id="other" onmouseover="javascript:visible('navi_o')"><a href="news.php" class="navi_link">Ostale storitve</a></span>
<span id="about"><a href="news.php" class="navi_link">O podjetju</a></span>
</div>
<div id="navi2">
<div id="navi_p" style="visibility:hidden; position:absolute">Pisno prevajanje <strong>|</strong> Brezplačno prevajanje <strong>|</strong> Sodno overjeni prevodi <strong>|</strong> Cenik <strong>| </strong>Zagotavljanje kakovosti <strong>|</strong> Informativni izračun <strong>|</strong> Spletno naročilo</div>
<div id="navi_t" style="visibility:hidden;  position:absolute">Tečaji <strong>|</strong> Seminarji <strong>|</strong> Sodno overjeni prevodi <strong>|</strong> Cenik <strong>| </strong>Zagotavljanje kakovosti <strong>|</strong> Informativni izračun <strong>|</strong> Spletno naročilo</div>
<div id="navi_o" style="visibility:hidden; position:absolute">Ostalo</div>
</div>
</div>


Javascript
function visible(id){ 

var obj= document.getElementById(id)

obj.style.visibility='visible';
}


edit:
zadevo zdaj nekako realiziral ampak me samo zanima če je to pravilno oz. če je kakšna boljša rešitev
function visible(id){ 

var obj= document.getElementById(id)
var link_o = document.getElementById("navi_o");
var link_p = document.getElementById("navi_p");
var link_t = document.getElementById("navi_t");
if(obj==link_p){
	link_o.style.visibility='hidden';
	link_t.style.visibility='hidden';
}else if(obj==link_o){
	link_p.style.visibility='hidden';
	link_t.style.visibility='hidden';
}else if(obj==link_t){
		link_p.style.visibility='hidden';
	link_o.style.visibility='hidden'; 
}
	obj.style.visibility='visible';
}
  • spremenil: DiTi ()

urosz ::

saj tej rešitvi nič ne manjka, edino na slabših računalnikih in na kakih starejših verzijah brskalnikov bi mogoče malo "lagiralo" vse skupaj, kar pa ni tvoj problem

edit: edino še mogoče dodaj, da ko zapustiš submenu, da ga da na hidden

Zgodovina sprememb…

  • spremenil: urosz ()


Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
»

Javascript - izračun razlike v datumih

Oddelek: Programiranje
81841 (1696) kogledom
»

JavaScript

Oddelek: Izdelava spletišč
91395 (1240) Gandalfar
»

JavaScript zunaj HTML

Oddelek: Izdelava spletišč
111217 (1115) *wolf*
»

js generiran input hidden noče biti POSTan z php

Oddelek: Izdelava spletišč
51766 (1683) Buffy
»

Drop down meni!

Oddelek: Izdelava spletišč
101909 (1662) ACE

Več podobnih tem