Hogyan készítsünk saját ragacsos fejléc-sávot, mint a MakeUseOf

Hirdetés

Körülbelül egy hónappal ezelőtt bevezettünk egy új interfész elemet a MakeUseOf-hez - egy úszó navigációs és keresősávot. A visszajelzés szinte teljes egészében pozitív, a belső keresési forgalom rohamosan növekedett, és néhány olvasó azt kérdezte, hogyan készítsen egyet a saját webhelyükre, ezért gondoltam, hogy megosztom.

A jQuery használatával rögzítjük a sávot a képernyő tetejére - de csak egy bizonyos ponton túl. Mindezt az alapértelmezett WordPress-témában - Twenty Eleven - fogom megtenni, bár természetesen alkalmazható bármilyen témára vagy webhelyre, amelyet megfelelően megért, hogyan kell módosítani.

A HTML

Először nyissa meg a themes.php témákat, és azonosítsa a navigációs sávot, amelyet ragasztóvá teszünk. Mint mondtam, az alábbi kód az alapértelmezett huszonhét; a tiéd változhat.

Először adjon hozzá egy új DIV tárolót, amely körülveszi a teljes NAV részt.

Tegyük át ezt az alapértelmezett keresősávot ide is. Észre fogja venni, hogy alapértelmezés szerint hozzáadja a téma jobb felső sarkába; keresse meg a sort

php get_search_form (); és illessze be a navigációs szakaszba. Törölje az összes többi példányát a fájlból.

Ha most menti és frissíti, akkor látni fogja, hogy a keresési forma nem jelenik meg a navigációs sávon - még mindig megjelenik a jobb felső sarokban. Ennek oka az, hogy abszolút a CSS-en van, és egy másodperc alatt mindent törölünk.

A CSS

Nyissa meg a fő style.css fájlt és keresse meg a keresési űrlap szakaszát:

#branding #searchform {... }

Cserélje ki az belül levőt (körülbelül négy vonalnak képesnek kell lennie, beleértve néhány abszolút pozicionálást is) a következővel:

#branding #searchform { balra lebeg; háttér: fehér; margin: 7px; }

Nyugodtan állítsa be a színt vagy a margót. Cserélje ki az úszót, ha inkább a sáv jobb oldalán jelenik meg. Ebben a témában a keresés kibővül, amikor a felhasználó rákattint; ez nem tartozik ezen oktatóanyag hatálya alá, de hasonló hatást láthat a MakeUseOf keresőnkben.

jQuery

Ha kíváncsi, hogy miért használjuk a jQuery-t erre, az egyszerű: a CSS rögzített, és nem állítható be dinamikusan. Noha a CSS segítségével ragacsos fejlécet készíthetnénk, ennek az oldal felső elemének kell lennie. A problémánk az, hogy a menünk nem a legfontosabb elem, ezért nem kezdhetjük el azzal, hogy ragacsos legyen. Itt használják a jQuery-t; ellenőrizhetjük, mikor halad a felhasználó egy bizonyos ponton; akkor, és csak akkor tegye ragasztóssá.

Kezdje azzal, hogy hozzáadja a jQuery témát. Lehet, hogy a témád már betöltődött; ha nem, akkor nem kell aggódnia. Vagy elvarázsolhatja a következő kód hozzáadásával a function.php-hez, például:

php. funkció my_scripts_method () { wp_deregister_script ('jquery'); wp_register_script ('jquery', ' http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js'); wp_enqueue_script ('jquery'); } add_action ('wp_enqueue_scripts', 'my_scripts_method');

Vagy egyszerűen megkerülheti a WordPress-t és egészen ezt a fejlécfájlba. Valahol a fejszakaszban csak add ezt a sort:

Ha az első módszert használja, akkor be lesz töltve noConflict mód, ami azt jelenti, hogy a „jQuery” kódot kell használnia a kódban a jQuery funkciók eléréséhez. Ha a második módszert használja annak közvetlen hozzáadására a fejlécbe, akkor használhatja a szokásos jQuery hozzáférést $. Feltételezem, hogy a második módszer az alábbi kódban található.

Tehát a tényleges jQuery kód hozzáadásához helyezze a következőt valahol a végére header.php - Az enyémet közvetlenül a

A szkript első lépése, hogy kitalálja, mikor kezdődik a navigációs sáv, és emlékszik erre az értékre. Másodszor, csatlakozunk a görgetési eseményhez - ez azt jelenti, hogy minden alkalommal, amikor a felhasználó görget az oldalt, futtathatjuk ezt a kódblokkot. Amikor a kód fut, kétféle módon mehet keresztül:
1. Ha az ablak a navigációs sáv mentén gördült le, akkor rögzített CSS-ként csináljuk (ez a „ragadós” rész).
2. Ha az ablak teteje magasabb, mint a navigációs sáv eredeti pozíciója (azaz a felhasználó újra görgetett vissza felfelé), visszahelyezjük az alapértelmezett statikus helyzetbe.

Két kérdésre szeretnék felhívni a figyelmet:

• A +288 ott van, hogy kijavítsa a hibás pozíció megszerzésének hibáját; nélküle a sáv túl hamar kiváltja ragadós állapotát - távolítsa el, hogy megnézze, mire gondolok. Ehhez nem lesz szükség minden témához, és valószínűleg jobb megoldást talál.
• A navigációs sáv megváltoztatásának problémájához, amikor ragadós állapotba kerül, módosítsa a style.css, 550. sort, hogy olvassa 1000px ahelyett 100%

Ennyi, a navigációs sávnak most szépen ragacsosnak kell lennie.

Összefoglaló:

A teljes csere header.php Az oktatóanyag kódja itt található: ez pastebin; és a csere style.cssitt. Remélem, tetszett neki ez a kis bemutató; Ha problémái vannak, tedd közzé a megjegyzéseket, de ne felejtsd el, hogy a webhelyed nyilvánosan hozzáférhetővé tedd, hogy el tudjak menni és megnézhessem magam. Ha itt új vagy, ne felejtsd el megnézni az összes többi lehetőséget blogger és webfejlesztési cikkek.