Legördülő menü jquery
Hello mindenkinek! Üdvözlünk az új, rövid pályán! Ebben a tutorial fogom mutatni, hogyan kell használni jQuery, akkor létrehozhat egy gombot, amely nem kerül nyilvánosságra, hogy a menüben. Hogy ez hatással akcióban, látogasson psd.tutsplus.com a jobb felső sarokban.
Ha megnyomja a gombot, a berendezés megnyitja a hivatkozások listáját, és amikor ismét megnyomja, a készülék ki van kapcsolva. Ezt úgy lehet elérni, a jQuery, és a bemutató Megmutatom, hogyan. Nos, kezdjük. Először is hozzunk létre a gombot, majd teljes mértékben összpontosítani a kódot. Nyílt Photoshop és hozzon létre egy új dokumentumot, a méretei a jövőben egy gombot. Akkor létre egy gombot teljesen bármilyen méretben. A méretei én gombok - 182 x 32 pixel. Kattintson duplán a réteg „háttér”, és adjunk egyszerű stílusban „Gradient Overlay”.
A jobb oldalon a gomb, adjunk hozzá egy kis fehér nyíl, és egy függőleges elválasztó két szín: # 302f2f és # 252525.
Balról be egy kis képet és némi szöveget. Nem írom le a részleteket, hogy létrehozza a gomb, így meg alkotók saját megfelelő webhelyen. Itt van a gombot. (Save the image gombra a mappa a kép.)
Most nyílt jegyzettömb és ments el egy üres dokumentumot styles.css a mappában „csúszó menü” az asztalon. Zárja le a notebook, nyissa meg a mappát „csúszó menü”, és hozzon létre benne két új mappát: „js” és a „képeket”. Menj a főoldalon az oldalon, és töltse le a jquery.com könyvtár „jquery-1.4.4.min.js”, nevezze át a fájlt, hogy csak „jquery”, és mentse el a „js” mappát. Nyisd Dreamweaver és hozzon létre egy új HTML fájlt. Mentsd el az asztalon, egy tetszőleges mappába. (A fájl nevét nem játszik nagy szerepet, így hívják, amit akar, például „sliding_menu.html”.) A Dreamweaver váltson kód üzemmódba.
Talán észrevette, hogy már regisztrált három fájlt: styles.css, jquery.js és harmadszor slider.js ( „de mi is még nincs” - mondhatnánk). Most létre kell hoznunk slider.js fájlt. Nyílt Jegyzettömb és mentse el az üres dokumentum slider.js js mappát. Most nyissuk meg a fájlt a Dreamweaver és adja meg a következő kódot.
Hadd magyarázza a fenti kódrészletet. Az első sor azt jelenti, hogy ha egy dokumentum van betöltve, a funkció az úgynevezett, ebben az esetben, egy olyan funkció a legördülő menüből. A következő sor azt jelenti, hogy ha elkészülnek kattintson a képre osztály menu_class bontakozik ki a menüt. Ezt követi a harmadik sorban. A menü fog kibontakozni le közepes sebességű. Beállíthatjuk, hogy a sebességet a lassú (lassú) vagy gyors (gyors). A második és harmadik sor nagyon fontosak, mert a bennük található elemek beemelése a CSS-fájl, nevezetesen img.menu_class és ul.the_menu. Nem írják le ezeket a stílusokat, de azt, amint elkezdik létrehozni a menüben. Menj a HTML dokumentum Kód nézet, hogy ki tudjuk kezdeni a menüt.
Nyissa meg a CSS fájlt Dreamweaver. Nézzük meg néhány stílusok fő része a dokumentumnak.
Szüksége van egy egyszerű betűtípust és a háttér stílusa. Állítsa betűtípust és méretet kívánatos. Azt is megváltozott a háttér színe a fehértől a sötét szürke. Add stílust számozott vagy felsorolásjeles listák. Add határok kép gomb. Tudod felhívni a határ a Photoshop-e a szám, de nekem úgy tűnik, hogy könnyebb dobvait keresztül CSS, így könnyebb változtatni egy kódrészletet, mint minden egyes alkalommal, hogy nyissa meg a Photoshop és dolgozza át a képet.
Az alábbi stílusok alkalmazni a menüben fog kibontakozni megnyomása után.
Ebben a kódot, meg lehet változtatni a szélességét a legördülő menüben. Saját menü szélessége 300 pixel, de akkor meg bármilyen szélességben. Még megkérdeztem a vastagsága blokkhatár egy pixel, ami megfelel a vastagsága a gomb határon. A következő rész a kódnak a háttér színe blokk előugró menüben, valamint meghatározza a szöveg színét, méretét és viselkedését linkeket, ha lebeg felettük.
És néhány szó elhelyezése. Annak érdekében, hogy összehangolják a helyét a gombot, ne használja a készüléket igazítás (div) a központban, vagy jobbra, a blokk a menü nem illeszkedik pontosan. Összehangolni a helyét a gombok rendesen, csatolja a készüléket a menü egy másik div tag, és helyezzük el, ahogy jónak látja.
Azt is hozzá valamit, hogy a szeretet, például képek minden menüpont, a hivatkozások listáját.
5 óra utolsó oszlopában „jQuery”
Ma szeretnénk, hogy meséljek TypeIt könyvtár - ingyenes jQuery plugin. Ön tudja használni, hogy szimulálja a gépelést. Ha minden megfelelően van beállítva, nagyon realisztikus hatás érhető el.
jQuery plugin létre egy idővonal.
jQuery plugin létre egy Gantt diagram.
Egy példa arra, hogyan hajtsák végre a letöltött fájl segítségével PHP és jQuery ajax.
SerginhoLD
haha)) Még van egy forrás lecke))) egy szemetet chtol levelet nehéz?)
Ruslan Dimitriev 1
Igen, szoktam érdekes lehet. (
profesor08
hatását lezáró menü működni a veszteséges fókusz elem: onBlur
profesor08
Egyébként mindez megoldható csak CSS.
Ruslan Dimitriev
Aleksandr Kolesnik
Köszönjük! Dolog szerelmeseinek, mint én. És azok, akik azt gondolják, hogy túl könnyű - talán rossz oldalon.
Van egy kérdésem, ezért csináltam ezt a négy menük egyik a másik után. Minden rendben. De szeretnék hozzá még egy dolog. Ez a nyílás egy menü a másik automatikusan záródik, vagyis, hogy mindig van egy nyitott menüt, amelyet én. Hogy van az, végre? Köszönöm előre is a választ.
Fenébe, hogy mennyire jól valamit. Mindent elkövetnek, ahogy van, de így hiba kiderült. Menü megnyitása, de ha van egy kép az oldalon, a menü alatt, akkor bezárja a menüt, és nem Che nem tud segíteni :-(
Által nyújtott információk útján két csatorna (látás és hallás) a képzés hatékonyságának sokkal jobb tanulás könyvekből. A házi feladatok és online tesztek lehetővé teszi, hogy folyamatosan úgy gondolja, a célnyelven, és azonnal ellenőrizze tudását!
Ha azt szeretnénk, hosszú ideig, hogy tanulmányozzák, hogyan lehet HTML-t, akkor engem, mert van jó hír!
Ha már megtanulta a HTML és tovább szeretne lépni, a következő lépés az lesz, hogy tanulmányozza a CSS technológiával.
Ha azt szeretnénk, hogy megértsék a fogalmak domain és tárhely, megtanulják, hogyan kell létrehozni egy adatbázist, feltölteni a fájlokat a honlapon keresztül FTP szerver, hozzon létre aldomain konfigurálja a postaládákat a helyszínen, és ellenőrzi a részvétel, a tanfolyam kifejezetten az Ön számára!