jednostavna padajuca lista

Ako nekom nije tesko da mi istipka par redaka kako napravit drobing listu da na mouseover pokaze izbornik . tnx a lot. Svejedno u cemu .


nisam znao di da stavim ovu temu pa nek admin odluci ^________^

Ako sam te dobro razumeo, a ocigledno se nasi jezici sve vise razlikuju :-)) ovo ti valjda treba:

<select name=list onchange='self.location=this.value;'>
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
...
</select>

---

To znam i ja napravit :D . Meni treba ono kao sto ima na microsoft.com gore desno . Samo nemojte opet knjige preporucivat.

Ako mislis da padajuci meni koristi neki od programa koji imaju izvanredne opcije za takve stvari Na primer SoThinkov DHTML Menu Studio http://www.sothink.com

Ja imam Java skriptu za to što hoćeš. Mogu ti poslati na e-mail.
Pozdrav

aj posalji

Pa sto ne kazes tako? :-))
Cisto sumnjam da vise od 2 coveka ovde zna sta ti je "drobing lista" i "izbornik"

---

Ja e fakat' mogao bi neko da to razjasni..
-
jedan mali tutorial znalcima kao sto je "bluesman" nije nista..
jel'de bluesman ..

---

Ako hoces ono sto ima u gornjem desnom dijelu na microsoft.com ... to ti je najlakse napraviti u Fireworks MX ... ubacis POP-UP MENI ... i to ti je sav posao.

_poz

---

Dosta Java skripti ima na www.bujrum.net
Ima ih stvarno na tone.
Pozdrav

Jeste da sam direktno prozvan, ali stvarn mislim da postoji gomila toga na netu. ali hajde da objasnim princip. Napomena ovo je samo osnovni primer iz glave, stilovi i funkcije mogu biti totalno drugaciji.

Menu se nalazi u posebnom layer-u (<div>) koji je inicijalno saktiven:

<style>
.menuLayer { position:absolute; visibility: hidden; }
</style>

onda napravis par menija, (kao na microstoft.com) i u njima stavis bilo kakav html sadrzaj, obicno idu linkovi:

<div id=menu1 class=menuLayer style='left: 300; top:20; width:150; height: 100; background:#808080'>
<a href='url11'>item11</a><br>
<a href='url12'>item12</a><br>
<a href='url13'>item13</a><br>
</div>

<div id=menu2 class=menuLayer style='left: 300; top:20; width:150; height: 100; background:#808080'>
<a href='url21'>item21</a><br>
<a href='url22'>item22</a><br>
<a href='url23'>item23</a><br>
</div>

Zatim moras da definises kada se pokazuju meniju, odnosno kada korisnik predje preko nekog linka. ZNaci ako imas neki link:

<a href='menu1'>menu broj 1</a>

moras da mu dodas handler:

<a href='menu1' onmouseover='showMenu(1)'>menu broj 1</a>

a taj handler definises preko javascripta:

<script>
function showMenu(broj)
{
ref = document.getElementById('menu' + broj);
ref.style.visibility = 'visible';
}
</script>

Da bi se menu sklanjao mora se definisati i ta funkcija, znaci doda se i

<script>
function hideMenu (broj)
{
ref = document.getElementById('menu' + broj);
ref.style.visibility = 'hidden';
}
</script>

pa bi onda kompletan menu link bio

<a href='menu1' onmouseover='showMenu(1);' onmouseout='hideMenu(1);'>menu broj 1</a>

ostali linovi bi bili slicni:
<a href='menu2' onmouseover='showMenu(2);' onmouseout='hideMenu(2);'>moj meni broj 2</a>

Jos jednom napominjem da je ovo napravlujeno najjednostavnije moguce da bi pocetnici mogli da razumeju. Funkcije showMenu i hideMenu mogu se zameniti jednom funkcijom toggleMenu:

<script>
function toggleMenu (broj)
{
ref = document.getElementById('menu' + broj);
ref.style.visibility = (ref.style.visibility == 'visible') ? 'hidden' : 'visible';
}
</script>

pa onda href izgleda:
<a href='menu1' onmouseover='toggleMenu(1);' onmouseout='toggleMenu(1);'>menu broj 1</a>

