Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JS] [HTML] [CSS] Ciekawy efekt menu.
bobo168
post
Post #1





Grupa: Zarejestrowani
Postów: 201
Pomógł: 9
Dołączył: 23.08.2006

Ostrzeżenie: (0%)
-----


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 smile.gif W teori jest to łatwe ale w praktyce już gożej dry.gif .
Z góry dzięki za skrypty smile.gif
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi (1 - 2)
Zajec
post
Post #2





Grupa: Zarejestrowani
Postów: 1 086
Pomógł: 8
Dołączył: 10.12.2003

Ostrzeżenie: (0%)
-----


  1. <img src="" alt="" />
  2. <ul class="linki">
  3. <li>link 1</li>
  4. <li>link 2</li>
  5. <li>link 3</li>
  6. </ul>


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


Wersje JS dla IE niech ktoś Ci napisze sleepysmiley03.gif
Go to the top of the page
+Quote Post
Mystic007
post
Post #3





Grupa: Zarejestrowani
Postów: 106
Pomógł: 1
Dołączył: 22.04.2006
Skąd: Będzin

Ostrzeżenie: (0%)
-----


Aż sam postanowiłem zrobić takie menu winksmiley.jpg Tutaj są moje wypociny:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
  2. ul { position: absolute; margin:0px; padding:5px;list-style-type: none;background-color:#dddddd;border: medium solid blue}
  3. </style>
  4. </HEAD>
  5. <BODY onload="me('a')">
  6.  
  7. <script languange="javascript" type="text/javascript">
  8. function me(id){
  9. document.getElementById(id).style.display=(document.getElementById(id).style.display==='none')? 'block' : 'none';
  10. }
  11. <div onmouseover="me('a')" onmouseout="me('a')" style="cursor:pointer;" /><b>MENU</b></div>
  12. <ul id="a" onmouseover="me('a')" onmouseout="me('a')">
  13. <li><a href="http://www.wp.pl">WP</a></li>
  14. <li><a href="http://www.portfolio.forall.pl">Mystic personal Portfolio</a></li>
  15. <li><a href="http://www.php.pl">php.pl</a></li>
  16. </ul>eeeebbbbbbbbbbb<br />eeeebbbbbbbbbbb<br />eeeebbbbbbbbbbb<br />eeeebbbbbbbbbbb<br />eeeebbbbbbbbbbb
  17.  
  18. </BODY>
  19. </HTML>


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

Ten post edytował Mystic007 18.09.2006, 20:16:48
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 19.08.2025 - 14:59