Forum PHP.pl > [JS] [HTML] [CSS] Ciekawy efekt menu.

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JS] [HTML] [CSS] Ciekawy efekt menu.

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

bobo168

13.09.2006, 11:34:34

Witam. Chciałbym zrobić menu podobne do tego na stonie : KLIK.
Czyli po najechaniu na obrazek pokazuje się div z linkami tekstowymi i w zależnosci na jaki link najedziemy taki jest obrazek

W teori jest to łatwe ale w praktyce już gożej

.
Z góry dzięki za skrypty

Zajec

13.09.2006, 13:17:21

[HTML] pobierz, plaintext 
<img src="" alt="" />
<ul class="linki">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
</ul>
[HTML] pobierz, plaintext

Kod

.linki { position: absolute; display: none; }
img:hover + ul.linki { display: block; }

Wersje JS dla IE niech ktoś Ci napisze

Mystic007

18.09.2006, 20:16:31

Aż sam postanowiłem zrobić takie menu

Tutaj są moje wypociny:

[HTML] pobierz, plaintext 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
  <style>
ul { position: absolute; margin:0px; padding:5px;list-style-type: none;background-color:#dddddd;border: medium solid blue}
  </style>
</HEAD>
<BODY onload="me('a')">
 
<script languange="javascript" type="text/javascript">
function me(id){
    document.getElementById(id).style.display=(document.getElementById(id).style.display==='none')? 'block' : 'none';
}
</script>
<div onmouseover="me('a')" onmouseout="me('a')" style="cursor:pointer;" /><b>MENU</b></div>
<ul id="a" onmouseover="me('a')" onmouseout="me('a')">
<li><a href="http://www.wp.pl">WP</a></li>
<li><a href="http://www.portfolio.forall.pl">Mystic personal Portfolio</a></li>
<li><a href="http://www.php.pl">php.pl</a></li>
</ul>eeeebbbbbbbbbbb<br />eeeebbbbbbbbbbb<br />eeeebbbbbbbbbbb<br />eeeebbbbbbbbbbb<br />eeeebbbbbbbbbbb
 
</BODY>
</HTML>
[HTML] pobierz, plaintext

Śmiga pod IE i Mozillą, oczywiśce style są czysto przykładowe, ale muszisz zostawić position: absolute;

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.