Početné požiadavky od mojich vytrvalých čitateľov a jednoducho zvedaví používateliaúčinkovali. Nakoniec som vytvoril lekciu, v ktorej sa naučíme, ako na to dynamické menu Vkontakte s efektom stlačených tlačidiel! Analogicky s bežnými internetovými stránkami, keď je navštívený odkaz označený zvláštnym spôsobom(stlačené tlačidlo, podčiarknutie atď.) - pomocou vytvorených stránok a grafického dizajnu vytvoríme rovnaký dizajn Vkontakte. Na začiatok urobíme grafické polotovary vo Photoshope - vytvoríme hlavičku ponuky a tlačidlá dvoch typov. Potom vytvoríme niekoľko stránok Vkontakte podľa položiek v našej ponuke. A na záver si urobme ošemetný trik, ktorý v skutočnosti vytvorí ilúziu sledovania odkazu. Lekcia je dosť náročná a vhodná pre tých, ktorí sa cítia istí vo funkčnosti Vkontakte. Všetky manipulácie vykonám pomocou príkladu vaša skupina Vkontakte kde je tento efekt realizovaný naživo. Takže do biznisu!
Krok 1: Vytvorte hlavičku ponuky vo Photoshope
Vytvorte dokument so šírkou 600 pixelov vo Photoshope. Výška môže byť iná, podľa vášho uváženia. Do hlavičky môžete umiestniť ľubovoľnú pohľadovú fotografiu, koláž, informačný banner a iné grafické obrázky. V tomto prípade som použil toto reklamný banner rozmer 600 x 172 pixelov. 
Krok 2 Vytvorte navigačný panel vo Photoshope
Teraz musíme vytvoriť navigačný panel. AT tento príklad Ako tlačidlá som použil iba text. Ale podľa vlastného uváženia môžete vytvárať farebné tlačidlá a písať na ne text. Robíme to - vytvorte obdĺžnik s rozmermi 600 x 56 pixelov vo Photoshope a tento prípad naplňte ju bielou. Potom napíšeme položky menu do riadku - niekde okolo 5-6 položiek, nie viac. Veľká kvantita body budú vyzerať upnuté.
Krok 3 Vytvorte stlačený navigačný panel vo Photoshope
Teraz musíme vytvoriť aktívne odkazy, ako keby sa na ne kliklo. Použil som bežné podčiarknutie, ale na označenie navštíveného odkazu môžete použiť inú farbu textu alebo pozadia.
Krok 4. Vystrihnite hotové obrázky
Na tejto fáze potrebujeme vystrihnúť obrázky z Kroku 2 a Kroku 3. Mali by sme mať dve sady po piatich tlačidlách – jedno tlačidlo bez podčiarknutia, druhé tlačidlo s podčiarknutím. Tlačidlá každej jednotlivej položky (s podčiarknutím a bez neho) musia mať rovnakú veľkosť. Obrázok nižšie zobrazuje všetky naše grafický dizajn- desať tlačidiel a jedna hlavička ponuky. 
Krok 5. Vytvorte stránku ponuky Vkontakte
Teraz poďme na VKontakte. Našou úlohou je tvoriť samostatná stránka s názvom „Menu“. Na to použijeme nasledujúci kód
http://vk.com/pages?oid=-XXX&p=Názov_stránky
kde namiesto XXX nahradíme id našej skupiny a namiesto textu „Názov stránky“ napíšeme Menu. Teraz musíme zistiť ID skupiny. Ako to spraviť? Prejdeme na hlavnú stránku skupiny a pozrieme sa na naše príspevky na stene – hneď pod blokom „Pridať príspevok“ bude napísané „Všetky príspevky“ – kliknite na tento odkaz. 
Krok 6. Určite ID skupiny a upravte kód
Prejdite na stránku a zobrazte adresu URL takto https://vk.com/wall-78320145?own=1, kde čísla 78320145 v tomto príklade sú id skupiny. Nahradíme naše údaje v zdrojovom kóde a získame takýto záznam:
http://vk.com/pages?oid=-78320145&p=Menu(s vašimi číslami!). Vložte tento riadok do adresný riadok prehliadač a stlačte Enter. Takto sme tvorili nová stránka Vkontakte a spočiatku to vyzerá takto. 
Krok 7. Vytvorte Vkontakte zvyšok navigačných stránok
Podobne vytvárame ďalšie štyri navigačné stránky: Ceny, Ako objednať, Zadanie a Otázky. To znamená, že ešte štyrikrát skopírujeme zodpovedajúci kód do panela s adresou prehliadača (s vašimi identifikačnými číslami v príklade nižšie, moje čísla):
http://vk.com/pages?oid=-78320145&p=Ceny
http://vk.com/pages?oid=-78320145&p=How_to_order
http://vk.com/pages?oid=-78320145&p=Zmluvné podmienky
http://vk.com/pages?oid=-78320145&p=Questions
Upozorňujeme, že v názve dvojslovnej stránky (Ako objednať) bola medzera medzi slovami nahradená podčiarkovníkom How_to_order. Teraz máme pre každú položku ponuky pripravených päť strán. Stránku Portfólio sme nevytvorili, pretože sa nachádza na stránke Menu
Krok 8. Nahrajte fotografie na prvú stránku ponuky
Na vytvorenom ešte prázdna strana(Pozri krok 6) V ponuke kliknite na prepojenie Upraviť alebo na prepojenie Vyplniť obsahom. Potom uvidíme panel úprav. Tu musíme kliknúť na ikonu fotoaparátu s funkciou Nahrať fotografiu. Dôležité! Upozorňujeme, že máte režim označovania wiki. Prepínanie režimov sa ovláda ikonou na pravom okraji stránky. 
Krok 9. Výsledok po odovzdaní obrázkov
Odovzdávame naše obrázky, ktoré sme vytvorili v Kroku 1 a Kroku 2. Po nahraní vidíme nasledujúci kód, ako na obrázku nižšie, a samotné menu vyzerá takto. Po každej zmene kódu nezabudnite kliknúť na tlačidlo Uložiť stránku a potom kliknutím na tlačidlo Ukážka zobraziť výsledok. 
Krok 10. Úprava kódu obrázka
Teraz je našou úlohou nahradiť všetky vlastnosti noborder vlastnosťou nopadding. A dajte si prvý obrázok skutočné rozmery, pretože Vkontakte pri načítaní zmenšil obrázok na 400 pixelov. Po všetkých zmenách by sme mali dostať takýto kód a také menu. 
Krok 11. Umiestňovanie odkazov na obrázky
Teraz musíme dať dole odkazy pre každý obrázok. Odkaz musí byť vložený za nopadding| namiesto medzery pred zatváracími zátvorkami. Pre prvý obrázok (hlavička ponuky z kroku 1) môžete uviesť odkaz na hlavnú stránku skupiny alebo môžete použiť vlastnosť nolink (nastaviť cez; po odsadení bez medzier). Pre druhú kartu vložte adresu formátovacej stránky strana-78320145_49821289. Toto je úplná adresa URL obrázka https://vk.com/page-78320145_49821289, kým sa prvá časť s doménou nedá vynechať. V prípade odkazov na externé stránky však musí byť adresa URL odkazu uvedená úplne. 
Krok 12 Skopírujte kód na zvyšok navigačných stránok
To je dosť jednoduchý krok, skopírujeme posledný kód z predchádzajúceho kroku a vložíme ho na zvyšok vytvorených stránok - Ceny, Ako objednávať, Zadávacie podmienky a Otázky. Sme na stránke, kliknite na Upraviť alebo Vyplniť obsahom (sme v režime označovania wiki), vložte kód a kliknite na Uložiť. A potom tiež ďalej ďalšia strana. To znamená, že teraz máme päť strán, z ktorých menu vyzerá úplne rovnako. Ale na druhej strane sa už dá orientovať v menu - keď kliknete na odkaz, napríklad Ceny, presunieme sa na stránku Ceny atď.
Krok 13: Vytvorenie efektu stlačeného tlačidla
Teraz musíme zmeniť jeden obrázok na každej z piatich strán (tlačidlo bez podčiarknutia nahradíme tlačidlom s podčiarknutím). Napríklad na prvej strane Menu načítame nový obrázok a potom v kóde nahradíme adresu starého obrázka novým (podčiarknutý červenou farbou). Potom prejdeme na stránku Ceny, nahráme obrázok s podčiarknutými cenami a zmeníme ho v kóde na adresu nového obrázku. Potom prejdeme na stránky Ako objednať, Zadanie a Otázky a urobíme rovnakú operáciu rovnakým spôsobom. 
Finálny.
V dôsledku toho máme navigačný efekt, keď kliknete na odkaz v ponuke a ten sa stane aktívnym. Ale keďže grafická úprava na všetkých stranách je takmer rovnaká, s výnimkou aktívny odkaz, potom sa vytvorí ilúzia navigácie, hoci v skutočnosti ide o prechod na inú stránku.
Takto koncipovaný jedálny lístok nie je prispôsobený mobilné zariadenia. Keď sa veľkosť obrazovky zmenší, obrázky sa začnú posúvať jeden pod druhý. Robiť adaptívny dizajn, musíte použiť tabuľky na tvrdé verzovanie. Ale to je už iný príbeh a pokročilejšia technika. Dovtedy sa pozrite rôzne možnosti grafika menu. 
Prvým krokom je objasniť, že oficiálne takýto výraz neexistuje. Vo všeobecnosti možno pod dynamickým menu chápať také menu, ktorého obsah sa počas práce užívateľa mení v závislosti od akýchkoľvek vonkajších okolností.
V tomto prípade rozprávame sa o téme, ktorá síce spadá pod túto nejasnú formuláciu, ale je jednoduchšia a prozaickejšia. Ak je menu ako také dynamické (pripomeňme, že inštalácia programu vedie k zmenám v ňom) a existuje dokonca mimoriadne variabilné menu „Dokumenty“ vynájdené spoločnosťou Microsoft, potom navrhujem hovoriť o tom, ako usporiadať menu, ktoré obsahuje presne vaše údaje a je v priebehu vašej práce meniteľný.
S vydaním systému Windows 95, Spoločnosť Microsoft sa pokúsil posunúť zameranie zo systémového programovania, ako sú „súbory“, na zrozumiteľné pre každého podnikateľ"dokumenty". Na tento účel sa posilnil vzťah medzi typmi súborov a dôrazne sa odporúčalo ich otvárať dvojité kliknutie myšou priamo na ikonu dokumentu a nie z vopred spustenej aplikácie. Nie je to žiadna novinka a v zásade je to pohodlnejšie ako šplhanie po diskoch v okne „Otvoriť“.
Ako návnadu spoločnosť zaradila do ponuky položku Dokumenty, ktorá je navrhnutá tak, aby poskytovala rýchlejší prístup k najnovším súborom, ktoré boli otvorené. Táto inovácia už bola kritizovaná, pripomeniem len hlavné výhrady: systém si nevie dobre poradiť so zobrazením presne otvorených najnovšie dokumenty, jedálny lístok je posiaty, dokumenty nie sú zoradené a nedajú sa tematicky štrukturovať a napokon jednoducho nie sú všetky prezentované.
Desaťkrát som sa pokúsil aktualizovať ponuku „Dokumenty“, ale nestalo sa nič, čo by stálo za to. Môžem navrhnúť inú možnosť. Predstavte si, že systémové menu na svojej prvej úrovni má jednu alebo viac položiek, ktoré otvárajú prístup do systému podmenu zodpovedajúcemu rozdeleniu dokumentov do skupín (podľa témy, času, typu atď.), ktoré ste prevzali, a podmenu obsahuje všetky súbory dokumentov sú vám k dispozícii, ich zloženie sa aktualizuje pri vytváraní alebo odstraňovaní, prenášajú sa z jednej ponuky do druhej automaticky podľa pohybu súborov na disku.
Normálna možnosť rýchly prístup, prezeranie a vyhľadávanie dokumentov? Potom majte na pamäti, že takéto dynamické menu je implementované rovnako ľahko ako lúskanie hrušiek. Vaše pracovné adresáre stačí umiestniť do adresára zodpovedajúceho hlavnému menu na disku. Sú to adresáre so živými súbormi, nie odkazy. Urobte to a okamžite budete mať prístup cez menu ku každému z dokumentov, ktoré sú tam uložené.
Ale aby všetko vyzeralo ako tike, musíte ešte makať. Musí sa použiť dlhé mená, potom sa zobrazí ponuka vlastného dokumentu ľudský druh. To si bude vyžadovať, aby ste opustili milé DOSovské sépie ako Docs, Doc1 atď. Nič, musíte si zvyknúť nazývať veci pravými menami a zabudnúť na osempísmenové podzemné prezývky.
Bude potrebné zvážiť mená. Ako som povedal, počet vnorených adresárov by nemal presiahnuť 3, teda maximálne 4 úrovne. Ich mená by nemali byť príliš dlhé, rovnako ako názvy dokumentov, ktoré obsahujú. V opačnom prípade sa vaša ponuka bude pohybovať po obrazovke, najprv zľava doprava, potom sa ohne dozadu a dopredu. Ste mučení riadiť myš. Vyhnite sa duplicite slov. Ak sa adresár, a teda aj podmenu, nazývajú „Dohody“, potom nie je potrebné uvádzať dokumenty v ňom obsiahnuté „Zmluva č. 139-45 zo dňa ...“. Je úplne zrejmé, že ide o zmluvu, keďže je v priečinku so zmluvami. Skúste aj pomocou niekoľkých slov priradených osudom (alebo šírkou obrazovky, ak chcete) k popisu dokumentu, aby odrážal jeho obsah. Číslo a dátum sú vynikajúce informácie, ale je nepravdepodobné, že si okamžite spomeniete, o čom tento dokument bol.
Za cenu dodatočného úsilia je možné dosiahnuť koordináciu v rámci reťazca tvoreného názvami podmenu a záverečného dokumentu, prípadov, konjugácií a iných zlých duchov. Oku lahodnejšie a menej unavujúce je čítať na obrazovke slušne vybudované frázy a nekomunikovať s počítačom lámanou ruštinou ako s predstaviteľom cudzieho jazyka. právnická osoba. Napríklad, ak je dokument opísaný výrazom "Zmluva na rok 1996 o prenájme skladu na železničnej stanici", potom môžete zostaviť nasledujúci reťazec menu: "Zmluva" - "na rok 1996" - "o prenájme " - "sklad na železničných staniciach". Možno niekoho urazí názov súboru „sklad na železničnej stanici“, ale ak vezmeme do úvahy reťazec mien adresárov, ktorý sa pred ním zoraďuje, všetko dopadne správne.
Takto organizované dynamické užívateľské menu má svoje nevýhody. Po prvé, systém nie vždy aktualizuje menu ihneď po tom, ako sa tam dostane nový súbor (vymazanie existujúceho). Zrejme niekde v labyrintoch multithreadingu a multitaskingu uviazne príkaz o potrebe refreshu menu. Je to trochu otravné, ale nestáva sa to až tak často a po nabehnutí stroja sa ponuka určite zhoduje s tým, čo je na disku. (To neznamená, že vás vyzývam, aby ste v takýchto prípadoch zakaždým reštartovali počítač, zvyčajne si vystačíte s opätovným načítaním adresára v "Prieskumníkovi" stlačením klávesu.) Po druhé, nie je dobré uchovávať pracovné súbory vo vnútri Windows adresáre. Odtiaľ budete musieť vytiahnuť priečinok "Hlavné menu" a postupovať podľa neho, pretože by ste sa mali obávať o bezpečnosť informácií o používateľovi - zálohy, očistiť od trosiek atď. Tretí problém je psychologickej povahy - spočiatku je veľmi nezvyčajné vidieť svoje pracovné adresáre nie v koreňovej tabuľke obsahu disku, ale niekde v "Hlavnom menu". Ale to prejde - zvyknete si.
Skryté položky ponuky
Ďalším spôsobom, ako zjednodušiť obsah jedálneho lístka a tým zvýšiť jeho efektivitu, je skryť jeho časť počas bežnej prevádzky.
AT menu windows 95 je plná vecí, ktoré normálna operácia nemusia používať. Patria sem skratky odinštalátorov aplikácií, rôzne súbory Readme a ďalšie textové informácie od výrobcov, registračných programov a formulárov na odoslanie e-mail. Môžete si tu tiež zaregistrovať nástroje plánovania nástrojov, ktoré používate iba vtedy, keď softvér začne kňučať alebo sa správať podozrivo. Pre každodenné rutiny počítačová hygiena najpohodlnejšie (a postačujúce) je uchýliť sa k službám verejnej služby automatické vykonávanie Systémový agent z balíka Plus namiesto manuálneho spustenia kontroly disku a defragmentácie. A ak áno, potom nie je dôvod tieto programy neustále držať v ponuke.
Nemali by ste však odstrániť všetko z ponuky, ktorá je v tento moment sa zdalo zbytočné. Napríklad mnohé aplikácie sa pri odinštalovaní odvolávajú na odkaz Odinštalovať v ponuke a nie na samotný program. Boh im buď sudca, ale ak sa skratka odstráni, nebude možné aplikáciu zaškrtnúť obvyklým spôsobom. Existuje aj jednoduchý a bezbolestný spôsob, ako zjednodušiť jedálny lístok bez toho, aby ste čokoľvek vyhodili.
Windows 95, podobne ako DOS, má koncept skrytých súborov a adresárov. O normálna práca nevidíte ich na obrazovke, pretože systém nezobrazuje tie súbory a adresáre, ktoré majú zaškrtnuté políčko „Skryté“. Toto začiarkavacie políčko je začiarknuté a zrušené v okne vlastností súboru. Ak chcete vidieť takéto objekty, musíte prejsť do "Prieskumníka" cez ponuku "Zobraziť" / "Možnosti" a povoliť režim "Zobraziť všetky súbory".
Skúste to urobiť. Bez toho, aby ste čokoľvek vymazali, nazbierajte v systémovom menu takú štruktúru vnorených úrovní a položiek, ktorá vám bude vyhovovať pri každodennej práci. Zvyšok náplne skryte a označte ako jednotlivé štítky súbory aj celé adresáre a nastavenie ich zodpovedajúceho atribútu. Je lepšie to urobiť v režime zobrazenia všetkých typov súborov. Keď skončíte s cvičením, prepnite režim zobrazenia na normálny, ktorý skryté súbory nie sú viditeľné a pozrite sa na výsledky svojej práce.
Ak sa ponuka stala jednoduchšou a pohodlnejšou, potom sa vám podarilo pridať do rozhrania Windows 95 ešte jednu funkciu. najužitočnejšie nastavenie. Kedy musíte vykonať odber systémové problémy(a to sa, žiaľ, stáva pomerne často), stačí zapnúť zobrazenie všetkých súborov v "Prieskumníkovi" a dostanete k dispozícii Plný set položky menu.
V zásade je možné podobný prístup použiť pre pracovnú plochu, ktorej obsah je spojený s priečinkom C:\Windows\Desktop. Pre pracovnú plochu však systém ukladá nielen skratky, ale aj poradie, v ktorom sú umiestnené (je skryté v hĺbke konfiguračného registra), takže keď som prepol režim zobrazenia na svojom počítači, systém zbieral ikony v abecedné poradie. Čo mi, samozrejme, nevyhovovalo. Problém vytvárania viacerých rozložení pracovnej plochy sa dá vyriešiť, ale je to lepšie iným spôsobom.
Tým možnosti usporiadania menu a pracovnej plochy vo Windows 95 (na rozdiel od dnešného rozhovoru) nekončia. Nové prístupy k optimalizácii pracoviska môže nájsť každý používateľ, ak si nájde čas na experimenty a pokúsi sa aplikovať štandardné a známe metódy trochu netradičným spôsobom. systémové nástroje z arzenálu Microsoftu.
Roman Sobolenko
Anotácia: Cieľ. Naučte sa aplikovať HTML prvky(zoznamy a hypertextové odkazy), ako aj vlastnosti css(model zobrazenia, hypertextové pseudotriedy) na vytvorenie navigačného systému na webovej stránke.
Umiestnenie menu so sadou hypertextových odkazov na stránku je jednou z dôležitých úloh v praxi webdizajnéra. Aby neunavili pozornosť používateľa prezeraním celej zostavy, odkazy sú zvyčajne zoskupené do kategórií a v hlavnom menu sú zahrnuté iba kategórie. Príslušné odkazy (alebo podkategórie) by sa mali zobraziť iba vtedy, keď je vybratá kategória.
Spravidla je zvykom vytvárať takéto dynamické menu pomocou jazyk Javascript, ktorý umožňuje vykonávať akúkoľvek zložitosť manipulácie s prvkami webovej stránky. Existuje však aj riešenie CSS – celkom jednoduché a krásne, aj keď nespĺňajúce fantáziu žiadneho dizajnéra. Pozrime sa na to krok za krokom.
- Spustite Visual web Developer(alebo vizuálne štúdio) a vytvorte nový dokument HTML.
- Do prvku head zadajte vhodný názov stránky.
- Zadajte otváraciu značku .
- Vytvorte množinu kategórií v tele dokumentu ako neusporiadaný zoznam ( ul ), ktorého každý prvok obsahuje zoznam odkazov (pozri príklad).
- Populárne jedlá
- talianske jedlo
- Občerstvenie
- Občerstvenie
- sladkosti
- Ovocie
- Darčeky k sviatku
- výročia
- Deťom
- narodeniny
- Gratulujem!!!
- Výber podľa ceny
- Menej ako 1000 rubľov
- Od 1 000 do 1 500 rubľov
- Od 1500 do 2000 rubľov
- Od 2 000 do 3 000 rubľov
- drahé
- Ovocie a zelenina
- Sušené ovocie a orechy
- ovocné koše
- hory ovocia
- Zdravá strava
- Bez pesticídov
- Kvety
- Prírodné kvety
- záhradné kvety
- "Hovoriace" kvety
- Firemné darčeky
Názvy odkazov a kategórií si vymyslite nezávisle. Je dôležité, aby atribút id externý zoznam mal hodnotu MainMenu - ďalej mu bude týmto identifikátorom priradený špeciálny štýl).
- Populárne jedlá
- Do šablóny štýlov pridajte nasledujúce pravidlo:
#MainMenu > li ( float: left; list-style-type: none; )
Sledujte zmeny v zobrazení dokumentu rozdelením okna editora na zobrazenie zdrojový kód a konštruktér. Po použití zadaného pravidla štýlu sa položky externého zoznamu ( li ) usporiadajú vodorovne (kvôli zalamovaniu):
Ryža. 7.1. - Nechajte vnorené zoznamy odkazov neviditeľné (pridajte k nim display:none; property) a zobrazia sa iba pri umiestnení kurzora myši nad názov zodpovedajúcej kategórie. Nasledujúce pravidlo so selektorom pseudotriedy hover má nasledujúci význam: zoznam ( ul ) vnorený do položky zoznamu ( li ), na ktorú sa umiestni kurzor myši (:hover ) a vnorený do prvku s id=#MainMenu , by sa mal vykresliť v štýle bloku (a nie neviditeľný):
#Hlavná ponuka li:umiestnite kurzor myši ( display:block; )
Uložte dokument, ktorý navrhujete, otvorte ho v prehliadači a skontrolujte, či ponuka funguje správne.
- V zásade mechanizmus funguje - estetická stránka zostáva.
- Priraďte kotvy ľubovoľnej úrovne vnorenia v ponuke (pravidlo #HlavnáPonuka a) k požadovanej farbe (color), písmu (font) a odstráňte podčiarknutie (text-decoration).
- Priraďte položky zoznamu ku kategóriám (pravidlo #MainMenu > li ) farba pozadia(pozadie ), výplň ( padding ) a orámovanie vpravo ( border-right ).
- Prvky vnoreného zoznamu odkazov (pravidlo #MainMenu li li ) prideľte rovnakej farbe pozadia ako v zozname kategórií, ako aj miernu výplň a orámovanie v spodnej časti. Odstráňte aj označenie zoznamu (list-style-type ).
- Odstráňte okraje a zarážky (okraj a výplň) zo zoznamu odkazov (pravidlo #Hlavná ponuka li ul ).
Menším problémom je, že niektoré položky zoznamu kategórií sa pri umiestnení kurzora myši zväčšia do šírky. Je to dôsledok toho, že šírka prvku zoznamu je určená šírkou celého obsahu – vrátane vnoreného zoznamu. Ak však vnorený zoznam vypustíte z normálneho toku a umiestnite ho absolútne, jeho šírka už nebude mať vplyv na šírku nadradeného prvku. Preto zadajte absolútne umiestnenie pre zoznam odkazov a relatívne umiestnenie pre prvky zoznamu kategórií. Skontrolujte v prehliadači. Potom upravte polohu vnoreného zoznamu vzhľadom na jeho kontajner nastavením vlastností vľavo a hore (nepúšťajte rozbaľovaciu ponuku príliš nízko, inak zmizne, keď sa v nej pokúsite vybrať odkaz).
Prečo bolo potrebné relatívne umiestniť položky zoznamu kategórií? Odstráňte príslušné pravidlo a všetko vám bude jasné.
- Pridajte posledný dotyk: nechajte prvky oboch zoznamov, aby pri umiestnení kurzora myši trochu zmenili farbu pozadia (pravidlo #Hlavná ponuka li:hover ).
Konečný výsledok by mal byť podobný nasledujúcemu.
Počuli ste už niekedy výrok, že „nemôžete vytvoriť dynamickú rozbaľovaciu ponuku iba v CSS pre IE“? Som si istý, že áno. A čo, veríš tomu? Presne tak, neverte tomu.
Cieľ, ktorý chceme v tomto článku dosiahnuť
Účelom tohto článku je vytvoriť rozbaľovaciu ponuku pre IE, ktorá je úplne vytvorená pomocou CSS. Počnúc týmto nastavením som rozšíril úlohu, aby takéto menu fungovalo v iných väčšine slávne prehliadače(poznámka k .: z komentárov vyplýva, že tieto prehliadače sú Opera 7.x a najnovšie verzie Firefox).
Cieľ, ktorý chceme týmto článkom dosiahnuť, je v zásade viac-menej všeobecné vzdelanie, t.j. dať Všeobecná myšlienka o niektorých „skrytých“ a málo používaných funkciách prehliadačov.
Taktiež najmä zvedavci môžu v tomto článku nájsť niekoľko trikov, s ktorými môžete dosiahnuť určité neštandardné výsledky. Pre vývojárov môže byť tento článok príležitosťou na zamyslenie alebo zdrojom nových nápadov.
Ako reprezentujeme úroveň čitateľa.
Vlastne som premýšľal o označení tohto článku ako "pokročilý". Ale som si istý, že aj nie najskúsenejší vývojári dobre pochopia, čo je napísané v článku. Čitateľ jednoducho musí poznať základy CSS a
HTML.
Čím sa toto menu líši od všetkých ostatných?
Dlho som hľadal na webe menu, ktoré by bolo robené v CSS, ale nenašiel som jediné riešenie, ktoré by fungovalo bez závad v IE. Našiel som však veľa zaujímavé nápady, čo ma priviedlo k výsledku, ktorý tu bude popísaný. Áno, ani môj kód nie je dokonalý, ale jednoducho nemám čas opraviť všetky chyby. Najzaujímavejší alternatívne riešenie zo všetkého, čo som videl (ktoré používajú CSS), je založené na použití pseudotriedy hover na prvkoch LI. A nikdy som si nemyslel, že je to možné, rovnako ako som si nemyslel, že je všeobecne možné vytvoriť rozbaľovaciu ponuku pre IE bez skriptov ...
Hlavný rozdiel medzi mojím a ostatnými menu je ten, že moje funguje v IE. Všetky riešenia, ktoré som videl, používajú prvok LI ako základný prvok pre pseudotriedu :hover, avšak spoločnosť Microsoft sa rozhodla, že túto pseudotriedu možno použiť iba
prvok A. Väčšina stránok robí rezerváciu, v ktorej fungujú iba ich ponuky Prehliadače Opera 7.x alebo Mozilla. Tieto prehliadače však používa iba päť percent používateľov! Áno, takéto ponuky sú v týchto prehliadačoch dobré, ale bohužiaľ ich nemožno vidieť vo väčšine najbežnejších prehliadačov. Teraz toto nedorozumenie napravíme.
Čo je menu vytvorené iba pomocou CSS?
Toto je dynamické menu, ktoré na jeho vytvorenie používa iba CSS a nepoužíva skripty (napríklad napísané v JavaScripte).
Čo, neveríš?
Pozrime sa na kód:
<
STYLE type
=
text
/
css id
=
"default"
title
=
"predvolená"
name
=
"default"
>
*::- moz - any - link br ,*:- moz - any - link br (
/*náhradné riešenie pre mozillu*/
displej: žiadny;
}
div #menu*(
kurzor : ukazovateľ ; /*pretože IE zobrazuje textový kurzor
ak je odkaz aktívny*/
}
Zakázané (
farba: červená! dôležité;
pozadie: žiadne! dôležité;
}
Div #menu(
pozadie : #F5F5DC;
výška: 15px
biely priestor: nowrap;
šírka: 100%
}
Div #menu .a (
pozadie : #F5F5DC;
okraj : 1px plný #F5F5DC;
farba: #000000
text - dekorácia : žiadna ;
}
Div #menu .a tabuľka (
displej : blok ;
písmo: 10px Verdana, bezpätkové;
biely priestor: nowrap;
}
Div #tabuľka menu, div#tabuľka menu a (
displej: žiadny;
}
Div #menu .a:hover, div#menu div.menuitem:hover (
pozadie : #7DA6EE;
okraj : 1px plný #000080;
farba: #0000FF;
margin-right :- 1px ; /*vyrieši problém s Operou
nezobrazuje sa pravý okraj*/
}
Div #menu .a:hover table, div#menu div.menuitem:hover table(
pozadie : #FFFFFF;
orámovanie : 1px plný #708090;
displej : blok ;
poloha: absolútna;
biely priestor: nowrap;
}
Div #menu .a:hover table a, div#menu div.menuitem:hover table a (
orámovanie - vľavo : 10px plné #708090;
pravý okraj: 1px plná biela; /*vyrieši problém so skokom*/
farba: #000000
displej : blok ;
padding : 1px 12px ;
text - dekorácia : žiadna ;
biely priestor: nowrap;
z-index: 1000;
}
Div #menu .a:hover table a:hover, div#menu div.menuitem:hover table a:hover (
pozadie : #7DA6EE;
okraj : 1px plný #000000;
orámovanie - vľavo : 10px plné #000000;
farba: #000000
displej : blok ;
padding : 0px 12px ;
text - dekorácia : žiadna ;
z-index: 1000;
}
td(
border - width : 0px ;
padding : 0px 0px 0px 0px ;
}
položka menu (
plavák : vľavo ;
okraj : 1px 1px 1px 1px ;
padding : 1px 1px 1px 1px ;
}
Položka menu * (
padding : 0px 0px 0px 0px ;
}
#other(
}
#moz(
}
#moz::-moz-cell-content(
výška : auto ; viditeľnosť : viditeľný ;
}
#other::-moz-cell-content(
výška: 1px viditeľnosť : skrytý ;
}
#holder(
šírka: 100%
}
<
TABLE id
=
holder
>
<
TR
>
<
TD id
=
"other"
>
<
DIV id
=
"menu"
>
<
DIV
class=
"menuitem"
>
<
a
class=
"a"
href
=
"#"
>súbor<
BR
>
<
TABLE
>
<
TR
>
<
TD
><
a href
=
#2>klikni na mňa
<
TR
>
<
TD
><
a href
=
#3>Uložiť
<
TR
>
<
TD
><
a href
=
#4>Zavrieť
<
DIV
class=
"menuitem"
>
<
A
class=
"a"
href
=
"#11"
>Pomoc<
BR
>
<
TABLE
>
<
TR
>
<
TD
><
a
class=
"disabled"
>..
<
TR
>
<
TD
><
a href
=
#13>Index
<
TR
>
<
TD
><
a href
=
"#14"
>O
<
TR
>
<
TD id
=
"moz"
>Menu špecifické pre Mozillu!
<
DIV id
=
"menu"
>
<
DIV
class=
"menuitem"
>
<
a
class=
"a"
href
=
"#"
>Filezilla
<
TABLE
>
<
TR
>
<
TD
><
a href
=
#2>OTVORENÉ
<
TR
>
<
TD
><
a href
=
#3>Uložiť
<
TR
>
<
TD
><
a href
=
#4>Zavrieť
<
DIV
class=
"menuitem"
>
<
A
class=
"a"
href
=
"#11"
>Helpzilla
<
TABLE
>
<
TR
>
<
TD
><
a
class=
"disabled"
>..
<
TR
>
<
TD
><
a href
=
#13>Index
<
TR
>
<
TD
><
a href
=
"#14"
>O
<
BR
>
Čo sa deje, prečo všetko funguje?
Okamžite si urobte rezerváciu, ktorú vás v tomto článku nenaučím pomocou CSS. Preto okamžite pristúpime k zváženiu princípu menu - k pseudotriede ":hover". Áno, toto je trieda. Tie. selektor môže zdediť iný selektor, ktorý obsahuje ":hover". V našom prípade "A:hover TABLE" vyberie "
Rozmýšľame, ako obnoviť Skype na prenosnom počítači
Fixies masters plná verzia Fixies hra plná verzia stiahnutá do vášho počítača
Inštalácia alebo aktualizácia, oprava chýb Net framework 3
Virtuálne meny a virtuálne burzy vo svete
Zlaté čísla Ako predať krásne telefónne číslo