Az almenünek a főmenühöz viszonyított pozicionálásához a következő stílusok vannak deklarálva:
— listaelemhez, amelybe egy legördülő lista van beágyazva: li (pozíció: relatív;) ;
— a legördülő menühöz ul (pozíció: abszolút;) , valamint a bal és felső értékekhez.

Az áttekinthetőség és a formázás megkönnyítése érdekében adjuk hozzá az osztály felső menüjét a főmenühöz és az almenüt a legördülő menühöz.

A legördülő menü elrejtésének többféle módja van:
1) kijelző: nincs;
2) láthatóság: rejtett;
3) átlátszatlanság: 0;
4) transzformáció: scaleY(0);
5) a jQuery könyvtár használatával.

1. módszer (megjelenítés: nincs;)

A legördülő menü el van rejtve a .submenu használatával (megjelenítés: nincs;) , az egeret a .topmenu li:hover .submenu (megjelenítés: blokk;) segítségével jeleníti meg.

2. módszer (láthatóság: rejtett;)

A menü a .submenu használatával rejtett (láthatóság: rejtett;) , és a .topmenu li:hover .submenu (láthatóság: látható;) segítségével jelenik meg.

3. módszer (átlátszatlanság: 0;)

A menü el van rejtve a .submenu (átlátszatlanság: 0;) használatával, és a .topmenu li:hover .submenu (átlátszatlanság: 1;) segítségével jelenik meg. Ha meg szeretné akadályozni, hogy a menü megjelenjen, amikor az egérmutatót a terület fölé viszi, adjon hozzá láthatóságot: rejtett; , és lebegtetéskor módosítsa láthatóságra: látható; .

4. módszer (transzformáció: scaleY(0);)

A menü el van rejtve a .submenu (transzformáció: scaleY(0);) használatával, és a .topmenu li:hover .submenu (transzformáció: scaleY(1);) segítségével jelenik meg. Mivel az alapértelmezett elemtranszformáció középről történik, a .submenu-hoz (transform-origin: 0 0;) hozzá kell adni, pl. a bal felső sarokból.

5. módszer: A jQuery használata

2. 3D legördülő menü

Érdekes effektusok hozhatók létre CSS használatával A 3-transzformációk például a képernyő mélyéről jelenítik meg a menüt.

átlátszatlanság: 1;

transzformáció: perspektíva(600px) forgatásX(0deg); ) .submenu li a ( szín: #7f7f7f; betűméret: 13px; vonalmagasság: 36px; kitöltés: 0 25px; betűcsalád: "Kurale", serif; )

transzformációs eredet: 0 0;

átmenet: .5s könnyű be-ki; ) .a almenü ( szín: fehér; szövegigazítás: balra; kitöltés: 12px 15px; betűméret: 13px; keret-alsó: 1px solid rgba(255,255,255,.1); ) .almenu li:last-child a ( border-bottom: nincs; .topmenu > li:hover .submenu ( opacitás: 1; transzformáció: scaleY(1); )

keret: 1 képpont tömör #ededed;

z-index: 5; láthatóság: rejtett;átlátszatlanság: 0;

átlátszatlanság: 1; ) .almenü ( pozíció: abszolút; z-index: 4; bal: 50%; felső: 100%; szélesség: 150px; kitöltés: 15px 0 15px; margó-felső: 5px; háttér: fehér; szegélysugár: 5px; box-shadow: 0 0 30px rgba(0,0,0,.2): border-box láthatóság: 0) .topmenu > li:hover .submenu; átlátszatlanság: 1; transzformáció: translate(-50%, 0) .almenu a ( font-family: "Libre Baskerville", serif; betűméret: 11px; betűköz: 1px; kitöltés: 5px 10px); .3s lineáris; .almenü a:hover (háttér: #e8e8e8;) Ebben a cikkben megvizsgáljuk azokat az elemeket, amelyek lehetővé teszik legördülő listák létrehozását, megtanuljuk, hogyan lehet csoportokat létrehozni ezekben a listákban, megnézzük, hogyan lehet letiltani az elemeket, sőt a listacsoportokat, megismerkedünk egy elemmel, amely lehetővé teszi a listák létrehozását. egy többsoros szövegmező, amelyet később felhasználhat benne HTML űrlapok

), az első és a második területhez egyedi neveket állítunk be a name attribútummal. A második szöveges területnél a tiltott attribútummal megadtuk, hogy az oldal betöltésekor letiltásra kerül.</p> <p>Ezenkívül az űrlapon belül elhelyeztünk egy gombot, amely az űrlap beküldésére szolgál (elem <input>az "űrlap beküldése" gombbal: type = "submit" ).</p> <p>Példánk eredménye:</p> <h2>Szövegterület elemleírás</h2> <p>Tehát megnézzük az utolsó példát, és továbblépünk <a href="https://ymol.ru/hu/wi-fi/kak-v-tele-vyglyadyat-negativnye-programmy-mentalnyi-virus--/">gyakorlati feladat</a> cikkek ebben a tankönyvben.</p> <p>Az attribútumnak köszönhetően (HTML tag <textarea>) megengedett olyan eszköztipp-szöveg megadása, amely leírja az elembe történő felhasználói bevitel várható értékét.</p> <p>Az eszköztipp szövege el van rejtve, ha a felhasználó beír egy értéket (bármely karaktert) a szövegmezőbe, ha azt eltávolítja, az eszköztipp ismét megjelenik.</p> <p>Nézzünk egy példát a felhasználásra:</p> <span><!DOCTYPE html> <html> <head> <title> </span> Helyőrző és csak olvasható címke attribútumok <textarea><span></title> </head> <body> <form> <textarea placeholder = <span>"Adja meg az információkat a szövegmezőben"</span>> "A mező csak olvasható"</span> csak olvasható >
type = "submit" name = "submitInfo" value = "submit" > !}