Dodatno, u osnovnom drop-down meniju, stavke se mogu definisati kao novi layeri (div) pa bi to moglo da izgleda ovako:

<style>
.menuLayer { position:absolute; visibility: hidden; }
.subMenuLayer { width:100%; height:20; background:#f0f0f0; border:1px solid black; }
</style>

<div id=menu1 class=menuLayer style='left: 300; top:20; width:150; height: 100; background:#808080'>
<div class=subMenuLayer id=menu1_1 onMouseOver='toggleMenu(1);' onMouseOut='toggleMenu(1);'><a href='url11'>item11</a></div>
<div class=subMenuLayer id=menu1_2 onMouseOver='toggleMenu(2);' onMouseOut='toggleMenu(2);'><a href='url11'>item12</a></div>
<div class=subMenuLayer id=menu1_3 onMouseOver='toggleMenu(3);' onMouseOut='toggleMenu(3);'><a href='url11'>item13</a></div>
</div>

Da bi se dobio crossbrowser code potrebno je zameniti funkcije:

<script>
var isDOM = (document.getElementById ? true : false);
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);

function getRef(id) {
if (isDOM) return document.getElementById(id);
if (isIE4) return document.all[id];
if (isNS4) return document.layers[id];
}

function getSty(id) { return (isNS4 ? getRef(id) : getRef(id).style); }
</script>

pa se onda zameni funkcija toggleMenu:

<script>
function toggleMenu (broj)
{
sty = getSty('menu' + broj);
if (isDOM) sty.visibility = (sty.visibility == 'visible') ? 'hidden' : 'visible';
if (isNS4) sty.visibility = (sty.visibility == 'show') ? 'hide : 'show';
}
</script>

pa se na mouseover mogu menjati i boje manuitems...

<script>
function toggleMenu (broj)
{
sty = getSty('menu' + broj);
is_visible = (sty.visibility == 'visible');
sty.background = (is_visible) ? #0000ff : #f0f0f0;
if (isDOM) sty.visibility = (is_visible) ? 'hidden' : 'visible';
if (isNS4) sty.visibility = (is_visible) ? 'hide : 'show';
}
</script>

Ovo jos moze dodatno da se optimizuje ali i ovo je za pocetak vise nego dovoljno. Ako nesto ne radi, onda ima neka slovna greska jer ovo pisem iz glave :-)) Nadam se da nisam ugusio.

---

Bluesmen nisi direktno prozvan al zahvaljujem na trudu i kodu koji cu proucit kad budem imao vremena tnx a lot al ovaj sothnik za sada zadovoljava moje potrebe. Fala puno svima. Mozda ipak ne izgubim kosu do tridesete.

e sad je Ok.. blsmn.

---

Blsmn, svaka chast! Tako se objashnjava drugima, a ne ono "glup si, aj idi odavde". Vec sam upotrebio tvoj kod, samo bih hteo josh neshto. Kad mi ispadne layer, da bi se odrzao potrebno je da mishem predjem preko nekog linka unutar liste, a ako samo malo skrenem desno od njega (ali i dalje unutar layera) on se izgubi. Mislim da ovo moze nekom posetiocu da bude iritirajuce jer se zahteva malo veca preciznost pri selektovanju, pa ako je ovaj problem reshiv, zamolio bih za dopunu koda. Znachi, moze li se nekako srediti pa da layer ostane aktivan ako se predje bilo gde preko njega samog.
igi

---

Sorry, nemam sada previse vremena za neka objasnjavanja (u prolazu sam, mozda drugi put), ali evo ti link za jedan site koji sam radio gde postoje 2 tipa menija (jedan gore u headeru i drugi dole desno koji smo nazvali "ovalna navigacija"). Pogledaj code, sve lepo pise, nista nije sakriveno, pa probaj da skapiras kako funkcionise.

http://www.themorsoncollection.com/

Napomena: preskoci home page jer se (po izricitom zahtevu klijenta) ucitava neki tupavi flash od 450Kb, samo klikni na neki link levo ispod logotipa i idi na bilo koju drugu stranu. Opet, ja sam to napravio mnogo efektnije nego sto je trenutno tamo, ali opet po zahtevu klijenta morao sam da unesem neke izmene (recimo, "ako link nije podvucen korisnici nece znati da je to link")

---