[JS] Proste rozwijane menu

0

Witam
Po 3godzinach szukania poddałem się.
Poszukuję takiego efektu menu jak tu:
http://motosprzet.pl/ Chodzi o menu: Sprzet, google i okulary itd
Tylko chcę to zrobic w javascript.

Jedyne co znalazłem to:
http://javascript.internet.com/navigation/expanding-menu.html
W tym skrypcie menu jest napisane w OL, LI itd. Własnie takiego efektu potrzebowałem, ale bez użycia listy (ol,li). Czy możecie mi pomóć ? ;) Wydaje sie proste i moze dlatego nie moge znalezc.

p.s. jestem laik w js i nie potrafię napisac samemu</url>

0

chodzi ci o coś takiego jak tu:
http://programista.website.pl ?

0

Trochę pada na http://validator.w3.org/check?verbose=1&uri=http%3A//programista.website.pl/
Może coś takiego jak na http://kucyk-89.kandp.dmkhost.net w menu? Nie ma co prawda efektu animacji, ale kto co lubi. No i w każdym szczególe zgodne z najnowszymi standardami.

0

Zawadzki, dlaczego chcesz bez użycia listy? Przecież menu się robi na listach nieuporządkowanych, a przynajmniej powinno.

0
Adam.Pilorz napisał(a)

No i w każdym szczególe zgodne z najnowszymi standardami.
hehe, ale cos mi sie rozjezdza to menu :P
Dopiero jak klikne w jakas pozycje to wraca do "odpowiedniego" stanu

listy dobra rzecz :]
Mozesz tez na tabelce lub div'acha

A najprostrza rzecza jaka mozesz zrobic, to uzyc np funkcyjki

function show_hide(obj)
{
  try {
      var element = document.getElementById(obj);
      var ret = element.style.display;
      element.style.display = (ret?'':'none');
      return ret;
  }
  catch (err) { }
}

Prosta ale prostych menu i rozwijalnych listach nieodzowna ;)
A jak zrobic zeby sie poprzednie menu chowalo??

var last = null;
function show_hide(obj)
{
  try {
      if (last) {
          var element = document.getElementById(last);
          element.style.display = 'none';
      }
      var element = document.getElementById(obj);
      var ret = element.style.display;
      element.style.display = (ret?'':'none');
      last = obj;
      return ret;
  }
  catch (err) { }
}
0

desperat a mółgbyś podać kod html z listą ? bo nie bardzo wiem jak to zrobić (uzyć js) ?

0
desperat napisał(a)
Adam.Pilorz napisał(a)

No i w każdym szczególe zgodne z najnowszymi standardami.
hehe, ale cos mi sie rozjezdza to menu :P
Dopiero jak klikne w jakas pozycje to wraca do "odpowiedniego" stanu

Chodzi Ci o to, że nagłówek przeskakuje jak się na niego najedzie? Nie mam zielonego pojęcia, czego to wina, ale dzieje się to tylko na IE - stąd olałem sprawę, bo to wina IE, że coś źle interpretuje (BTW AFAIK na IE 7 działa).

0
Zawadzki14 napisał(a)

desperat a mółgbyś podać kod html z listą ?

Pisze z glowy wiec nie czepiac sie jak nie bedzie dzialalo :P

<ul id="menu">
 <li><a href="javascript:show_hide('menu_1');">Pierwsze menu</a>
  <ul id="menu_1">
   <li><a href="strona1.html">Podstrona 1</a></li>
   <li><a href="strona2.html">Podstrona 2</a></li>
  </ul>
 </li>
 <li><a href="javascript:show_hide('menu_2');">Drogie menu</a>
  <ul id="menu_2">
   <li><a href="javascript:show_hide('menu_2_1');">Podmenu</a>
    <ul id="menu_2_1">
     <li><a href="strona3.html">Podstrona 3</a></li>
    </ul>
   </li>
   <li><a href="strona4.html">Podstrona 4</a></li>
  </ul>
 </li>
</ul>

Oczywiscie czeste wykozyswywanie getElementById() jest czasochlonne i przy tak prostym i schematycznym menu mozna zmienic to tak zeby bral kolejny obiekt, bo jesli jest podmenu (ul) to znajduje sie zaraz za naszym linkiem (a)

0

to ja tylko napisze że okazało sie że wszystko działa ale dopiero gdy kod javascript umiesci sie PO tych listach:

<ul id="menu_rozwijane">
  <li>Menu Item 1
    <ol>
      <li><a href="#">Sub Item 1.1</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
    </ol>
  </li>
  <li>Menu Item 2
    <ol>
      <li><a href="#">Sub Item 2.1</a></li>
      <li><a href="#">Sub Item 2.2</a></li>
      <li><a href="#">Sub Item 2.3</a></li>
    </ol>
  </li>
</ul>

<script type="text/javascript" src="expandingMenu.js"></script>

w koncu dziala. dziekuje za pomoc ;)

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