Ebben a példában két szövegterületet hoztunk létre (az elemet ), az első és a második területen az attribútumot egy tippre állítjuk be a felhasználó számára, amely halvány szövegszínnel jelenik meg az elemen belül. A második szövegterületnél az readonly attribútummal megadtuk, hogy csak olvasható lesz (a tartalom nem módosítható).</p> <p>Vegye figyelembe, hogy ha egy szövegmező csak olvasható, a tartalom nem módosítható, de a felhasználó továbbra is navigálhat a tartalomhoz, kiválaszthatja és másolhatja azt.</p> <p>Ezenkívül az űrlapon belül elhelyeztünk egy gombot, amely az űrlap beküldésére szolgál (elem <input>az "űrlap beküldése" gombbal: type = "submit" ).</p> <p>Példánk eredménye:</p> <h2>Kérdések és feladatok a témában</h2> <p>Mielőtt továbblépne a következő témára, töltse ki a gyakorló feladatot:</p> <ul><li>A megszerzett tudás felhasználásával készítse el az alábbi álláshirdetési űrlapot:</li> </ul><p>A feladat megkezdése előtt nyissa meg a példát egy új ablakban, és alaposan vizsgálja meg az űrlapot, hogy minden pontját megismételje. A feladat elvégzéséhez szüksége lesz a cikkben található ismeretekre. Ha lemaradtál róla, gyere vissza tanulmányozni.</p> <p>A gyakorlat befejezése után ellenőrizze az oldal kódját úgy, hogy egy külön ablakban nyissa meg a példát, hogy megbizonyosodjon arról, hogy mindent helyesen tett.</p> <p>A kezdők gyakran szembesülnek a legördülő lista megtervezésének problémájával. Pont mint az eredetivel <b>válassza ki</b> nem tudsz semmi különöset csinálni. Aztán jön a mentő <b>jQuery</b>, és akkor szinte bármit megtehetsz.</p> <p>Mi lenne, ha azt mondanám, hogy szabványos is lehetséges? <b>HTML</b> Nem rossz, ha egy legördülő listát tiszta módon tervezünk <b>CSS</b>?</p> <h3>Legördülő lista HTML-ben</h3> <p>A háttér és a szöveg színe megváltoztatható, és ez nagyon egyszerűen megtehető.</p> <p> <span class="custom-dropdown big"> <select> <option>Sherlock Holmes</option> <option>A Nagy Gatsby</option> <option>V a Vendetta</option> <option>A Wallstreet farkasa</option> <option>A vigasz kvantuma</option> </select> </p><p>IN <b>span</b> hozzáadtunk 2 osztályt, egy főt, amely az összes fő stílust tartalmazza majd " <b>egyéni legördülő menü</b>“, a második pedig nagy, ami meghatározza a méretet <b>legördülő lista</b>. Mondjuk 3 méretet előre tudunk készíteni, <b>nagy, közepes, kicsi</b>, stílusokban <b>betűméret</b>. És ne törődj vele a jövőben. Ezt kihagyhatja, minden a webhelyen lévő tervezéstől függ.</p> <p>Törzs ( háttér: #2a2a2b; szín: #fff; szövegigazítás: középre; font-család: Arial, Helvetica; ) .big ( betűméret: 1,2 em; ) /* Egyéni legördülő menü */ .custom-dropdown ( pozíció : relatív: inline-block: margó: 10px /* csak méret: padding: .5em; border-radius: 0.01px ; ; pozíció: mutató-események: nincs ) .egyéni legördülő lista:: után ; jobb: 1,2 em; felső: 50% . egyéni legördülő menü: 0 határ-sugár: 0 3px 3px 0 ) .custom-dropdown select ( szín: rgba(0,0,0,.3); ) .custom-ropdown select::after ( szín: rgba(0,0,0,.1); ) .custom-dropdown::before ( háttérszín: rgba(0,0,0,.15); ) .custom-dropdown::after ( szín: rgba(0,0,0,.4); )</p><p>Ha nem akar foglalkozni a stílusok tanulmányozásával, egyszerűen adja hozzá webhelyéhez, és változtassa meg a színét, hogy megfeleljen webhelye kialakításának. Akkor csak stílusos vagy" <b>.egyéni legördülő menüből válassza ki</b>” módosítania kell az értékeket <b>háttér-szín</b>És <b>szín</b></p> <p>A HTML opciócímkével egy legördülő listát hozhatunk létre, amely lehetővé teszi a felhasználó számára, hogy válasszon egy opciót egy előre meghatározott értékkészletből.</p> <p>A felhasználó számára látható szöveg eltérhet a value attribútumban megadott szövegtől. A következőképpen hozhat létre legördülő listát:</p> <p><select id="selectID"> <option value=”GR”>Zöld</option> <option value=”YE”>Sárga</option> <option value=”BL”>Fekete</option> </select></p> <ul><li>A legördülő lista a címke használatával jön létre <select>;</li> <li>Egy címke belsejében <select>a kiválasztási lehetőségeket egy címke határozza meg <option>;</li> <li>A címkében <option>a value attribútum segítségével elérheti a kiválasztott opciót PHP, JS, Jquery stb. használatával.</li> </ul><p>Lehetőség van CSS-osztály megadására is az azonosító használata helyett a legördülő lista stílusához.</p> <p>A következő részben példákat mutatok be a legördülő menü használatára <a href="https://ymol.ru/hu/wi-fi/mnogourovnevyi-uporyadochennyi-spisok-v-html-sozdanie-spiska-v-html/">HTML lista</a> JavaScript/JQuery-ben. A példák bemutatják a stílusok beállítását is <select>CSS/CSS3 és <span>Bootstrap keretrendszer</span>.</p> <h2>Példa egy egyszerű legördülő lista létrehozására</h2> <p>Ez a példa a HTML-kiválasztás opciót használja egy legördülő lista létrehozásához, amely három lehetőség közül választhat:</p> <br> <p>A fenti példa a következő jelölést használja egy legördülő lista létrehozásához:</p> <p><select id="selectvalue"> <option>5</option> <option>10</option> <option>15</option> <option>20</option> <option>25</option> </select></p> <h3>Az érték attribútum használata</h3> <p>Ahogy korábban említettük, az value attribútum értéke eltérhet az oldalon megjelenő szövegtől. Például megjelenítheti az országok vagy színek nevét a felhasználók számára, és rövid kódokat használhat az érték attribútumban.</p> <p>A következő példában létrehozunk egy legördülő listát egy érték attribútummal:</p> <br><span>Tekintse meg az online bemutatót és kódot</span> <p>Címkéhez <select>A következő kódot használják:</p> <p><select id="selecttheme"> <option value="márc">Gesztenyebarna</option> <option value="Gre">Zöld</option> <option value="Yel">Sárga</option> <option value="Blu">Kék</option> <option value="Piros">Piros</option> </select></p> <h3>Példa a kiválasztott beállítás elérésére JavaScriptben</h3> <p>Most hozzunk létre egy példát egy kiválasztott opció értékének elérésére és néhány művelet végrehajtására. Ugyanazt a listát hozzuk létre, mint a fenti példában, színopciókkal. Miután kiválasztotta, kattintson a gombra, hogy ezt a színt alkalmazza a dokumentumra:</p> <br><span>Tekintse meg az online bemutatót és kódot</span> <p>A HTML opcióértékhez a következő kódot használjuk:</p> <p><select id="selcolor"> <option value="Gesztenyebarna">Gesztenyebarna</option> <option value="Zöld">Zöld</option> <option value="Sárga">Sárga</option> <option value="Kék">Kék</option> <option value="Piros">Piros</option> <option value="Fehér">Más</option> </select></p> <p>A következő kódsort használják a JavaScriptben az opció érték attribútuma értékének eléréséhez <select>:</p> <p>var seltheme = document.getElementById(“selcolor”).value;</p> <p>A gombra kattintva egy JS függvény hívódik meg, amely a legördülő listában kiválasztott értéket hozzárendeli egy változóhoz. Ez az érték szín alkalmazására szolgál az aktuális dokumentumra.</p> <h3>A látható szöveg elérése a JQuery-ben</h3> <p>Ezúttal a JQuery segítségével érem el a kiválasztott opció értékét: mind a szöveget, mind az értéket . Ebben a demóban a látható szöveghez fogok hozzáférni egy opciós címkében HTML-ben:</p> <br><span>Tekintse meg az online bemutatót és kódot</span> <p>A címke egyes opcióinak kódjában <select>a jelentése eltér a szövegtől. A szín kiválasztása után a jQuery megjeleníti a figyelmeztetésben látható szöveget. Címkekód <select>következő:</p> <p><select id="jqueryselect"> <option value="MAR">Gesztenyebarna</option> <option value="GRE">Zöld</option> <option value="YEL">Sárga</option> <option value="B.L.U.">Kék</option> <option value="PIROS">Piros</option> </select></p> <p>Így érheti el ezt az értéket <span>HTML kiválasztási lehetőség kiválasztott JavaScript</span>:</p> <p>var selectedcolor = $("#jqueryselect option:selected").text();</p> <p>Az értéket a JQuery $.val() metódusával is elérheti:</p> <p>var selectedcolor = $("#jqueryselect").val();</p> <p>Cserélje ki ezt a sort a fenti példában, és a kód a rövid kód/szín értéket fogja megjeleníteni az value attribútumban a látható szöveg helyett.</p> <h3>Példa egy érték megszerzésére egy PHP szkriptben</h3> <p>Ebben a példában a legördülő listából kiválasztott opció értékének lekérésére az űrlap a címke használatával jön létre <select>a jelölő részben. Miután kiválasztotta a színt a legördülő listából, kattintson a „Küldés” gombra. Az űrlapadatok ugyanabba a PHP-fájlba kerülnek átadásra, amely után a kiválasztott szín jelenik meg:</p> <br><span>Tekintse meg az online bemutatót és kódot</span> <p>A példában használt űrlapmódszer a POST, így az űrlapértékeket a használatával kaphatja meg <a href="https://ymol.ru/hu/wi-fi/php-associativnyi-massiv-poluchit-znachenie-po-klyuchu-massivy-v-php/">PHP tömb</a>$_POST[""] . Ez a példában használt űrlapkód:</p> <p><form action="" method="post"> <div class="seldemo"> <label>Válasszon egy színt:</label> <select name="selphp"> <option value="Gesztenyebarna">Gesztenyebarna</option> <option value="Zöld">Zöld</option> <option value="Sárga">Sárga</option> <option value="Kék">Kék</option> <option value="Piros">Piros</option> </select> <p><input type="submit" value="Beküld" class="btncls"></p> </div> </form></p> <p>És itt van a PHP szkript használatának módja <a href="https://ymol.ru/hu/connection/html-input-znachenie-v-pole/">HTML érték</a> opció kiválasztása:</p> <p><?php if($_POST["selphp"] != "") { echo "You selected the following color:<strong>". $_POST["selfphp"]."</strong>"; } ?></p> <p>Ha az űrlap megadja a GET metódust, akkor használja <span>PHP tömb $_GET[""]</span>.</p> <h3>Legördülő lista stílusa CSS-sel</h3> <p>Most nézzük meg, hogyan határozható meg a legördülő lista stílusai <select>a CSS erejét használva. A következő demóban néhány egyszerűt használtam <a href="https://ymol.ru/hu/how-to-work/kakie-css-svoistva-izmenyaet-markery-spiskov-ustanovka-markera-spiska/">CSS tulajdonságok</a>és CSS3 gradiens tulajdonságai:</p> <br><span>Tekintse meg az online bemutatót és kódot</span> <p>A lineáris színátmenettel együtt itt a box-shadow tulajdonságot használjuk. A teljes CSS-kód így néz ki:</p> <p>Selcls ( kitöltés: 3px; szegély: tömör 1px #517B97; körvonal: 0; háttér: -webkit-gradient(lineáris, bal felső, bal 25, from(#FFFFFF), color-stop(4%, #CAD9E3), to (#FFFFFF)); háttér: -moz-linear-gradient(top, #FFFFFF, #CAD9E3 1px, #FFFFFF 25px: rgba(0,0,0, 0.1) 0px 0px 8px; : rgba(0,0,0, 0,1) 0px 0px 8px -webkit-box-shadow: rgba(0,0,0, 0,1) 0px 0px 8px;</p> <h3>Lekerekített sarkok a border-radius tulajdonság használatával</h3> <p>A HTML-kiválasztásnál a CSS3 border-radius tulajdonságot állítjuk be, hogy a sarkok lekerekítettek legyenek. A színséma is változik. Tetszés szerint kísérletezhet a szegélyekkel, szélességgel, margókkal és egyéb tulajdonságokkal:</p> <br><span>Tekintse meg az online bemutatót és kódot</span> <h3>Több CSS attribútum és stílus használata</h3> <p>Ahhoz, hogy a felhasználók több lehetőséget is kiválaszthassanak egy listából, a többszörös attribútumot kell használni. A fenti példában csak egy opció választható ki. Több opció használata esetén a CTRL billentyű lenyomásával több lehetőséget is kiválaszthat:</p> <br><span>Tekintse meg az online bemutatót és kódot</span> <h3>A Bootstrap keretrendszer és a bővítmények használata gyönyörű legördülő listák létrehozásához</h3> <p>Ha a Bootstrap keretrendszert használja, akkor lehetősége van bővítmények használatával nagyszerű HTML-beállítások létrehozására.</p> <p>Ebben az oktatóanyagban egy klasszikus vízszintes menüt készítünk tiszta CSS használatával. Ikonok vannak a listákban. Ha az egérmutatót egy elem fölé viszi, az simán megváltoztatja a gomb és a szöveg színét, és megjelenik egy árnyék. A legördülő listák többszintűvé tehetők, és a fő dolog az, hogy mindez egyszerűen megvalósítható a tiszta CSS3-ban.</p> <p>A leckében a következőket fogjuk használni:</p> <ul><li>kijelző: flex;</li> <li>használja az átmenetet ;</li> <li>Az elemeket a pozíció segítségével pozícionáljuk.</li> </ul><h3>HTML vízszintes menüstruktúra</h3> <p>Először is írjuk meg a vízszintes menü jelölését. Megnyitjuk a fejlesztői környezetünket (esetemben ez a PhpStorm), létrehozunk egy index.html fájlt, megírjuk a html:5 keretrendszert, lecseréljük a lang-ot ru-ra.</p> <p>Eltávolítom az összes meta-t, kivéve a kódolást, hozzáadom a saját címemet " <b>Tom menü</b>».</p> <p>A törzs közé írunk egy header tag-et, ebbe pedig egy blokkot a .dws-menu osztállyal, amelyben a menünk fog elhelyezkedni. Ezután a struktúra a következő lesz, öt listát hozunk létre. Minden listához tartozik egy hivatkozás a href="#" attribútummal. Aztán lesz egy I ikon a .fa .fa- osztállyal.</p><p> <header> <nav class="dws-menu">ul>li*5>a>i.fa.fa-</nav> </header> </p><p>Kattintson az Alkalmaz gombra. <br></p> <p>Írjuk fel a menüpontok nevét ( <i>Kezdőlap, Termékek, Szolgáltatások, Hírek, Kapcsolatok</i>).</p> <p>Ezután válassza ki és csatlakoztassa az ikonokat. Nyissa meg a Font Awesome webhelyet, és válassza ki az alábbi menüelemek ikonjait: <br></p><p> <i class="fa fa-<b>otthon</b>"></i> <i class="fa fa-<b>bevásárlás-</b><b>szekér</b>"></i> <i class="fa fa-<b>fogaskerekek</b>"></i> <i class="fa fa-<b>th-lista</b>"></i> <i class="fa fa-<b>boríték-nyitott</b>"></i> </p><p>Töltse le az archívumot az oldalról ikonokkal, bontsa ki a tartalmát a számítógépére, másolja be a fonts mappát és a css mappát a fejlesztői környezetébe.</p> <p>A betűtípusok mappa ikon-betűtípusokat, a css mappa pedig azok stílusát tartalmazza. A tömörített stílusok eltávolíthatók a font-awesome.min fájlból, tegyük bele a tömörítetlen font-awesome.css fájlt is.</p> <p>Az index.html-ben összekapcsolunk ikonokat, és minden elemhez saját ikonstílust rendelünk ( <b>otthon</b>, <b>bevásárlókosár</b>, <b>fogaskerekek</b>, <b>th-lista</b>, <b>boríték-nyitott</b>).</p> <p>Elkészítettük a főkeretet, a főstílus leírása után létrehozunk egy almenüt, most pedig egy fájlt, ahol a style.css vízszintes menü főbb stílusait írjuk le és az index.html-hez kapcsoljuk. A stílusok összekapcsolásának ellenőrzésére létrehozok egy img mappát, és elhelyezek egy tetszőleges képet a háttérnek. Regisztráljuk a kép kapcsolatát a háttér segítségével. <br></p><p>Body( background-image: url(../img/ep_naturalwhite.png"); )</p> <h2>Leírjuk a vízszintes menü CSS-stílusait</h2> <p>Először is állítsuk vissza az összes behúzást, amelyet a különböző böngészők alapértelmezés szerint beállíthatnak:</p><p>Dws-menu *( margó: 0; kitöltés: 0; )</p><p>Állítsuk a fejlécet 200 pixelre. és hozzárendelje a Cuprum betűtípust, amely letölthető és külön is csatlakoztatható a webhelyéhez, arra az esetre, ha további betűtípusokat adunk hozzá.</p><p>Fejléc (margó: 200 képpont; betűcsalád: Cuprum, Arial, Helvetica, serif nélkül; )</p><p>Rejtsük el a jelölőket a listákból:</p><p>Dws-menu ul, .dws-menu ol( lista-stílus: nincs; )</p><p>Jelenítsük meg a listákat vízszintesen a display: len segítségével, és állítsuk középre:</p><p>Dws-menu > ul(megjelenítés: flex; justify-content: center; )</p><p>A fejlécben csak a tetejét írjuk be, margin-top .</p><p>fejléc( <b>margó felső: 200 képpont;</b> font-család: Cuprum, Arial, Helvetica, sans-serif; )</p><p>Tervezzük meg étlapunkat, állítsuk be a gombok színét, betűtípusát stb.</p> <p>Dws-menu > ul li a( kijelző: blokk; háttér: #ececed; kitöltés: 15px 30px 15px 40px; betűméret: 14px; szín: #454547; szövegdekoráció: nincs; szövegátalakítás: nagybetűk; )</p><p>Ezután pozícionáljuk az ikonokat, hozzárendeljük a pozíciót: a listákhoz képest;</p><p>Az ikonok további középre helyezéséhez:</p><p>Dws-menu > ul li( pozíció: relatív; )</p><p>Dws-menu > ul li > a i.fa(pozíció: abszolút; felső: 15 képpont; balra: 12 képpont; betűméret: 18 képpont; )</p><p>Rendeljünk elválasztót a listákhoz szegély formájában, jelöljük ki az első LI elemet, és állítsuk be a keretet. Kijelöljük az utolsó LI elemet, és hozzárendeljük egy hasonló szegélyt.</p><p>Dws-menu > ul li:first-child( border-bal: 1px solid #b2b3b5; ) .dws-menu > ul li:last-child( border-right: 1px solid #babbbd; )</p> <span>Listaelválasztókat készítünk:</span> <span>.dws-menu > ul li( pozíció: relatív;</span> } <p>szegély-jobb: 1px tömör #c7c8ca; <a href="https://ymol.ru/hu/bluetooth/kak-izmenit-ikonku-puska-v-windows-7-izmenenie-vneshnego-vida-knopki-pusk-v-windows/">Menü megvásárolva</a> megjelenés</p> <h3>, akkor elkezdheti a lebegtetési stílusok leírását. <br></h3> <p>A vízszintes menü animálása az egérmutatóval</p><p>Dws-menu li a:hover(háttér: #454547; szín: #ffffff; box-shadow: 1px 5px 10px -5px fekete; átmenet: minden 0,3 másodperccel egyszerű; )</p> <span>És hogy ez a hatás zökkenőmentesen eltűnjön, add hozzá ezt a stílust a nyugalmi hivatkozáshoz:</span>.dws-menu > ul li a( kijelző: blokk; háttér: #ececed; kitöltés: 15px 30px 15px 40px; betűméret: 14px; szín: #454547; szövegdekoráció: nincs; szövegátalakítás: nagybetűk; <p>átmenet: minden 0,3 s könnyű;</p> <h3>)</h3> <p>Befejeztük a főmenüt, és elkezdhetjük az almenük és a hozzájuk ágyazott menük leírását.</p> <p>A CSS/HTML legördülő menü leírása <br></p> <p>Nyissuk meg az index.html-t, és adjunk hozzá például egy további menüt a termékhez. Az LI listák közé beillesztjük az UL-t, és öt listát helyezünk el benne, amelyek a herf=”#” attribútumú hivatkozásokat tartalmazzák. <i>ul>li*5>a</i>).</p><p> <ul> <li>Kattintson az Alkalmaz gombra, írja le az elemek nevét (</li> <li>Ruházat, Elektronika, Élelmiszer, Eszközök, Háztartás. kémia</li> <li>Szövet</li> <li>Elektronika</li> <li>Élelmiszer</li> </ul> </p><p>Eszközök <br></p> <p>Élet kémia</p><p>Ezután nyissa meg a style.css fájlt, és írja le az almenü stílusait.</p><p>Válassza ki a második listát, és rendelje hozzá pozícióját: abszolút; , állítsa a minimális szélességet 150 képpontra.</p><p>Dws-menu li > ul li(szegély: 1px szilárd #c7c8ca; )</p><p>Az almenü hivatkozásainál állítsa be a behúzásokat 10 pixelre, távolítsa el a szövegátalakítást, és tegye a hátteret néhány árnyalattal sötétebbre: #e4e4e5; .</p><p>Dws-menu li > ul li a( kitöltés: 10px; szövegátalakítás: nincs; háttér: #e4e4e5; )</p><p>Ezután hozzunk létre egy másik almenüt. Menjünk a jelölőfájlhoz, és például az "Elektronikában" készítsünk egy menüt, hasonlót, mint korábban. Leírjuk a bekezdések címsorát ( <i>Fényképezőgépek, számítógépek, telefonok</i>) és mentse el.</p><p> <li>Elektronika <ul> <li>Fényképezőgépek</li> <li>Számítógépek</li> <li>Telefonok</li> </ul> </li> </p><p>Megjelennek, de rejtve a főmenü alatt, most pozíció: abszolút;</p><p>beágyazott UL, és tolja el 150 képpel. oldalra:</p> <span>Dws-menu li > ul li ul(pozíció: abszolút; jobbra: -150px; felül: 0; )</span>/*almenü*/ .dws-menu li ul( pozíció: abszolút; min-szélesség: 150 képpont; <p>kijelző: nincs;</p><p>)</p><p>Megjelenésükhöz pedig listákat választunk ki, és megjelenítjük a display segítségével: blokk; . <a href="https://ymol.ru/hu/overview/cherstvyi-menu-php-mnogourovnevoe-menyu-na-php-i-mysql-kak-sdelat-ssylku-v-menyu/">Dws-menu li:hover > ul( display: block; )</a> Most hozzáadhatja</p><p> <ul> <li><i class="fa fa-home"></i> Otthon</li> <li><i class="fa fa-shopping-cart"></i> többszintű menük <ul> <li>csak egyszerűen másolja az UL blokkot, módosítsa a pontjait. <ul> <li>Termékek</li> <li>Szövet</li> <li>Cipők</li> </ul> </li> <li>Elektronika <ul> <li>Fényképezőgépek</li> <li>Számítógépek</li> <li>Dzsekik <ul> <li>Nadrág</li> <li>Telefonok</li> <li>Samsung</li> </ul> </li> </ul> </li> <li>Szövet</li> <li>Elektronika</li> <li>Élelmiszer</li> </ul> </li> <li><i class="fa fa-cogs"></i> Flf <ul> <li>Alma</li> <li>Szolgáltatások</li> <li>Szolgáltatás 1</li> </ul> </li> <li><i class="fa fa-th-list"></i> 2. szolgáltatás</li> <li><i class="fa fa-envelope-open"></i> Kapcsolatok</li> </ul> </p><p>Szolgáltatás 3 <br></p> <span>Hír</span> <span>Ezután fejezzük be az utolsó lépéseket a gombok hozzávalóval való díszítésével. CSS generátort használok, több Preset-et is készítettem, létrehozhat sajátot is, az én esetemben csak ezt a kódot másolom be és helyezem a háttér helyére, amit korábban írtam.</span> <span>.dws-menu > ul li a( display: block;</span>/* Permalink – a színátmenet szerkesztéséhez és megosztásához használja: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98,757577+100;Egyéni+3 */ háttér: #c9c9c9 ; /* Régi böngészők */ háttér: -moz-linear-gradient(top, #c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, #757577 100%); /* FF3.6-15 */ háttér: -webkit-linear-gradient(top, #c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%,#757577 100%); /* Chrome10-25,Safari5.1-6 */ háttér: lineáris gradiens(lefelé, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ szűrő: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c9c9c9", endColorstr="#757577",GradientType=0); /* IE6-9 */ <span>/* Permalink – a színátmenet szerkesztéséhez és megosztásához használja: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 */ háttér: #e0e1e5; /* Régi böngészők */ háttér: -moz-linear-gradient(top, #e0e1e5 0%, #454547 2%, #454547 98%, #e0e1e5 100%); /* FF3.6-15 */ háttér: -webkit-linear-gradient(top, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* Chrome10-25,Safari5.1-6 */ háttér: linear-gradient(lefelé, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ szűrő: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e0e1e5", endColorstr="#e0e1e5",GradientType=0); /* IE6-9 */</span> <span>szín: #ffffff;</span> <br><img src='https://i1.wp.com/opt-568316.ssl.1c-bitrix-cdn.ru/upload/medialibrary/c9c/c9c23a8ee4eb052a2afdcfa98fabe0a2.jpg' width="100%" loading=lazy loading=lazy><br><p>box-shadow: 1px 5px 10px -5px fekete;</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> <div class="evc-social-likes" data-url="https://ymol.ru/setting/vybor-iz-vypadayushchego-spiska-v-html-elementy-html-form/" data-title="Kiválasztás a legördülő listából HTML-ben. HTML űrlapelemek - legördülő lista (kiválasztás, opció, optgroup címkék), szövegmező (textarea), valamint címke, mezőkészlet és jelmagyarázat használata Legördülő lista css lebegtetésen" data-media=""> <div class="social-likes "> <div class="facebook" title="átmenet: minden 0,3 s könnyű; )">Kívánság szerint ez a menü úgy alakítható ki, hogy megfeleljen az Önnek megfelelő stílusnak a webhelyen, és egyszerűen generáljon egy színt, és cserélje ki a kódban. Az eredmény egy egyszerű és egyben szép vízszintes menü, tiszta CSS-ben.</div> <div class="twitter" title="Link megosztása a Facebookon">Facebook</div> <div class="vkontakte" title="Link megosztása a Twitteren">Twitter</div> <div class="plusone" title="Link megosztása a VKontakte-on">VKontakte</div> </div> </div> <span class="thecategory"><i class="icon-globe"></i> <a href="https://ymol.ru/hu/category/setting/" rel="category tag">Beállítások elemre </a></span> </div> </article> <div class="post-tags"></div> <div class="related-posts"> <h4>Link megosztása a Google Plus-on</h4> <article id="post-36374" class="latestpost post-36374 post type-post status-publish format-standard hentry category-poleznye-sovety"> <a href="https://ymol.ru/hu/operation/kak-abonentam-mts-uznat-svoi-nomer-telefona-mobilnyi/" title="Google+" id="featured-thumbnail"> <div class="featured-thumbnail"> <img src="/uploads/0637926dfa0061433afd588fbf5583cc.jpg" alt="Google+" / loading=lazy loading=lazy> </div> </a> <header class="entry-header"> <h1 class="entry-title"><a href="https://ymol.ru/hu/operation/kak-abonentam-mts-uznat-svoi-nomer-telefona-mobilnyi/" rel="bookmark">Google+</a></h1> </header> </article> <article id="post-36373" class="latestpost post-36373 post type-post status-publish format-standard hentry category-poleznye-sovety"> <a href="https://ymol.ru/hu/reviews/programma-chtoby-zapisyvat-cd-desyatka-besplatnyh-programm-dlya-zapisi/" title="Ön is kedvelheti" id="featured-thumbnail"> <div class="featured-thumbnail"> <img src="/uploads/db92ce5b818edead87740507e0c79c7b.jpg" alt="Ön is kedvelheti" / loading=lazy loading=lazy> </div> </a> <header class="entry-header"> <h1 class="entry-title"><a href="https://ymol.ru/hu/reviews/programma-chtoby-zapisyvat-cd-desyatka-besplatnyh-programm-dlya-zapisi/" rel="bookmark">Ön is kedvelheti</a></h1> </header> </article> <article id="post-36372" class="latestpost post-36372 post type-post status-publish format-standard hentry category-poleznye-sovety"> <a href="https://ymol.ru/hu/wi-fi/prosmotr-dvd-diska-na-noutbuke-i-kompyutere-windows-ne-vidit-cd-ili-dvd-diskovod-chto/" title="Mobil internet az MTS-től" id="featured-thumbnail"> <div class="featured-thumbnail"> <img src="/uploads/e8ac8b5dfe614f4e051c12722bca05c1.jpg" alt="Mobil internet az MTS-től" / loading=lazy loading=lazy> </div> </a> <header class="entry-header"> <h1 class="entry-title"><a href="https://ymol.ru/hu/wi-fi/prosmotr-dvd-diska-na-noutbuke-i-kompyutere-windows-ne-vidit-cd-ili-dvd-diskovod-chto/" rel="bookmark">Mobil internet az MTS-től</a></h1> </header> </article> </div> </main> <div id="sidebar" class="sidebar c-4-12" role="complementary" itemscope itemtype="http://schema.org/WPSideBar"> <aside id="recent-posts-3" class="widget widget_recent_entries"> <h3 class="widget-title">Tíz ingyenes program optikai lemezek írására</h3> <ul> <li class='li1'><a href='https://ymol.ru/hu/instructions/red-energy-super-mts-i-posekundnyi-mts-obnovili-svoe-yaico-socialnaya/' title='A Windows nem látja a CD- vagy DVD-meghajtót"яйцо" Социальная активность оператора'>Legnépszerűbb</a></li> <li class='li1'><a href='https://ymol.ru/hu/reviews/vychislyaemoe-pole-v-skd-1s-8-3-yazyk-vyrazhenii-sistemy-komponovki/' title='Az MTS oldal frissítette a sajátját'>Az MTS oldal frissítette a sajátját</a></li> <li class='li1'><a href='https://ymol.ru/hu/how-to-work/elektronnaya-pochta-kak-sredstvo-obespecheniya-delovyh-kommunikacii/' title='Az MTS frissítette az üzemeltető „tojás” közösségi tevékenységét'>Az MTS frissítette az üzemeltető „tojás” közösségi tevékenységét</a></li> <li class='li1'><a href='https://ymol.ru/hu/operation/uvelichivaem-gromkost-mp3-faila-obrabotka-zapisei-s-diktofona-s-pomoshchyu/' title='Számított mező SKD 1s-ben 8'>Számított mező SKD 1s-ben 8</a></li> <li class='li1'><a href='https://ymol.ru/hu/reviews/moskovskii-gosudarstvennyi-universitet-pechati-federalnoe-agentstvo-po/' title='Elektronikus üzleti kommunikáció A kommunikációs eszközök nagyon fontosak'>Elektronikus üzleti kommunikáció A kommunikációs eszközök nagyon fontosak</a></li> <li class='li1'><a href='https://ymol.ru/hu/operation/ne-gruzitsya-windows-10-v-ahci-vklyuchaem-ahci-rezhim-v-bios-kak-proverit-vklyuchen-li/' title='Felvételek feldolgozása hangrögzítőről az Adobe Audition segítségével Hangrögzítőről készült hangfelvételek javítására szolgáló program'>Felvételek feldolgozása hangrögzítőről az Adobe Audition segítségével Hangrögzítőről készült hangfelvételek javítására szolgáló program</a></li> <li class='li1'><a href='https://ymol.ru/hu/beginning/chto-takoe-klasterizaciya-semanticheskogo-yadra-i-kak-delat-gruppirovku/' title='Szövetségi Oktatási Ügynökség Információs heurisztika'>Szövetségi Oktatási Ügynökség Információs heurisztika</a></li> <li class='li1'><a href='https://ymol.ru/hu/setting/kak-v-skaipe-pokazat-svoi-ekran-sobesedniku-kakie-vozmozhnosti-dostupny-v/' title='Engedélyezze az AHCI módot a BIOS-ban'>Engedélyezze az AHCI módot a BIOS-ban</a></li> <li class='li1'><a href='https://ymol.ru/hu/choice/ne-zapuskaetsya-autocad-parallelnaya-konfiguraciya-nepravilna-kak/' title='A szemantikai mag és a keresőmotor lekérdezések klaszterezése Lekérdezések csoportosítása a szemantikai magban'>A szemantikai mag és a keresőmotor lekérdezések klaszterezése Lekérdezések csoportosítása a szemantikai magban</a></li> <li class='li1'><a href='https://ymol.ru/hu/beginning/telekarta-odno-oborudovanie-na-neskolko-televizorov-kak-podklyuchit-dva/' title='Milyen funkciók érhetők el a Skype-hívásokban?'>Milyen funkciók érhetők el a Skype-hívásokban?</a></li> </ul> </aside> <aside id="wpforo_widget_recent_topics-2" class="widget widget_wpforo_widget_recent_topics"><div id="wpf-widget-recent-replies" class="wpforo-widget-wrap"><h3 class="widget-title">"Az alkalmazás nem indult el, mert a párhuzamos konfigurációja helytelen" hiba elhárítása</h3><div class="wpforo-widget-content"><ul> <li> <div class="wpforo-list-item"> <div class="wpforo-list-item-left"> <img class="avatar" src="/uploads/e71372f2d81f494ed54bb8cf89310863.jpg" height="96" width="96" / loading=lazy loading=lazy> </div> <div class="wpforo-list-item-right"> <p class="posttitle"><a href="https://ymol.ru/hu/wi-fi/bp-programmy-programmy-dlya-noutbuka-prostaya-programma-dlya-skachivaniya-igr/">Hogyan csatlakoztathatunk két tévét egy parabolaantennához</a></p> <p class="postuser">2024-05-15 03:08:19</p> </div> <div class="wpf-clear"></div> </div> </li> <li> <div class="wpforo-list-item"> <div class="wpforo-list-item-left"> <img class="avatar" src="/uploads/3e26b340d0a794722aac41bf4af0cd69.jpg" height="96" width="96" / loading=lazy loading=lazy> </div> <div class="wpforo-list-item-right"> <p class="posttitle"><a href="https://ymol.ru/hu/instructions/telefon-htc-opisanie-i-harakteristiki-htc-one-m7---tehnicheskie-harakteristiki/">Új üzenetek</a></p> <p class="postuser">2024-05-08 03:08:34</p> </div> <div class="wpf-clear"></div> </div> </li> <li> <div class="wpforo-list-item"> <div class="wpforo-list-item-left"> <img class="avatar" src="/uploads/8e3803b8a9cee6638730e12090da84b9.jpg" height="96" width="96" / loading=lazy loading=lazy> </div> <div class="wpforo-list-item-right"> <p class="posttitle"><a href="https://ymol.ru/hu/choice/regulyarnye-vyrazheniya-poisk-ne-vklyuchaya-stroku-javascript-regulyarnoe/">BP programok. Laptop programok. Egy egyszerű program játékok számítógépre letöltéséhez</a></p> <p class="postuser">2024-05-05 03:13:30</p> </div> <div class="wpf-clear"></div> </div> </li> <li> <div class="wpforo-list-item"> <div class="wpforo-list-item-left"> <img class="avatar" src="/uploads/568b281d61696cb02e39bd7680ae9b3e.jpg" height="96" width="96" / loading=lazy loading=lazy> </div> <div class="wpforo-list-item-right"> <p class="posttitle"><a href="https://ymol.ru/hu/overview/m1-b-3-kompyuternye-tehnologii-v-nauke-i-proizvodstve-kompyuternye/">HTC One M7 – Műszaki adatok</a></p> <p class="postuser">2024-05-04 03:24:12</p> </div> <div class="wpf-clear"></div> </div> </li> <li> <div class="wpforo-list-item"> <div class="wpforo-list-item-left"> <img class="avatar" src="/uploads/49f66e5b2f9388fa11971c779148e0b9.jpg" height="96" width="96" / loading=lazy loading=lazy> </div> <div class="wpforo-list-item-right"> <p class="posttitle"><a href="https://ymol.ru/hu/instructions/progress-dispetchera-zagruzok-ne-otobrazhaetsya-v-oblasti/">Javascript, reguláris kifejezés: példák, reguláris kifejezések ellenőrzése</a></p> <p class="postuser">2024-05-02 03:11:13</p> </div> <div class="wpf-clear"></div> </div> </li> </ul></div></div></aside><aside id="categories-2" class="widget widget_categories"><h3 class="widget-title">M1.B.3 Számítógépes technológiák a tudományban és a termelésben. Számítógépes technológiák a tudományban és az oktatásban Számítógépes technológiák a tudományban és a termelésben</h3> <ul> <li class="cat-item cat-item-84"><a href="https://ymol.ru/hu/category/bluetooth/">Bluetooth</a> </li> <li class="cat-item cat-item-84"><a href="https://ymol.ru/hu/category/wi-fi/">WiFi</a> </li> <li class="cat-item cat-item-84"><a href="https://ymol.ru/hu/category/choice/">Választás </a> </li> <li class="cat-item cat-item-84"><a href="https://ymol.ru/hu/category/instructions/">Utasítás</a> </li> <li class="cat-item cat-item-84"><a href="https://ymol.ru/hu/category/how-to-work/">Hogyan kell dolgozni</a> </li> <li class="cat-item cat-item-84"><a href="https://ymol.ru/hu/category/setting/">Beállítások elemre </a> </li> <li class="cat-item cat-item-84"><a href="https://ymol.ru/hu/category/beginning/">Miért nem láthatók a fájlok a flash meghajtón, és hogyan lehet ezt kijavítani Miért nem jelennek meg a letöltött fájlok a letöltésekben</a> </li> <li class="cat-item cat-item-84"><a href="https://ymol.ru/hu/category/overview/">Kategóriák</a> </li> <li class="cat-item cat-item-84"><a href="https://ymol.ru/hu/category/overview/">Tekintse át </a> </li> <li class="cat-item cat-item-84"><a href="https://ymol.ru/hu/category/reviews/">Vélemények</a> </li> </ul> </aside><aside id="dwqa-latest-question-2" class="widget widget_categories"><h3 class="widget-title">Új cikkek</h3><ul> <li class="cat-item"><a href="https://ymol.ru/hu/setting/nl-interneshnl-lichnyi-kabinet-vhod-nl-international-otzyvy-interesuyut/">NL International – érdeklik az értékelések?</a></li> <li class="cat-item"><a href="https://ymol.ru/hu/setting/svetyashchiesya-linii-dlya-fotoshopa-kak-sozdat-svetyashchiesya-linii-v/">Hogyan készítsünk fénylő vonalakat a Photoshopban - gyorsan és szépen</a></li> <li class="cat-item"><a href="https://ymol.ru/hu/operation/kak-abonentam-mts-uznat-svoi-nomer-telefona-mobilnyi/">Google+</a></li> <li class="cat-item"><a href="https://ymol.ru/hu/reviews/programma-chtoby-zapisyvat-cd-desyatka-besplatnyh-programm-dlya-zapisi/">Ön is kedvelheti</a></li> <li class="cat-item"><a href="https://ymol.ru/hu/wi-fi/prosmotr-dvd-diska-na-noutbuke-i-kompyutere-windows-ne-vidit-cd-ili-dvd-diskovod-chto/">Mobil internet az MTS-től</a></li> <li class="cat-item"><a href="https://ymol.ru/hu/instructions/red-energy-super-mts-i-posekundnyi-mts-obnovili-svoe-yaico-socialnaya/">Legnépszerűbb</a></li> <li class="cat-item"><a href="https://ymol.ru/hu/reviews/vychislyaemoe-pole-v-skd-1s-8-3-yazyk-vyrazhenii-sistemy-komponovki/">Az MTS oldal frissítette a sajátját</a></li> <li class="cat-item"><a href="https://ymol.ru/hu/how-to-work/elektronnaya-pochta-kak-sredstvo-obespecheniya-delovyh-kommunikacii/">Az MTS frissítette az üzemeltető „tojás” közösségi tevékenységét</a></li> <li class="cat-item"><a href="https://ymol.ru/hu/operation/uvelichivaem-gromkost-mp3-faila-obrabotka-zapisei-s-diktofona-s-pomoshchyu/">Számított mező SKD 1s-ben 8</a></li> <li class="cat-item"><a href="https://ymol.ru/hu/reviews/moskovskii-gosudarstvennyi-universitet-pechati-federalnoe-agentstvo-po/">Elektronikus üzleti kommunikáció A kommunikációs eszközök nagyon fontosak</a></li> </ul></aside></div> </div> </div> </div> <footer id="colophon" class="site-footer" role="contentinfo"> <div class="site-info container"> <div class="copyrights"> <span class="sep"> </span> ymol.ru - Mindent a táblagépekről - Információs portál</div> <a href="#blog" class="toplink" ><i class="icon-angle-up"></i></a> <nav id="navigation" class="footer-navigation" role="navigation"> <div class="menu-footer-menu-container"><ul id="menu-footer-menu" class="menu"> <li class="menu-item type-post_type object-page "><a href="https://ymol.ru/hu/sitemap.xml">Webhelytérkép</a></li> <li class="menu-item type-post_type object-page "><a href="https://ymol.ru/hu/feedback/">Kapcsolatok</a></li> </ul></div> </nav> </div> </footer> </div> <div id="vk_api_transport"></div> <script type="text/javascript"> jQuery(document).ready(function ($) { if ($('.social-likes')) { $('.social-likes').each(function () { var p = $(this).parent(); if (p.data('url')) { $(this).data({ 'url': p.data('url'), 'title': p.data('title') } ); } if ($(this).find('.pinterest').length) { if (p.data('media')) { $($(this).find('.pinterest')[0]).data({ 'media': p.data('media') } ); } else $($(this).find('.pinterest')[0]).remove(); } } ); $('.social-likes').socialLikes({ zeroes: 0 } ); } } ); </script> <script type='text/javascript' src='https://ymol.ru/wp-content/plugins/akismet/_inc/form.js?ver=3.2'></script> <script type='text/javascript' src='https://ymol.ru/wp-content/plugins/easy-vkontakte-connect/js/evc-share.js'></script> <script type='text/javascript' src='https://ymol.ru/wp-content/plugins/easy-vkontakte-connect/js/social-likes.min.js?ver=3.0.4'></script> <script type='text/javascript' src='https://ymol.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script> <script type='text/javascript' src='https://ymol.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.5.1'></script> <script type='text/javascript' src='https://ymol.ru/wp-content/plugins/wp-review/assets/js/main.js?ver=4.0.6'></script> <script type='text/javascript' src='https://ymol.ru/wp-content/themes/sociallyviral/js/customscripts.js?ver=20120212'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.6.9'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.6.9'></script> <script>setTimeout( function(){ jQuery.post('/wp-content/plugins/kama-postviews/ajax-request.php',{ meta_id:'1438', view_type:'post_view', relpath:'' } ,function(result){ jQuery('.ajax_views').html(result); } );} , 2000);</script> <script>function lc_get_cookie(name) { var c = document.cookie;if (c.indexOf(name) != -1) { var x = c.indexOf(name)+name.length+1;var y = c.indexOf(";",x);if (y < 0) y = c.length;return decodeURIComponent(c.substring(x,y));} else return "";} if ((d = document.getElementById("commentform")) != null) { e = d.elements;var z = lc_get_cookie("comment_author_email_27b5a291828a105bf783f92a6d070718");if (z != "") e["email"].value = z;z = lc_get_cookie("comment_author_27b5a291828a105bf783f92a6d070718");if (z != "") e["author"].value = z.replace(/\+/g, " ");z = lc_get_cookie("comment_author_url_27b5a291828a105bf783f92a6d070718");if (z != "") e["url"].value = z;} </script></body></html>