Podstrony
- telcocafe
- [CSS] wielkosc tabelki 1 zalezna od wielkosci tabelki 2
- [CSS] Odstęp miedzy obrazkami w tle Jak usunąć odstęp miedzy obrazkami w tle ?
- [html Css] Obramowanie Czcionki jak obramowac czcionke??
- CSS 2.1 + PHP5 Nie odczytuje grafiki!!!!
- [XHTML/CSS] Opera problem z wyświetlaniem Problem z wyświetlaniem strony w opera
- [cSs] jasnoszary border 'jotpegów' Pomocy !! :)
- [HTML/CSS]Problem z wyświetlaniem strony różnice w wyświetlaniu strony w IE i Firefox
- [CSS] Problem wyświetlania w MSIE szablonu w internet explorer 6 zle wyświetla szablon
- [css + Ie + Div] Div Jest Zbyt Szeroki Div w ie nie trzyma swojego rozmiaru...
- Kod stylu kod stylu CSS
- zanotowane.pl
- doc.pisz.pl
- pdf.pisz.pl
- freetocraft.keep.pl
telcocafe
Witam,jak zrobić przy użyciu html, css, javascript menu takie menu: http://www.cssplay.c...efinition4.html
ale zeby wysuwalo sie ono plynnie a nie natychmiast pojawialo w calosci
pozdrawiam
Musisz użyc do tego celu MooTools albo scriptacoulusa. Są ta narzędzia m.in do animowania elementów htmlowych za pomocą js.
Wyprzedzam pytania z serii "Możecie mi to zrobić?", "Ale ja nie umiem...". Od tego są DOKUMENTACJE, które świetnie opisują co jak ma być zrobione...
Użytkownik polasek edytował ten post 13 czerwiec 2008, 23:22
Albo polecam poduczyć się Javascriptu :-) Wystarczy na początku sprawdzić rozmiar menu, ustawić wysokość lub szerokość na zero, a później wywoływać setTimeoutem powiększanie menu o x pikseli i sprawdzać, czy nie przekroczyło dopuszczalnej.
http://www.kurshtml...._rozwijane.html
Moje stare rozwijane menu pisane na kolanie. Wymaga uporządkowania CSS ;)
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <title>Untitled Document</title> <style type="text/css"> body {font-family: Verdana, Arial, Helvetica, sans-serif; text-align: center} a {text-decoration: none} .menutop {cursor: pointer} </style> </head> <script language="javascript" type="text/javascript"> <!-- ile=0; x=1; function down(co) { menu = document.getElementById("down" + co); if (menu.style.visibility == "visible") { menu.style.visibility = "hidden"; x=0; } for (i=1; i<=3; i++) { menu_off = document.getElementById("down" + i); menu_off.style.visibility = "hidden"; } if (x) show_menu(); x=1; } function up() { del = setTimeout("hide_menu()", 250); } function show_menu() { menu.style.visibility = "visible"; menu.style.clip="rect(auto auto " + ile + "px auto)"; ile+=10; if (ile <= 100) setTimeout("show_menu()", 20); else ile=0; } function hide_menu() { menu.style.visibility = "hidden"; } function hide_delay() { if (typeof del != "undefined") clearTimeout(del); } //--> </script> <body> <table border="1" width="300"> <tr> <td> <div class="menutop" onmouseover="java script: hide_delay()" onclick="java script: down(1)" onmouseout="java script: up()"> Menu 1 </div> <div id="down1" style="position: absolute; visibility: hidden; background-color:#00FFFF; width: 100px; line-height: 30px" onmouseover="java script: hide_delay()" onmouseout="java script: up()"> <a href="#">Link 1</a><br /> <a href="#">Link 2</a><br /> <a href="#">Link 3</a> </div> </td> <td> <div class="menutop" onmouseover="java script: hide_delay()" onclick="java script: down(2)" onmouseout="java script: up()"> Menu 2 </div> <div id="down2" style="position: absolute; visibility: hidden; background-color:#00FFFF; width: 100px; line-height: 30px" onmouseover="java script: hide_delay()" onmouseout="java script: up()"> <a href="#">Link 1</a><br /> <a href="#">Link 2</a><br /> <a href="#">Link 3</a> </div> </td> <td> <div class="menutop" onmouseover="java script: hide_delay()" onclick="java script: down(3)" onmouseout="java script: up()"> Menu 3 </div> <div id="down3" style="position: absolute; visibility: hidden; background-color:#00FFFF; width: 100px; line-height: 30px" onmouseover="java script: hide_delay()" onmouseout="java script: up()"> <a href="#" onclick="java script: up()">Link 1</a><br /> <a href="#">Link 2</a><br /> <a href="#">Link 3</a> </div> </td> </tr> </table> </body> </html>
hmmm chyba u mnie nie dziala ;p
pojawia sie glowne menu ale nic sie nie wysuwa..
(ale poprawilem < na < przed script language)
Polecam zainteresowanie się technologią flash, która daje takie i wiele innych możliwości
JS jest już troszeczkę niemile widziany na stronach i często ludzie blokują go, gdyż w 53% jest on stosowany na dużych serwisach do reklam
wiem,
flash jest do tego dobry ale wcale tez ludzie za nim nie przepadaja;p nie da sie tego zindexowac, nie wszyscy moga obsluzyc flasha (no ok, ten argument powoli odchodzi do przeszlosci;p) ale ja niestety musze sie posluzyc tutaj css+js, flash niet;/
Ja np. mam wyłączoną obsługę flash.
Ja też. :) Przeciwnie - głównie Flash służy do wyświetlania reklam. Czasami używa się JS do przysłonienia nimi strony. Flash włączam tylko wtedy, gdy mam potrzebę. Warstwy z reklamą nie wyświetlają się.
Wysuwane menu po polsku: http://blatek.ma.ciekawe.info (w dziale skrypty)
Użytkownik Ferrari edytował ten post 14 czerwiec 2008, 13:39
@up
a ktore to konkretnie?
z tego co widze nie ma takiego plynnie wysuwanego
http://blatek.ma.cie...outl/index.html
hmm to menu jest zupelnie inne od tego o ktorym pisze w 1 poscie;/
hmmm chyba u mnie nie dziala ;p
pojawia sie glowne menu ale nic sie nie wysuwa..
(ale poprawilem < na < przed script language)
Pozamieniaj wszystkie "java script" na "javascript", bo widzę, że spacje wstawiło...
ok, teraz dziala.
ale dlaczego przy otwarciu w IE tego Twojego menu i najechaniu np. na "menu1", bez klikania a nastepnie opuszczeniu obszaru "menu1" to na pasku stanu pojawia sie napis "błąd na stronie"
Teraz już powinno być ok:
<head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <title>Untitled Document</title> <style type="text/css"> body {font-family: Verdana, Arial, Helvetica, sans-serif; text-align: center} a {text-decoration: none} .menutop {cursor: pointer} </style> </head> <script language="javascript" type="text/javascript"> <!-- ile=0; x=1; function down(co) { menu = document.getElementById("down" + co); if (menu.style.visibility == "visible") { menu.style.visibility = "hidden"; x=0; } for (i=1; i<=3; i++) { menu_off = document.getElementById("down" + i); menu_off.style.visibility = "hidden"; } if (x) show_menu(); x=1; } function up(co) { del = setTimeout("hide_menu(" + co + ")", 250); } function show_menu() { menu.style.visibility = "visible"; menu.style.clip="rect(auto auto " + ile + "px auto)"; ile+=10; if (ile <= 100) setTimeout("show_menu()", 20); else ile=0; } function hide_menu(co) { menu = document.getElementById("down" + co); menu.style.visibility = "hidden"; } function hide_delay() { if (typeof del != "undefined") clearTimeout(del); } //--> </script> <body> <table border="1" width="300"> <tr> <td> <div class="menutop" onmouseover="java script: hide_delay()" onclick="java script: down(1)" onmouseout="java script: up(1)"> Menu 1 </div> <div id="down1" style="position: absolute; visibility: hidden; background-color:#00FFFF; width: 100px; line-height: 30px" onmouseover="java script: hide_delay()" onmouseout="java script: up(1)"> <a href="#">Link 1</a><br /> <a href="#">Link 2</a><br /> <a href="#">Link 3</a> </div> </td> <td> <div class="menutop" onmouseover="java script: hide_delay()" onclick="java script: down(2)" onmouseout="java script: up(2)"> Menu 2 </div> <div id="down2" style="position: absolute; visibility: hidden; background-color:#00FFFF; width: 100px; line-height: 30px" onmouseover="java script: hide_delay()" onmouseout="java script: up(2)"> <a href="#">Link 1</a><br /> <a href="#">Link 2</a><br /> <a href="#">Link 3</a> </div> </td> <td> <div class="menutop" onmouseover="java script: hide_delay()" onclick="java script: down(3)" onmouseout="java script: up(3)"> Menu 3 </div> <div id="down3" style="position: absolute; visibility: hidden; background-color:#00FFFF; width: 100px; line-height: 30px" onmouseover="java script: hide_delay()" onmouseout="java script: up(3)"> <a href="#" onclick="java script: up()">Link 1</a><br /> <a href="#">Link 2</a><br /> <a href="#">Link 3</a> </div> </td> </tr> </table> </body> </html>
Standardowo popraw wszystkie błędy wprowadzone przez forum.