Как изменить цвет текста-подсказки в placeholder с помощью стилей CSS? Скрываем placeholder красиво.

Плейсхолдер - элемент поля ввода, в котором можно разместить подсказку. Когда пользователь начинает вводить данные, вспомогательный текст пропадает, чтобы не мешать. Каждый браузер имеет свое мнение на счет того, как следует отображать этот элемент, и порой дефолтные стили ломают весь дизайн. Чтобы управлять ими, требуется воспользоваться специальным правилом CSS placeholder.

Где находится плейсхолдер?

Проблема в том, что подсказка поля ввода надежно спрятана в теневом DOM, и добраться до нее не так-то просто. Для этого используется особый нестандартный ::placeholder. С его помощью можно управлять свойствами подсказки.

Стилизация placeholder на CSS выглядит так:

Input::placeholder { color: red; opacity: 1; font-style: italic; }

Поддержка браузерами

Псевдоэлемент CSS placeholder хорошо обрабатывается всеми современными браузерами, а для поддержки старых обозревателей можно воспользоваться префиксами:

• ::-webkit-input-placeholder - для webkit-браузеров (Safari, Chrome, Opera);
• ::-moz-placeholder - для браузеров Firefox выше 19 версии;
• :-moz-placeholder - для старых Firefox;
• :-ms-input-placeholder - для Internet Explorer выше 10 версии.

Как видно, старые браузеры Mozilla, а также IE считают placeholder CSS-псевдоклассом, а не псевдоэлементом. Не будем с ними спорить, просто учтем этот аспект при стилизации поля ввода.

Возможности стилизации

Для псевдоэлемента placeholder в CSS можно установить следующие параметры:

• фон - группа блока подсказки распространяется на все поле ввода. Можно задать не только цвет (background-color), но и изображение (background-image).
• цвет текста - color;
• прозрачность - opacity;
• подчеркивание, надчеркивание или зачеркивание - text-decoration;
• регистр - text-transform;
• внутренние отступы - padding. Поддерживается не всеми браузерами. Как для строчных элементов, верхний и нижний отступы игнорируются.
• отображение шрифта - свойства группы font, line-height и разнообразные отступы (text-indent, letter-spacing, word-spacing);
• вертикальное выравнивание в строке - vertical-align;
• обрезка текста при переполнении контейнера - text-overflow.

.input1::placeholder { background-image: linear-gradient(lime, blue); color: white; } .input2::placeholder { text-decoration: line-through; color: purple; font-weight: bold; } .input3::placeholder { font-size: 16px; letter-spacing: 10px; } .input4::placeholder { background: brown; color: white; text-overflow: ellipsis; }

В фокусе

По умолчанию подсказка пропадает из поля ввода только в том случае, если в него введен хотя бы один символ. Но placeholder позволяет реализовать исчезновение сразу при фокусировке на поле. Для этого необходимо совместить его с псевдоклассом:focus.

Input:focus::placeholder { color: transparent; }

В некоторых браузерах допустимо анимировать изменение ряда свойств плейсхолдера с помощью инструкции transition.

Input::placeholder { color: black; transition: color 1s; } input:focus::placeholder { color: white; }

В браузере Google Chrome цвет подсказки при фокусировке на таком поле будет плавно изменяться в течение одной секунды.

Если вы не знакомы с атрибутом placeholder, то давайте немного разъясним, что это такое и где он используется. Используется он в полях ввода формы. Атрибут выводит надпись в поле ввода, представляя роль некой подсказки. Ранее на нашем сайте был пример, с с помощью javascript, положительная сторона данного метода это кроссбраузерность. Теперь давайте поговорим о стилизации атрибута placeholder, который используется в элементах input и textarea.
Код поля ввода в нашем примере будет выглядеть примерно так:

На выходе мы получает такое поле:

Теперь давайте представим, что нам необходимо стилизовать placeholder, для этого нам следует прописать набор правил в CSS:

::-webkit-input-placeholder { color: #c1c1c1; } ::-moz-placeholder { color: #c1c1c1; } /* Firefox 19+ */ :-moz-placeholder { color: #c1c1c1; } /* Firefox 18- */ :-ms-input-placeholder { color: #c1c1c1; }

Получаем:

Изменять мы можем не все свойства, но список большинства из них, поддерживаемых современными браузерами приведен ниже:
font (так же смежные свойства)
background (так же смежные свойства)
color
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
text-indent
text-overflow
opacity

В разных браузерах правило пишется по разному, т.к. пока нет единого стандарта, этот набор записей продолжает быть актуальным. В браузере IE, а так же firefox ниже 18 версии placeholder воспринимается как псевдокласс, а в новых браузерах firefox, webkit и blink воспринимается как псевдоэлемент.

Сокращение текста в placeholder
Иногда подсказки могут быть такой длины, что не способны полностью поместиться в поле ввода. Для этих целей можно так же воспользоваться дополнительными свойствами, которые позволят сократить текст placeholder-а в поле ввода.

Input { text-overflow:ellipsis; } input::-moz-placeholder { text-overflow:ellipsis; } input:-moz-placeholder { text-overflow:ellipsis; } input:-ms-input-placeholder { text-overflow:ellipsis; }

В результате получаем поле ввода такого с placeholder такого вида:

Скрываем текст при клике по полю
По умолчанию каждый браузер интерпретирует реакцию placeholder-a по своему. В одних браузерах он скрывается сразу при клике на поле, в других он скрывается при наличии хотя бы одного символа в поле ввода. Давайте сделаем так, чтобы текст скрывался при клике по полю, одинаково во всех браузерах.

:focus::-webkit-input-placeholder { color: transparent; } :focus::-moz-placeholder { color: transparent; } :focus:-moz-placeholder { color: transparent; } :focus:-ms-input-placeholder { color: transparent; }

Получаем такое действо:

Атрибут placeholder используется для создания подсказок внутри пустых полей ввода (теги и ). В этой статье я рассмотрю способы стилизации плэйсхолдеров, а также, как сделать их более удобными в использовании.</p> <p>Начнём с примера для тех, кто ещё не знает, что такое плэйсхолдер и как его использовать:</p> <input type= "email" placeholder= "example@gmail.com" > <p> <input type="email" placeholder="example@gmail.com" class="demo-css-placeholders-input"></p> <p>При разработке интерфейсов следует учитывать особенности поведения плэйсхолдеров. Текст плэйсхолдера исчезает, как только начинается ввод. Именно поэтому не стоит использовать их для передачи информации о самом поле ввода (сколько и какие именно символов оно должно содержать). Для данных целей лучше всего использовать тег <label> или параграф с небольшой подсказкой. Подробнее об особенностях использования плэйсхолдеров можно почитать .</p> <h2>Стилизация</h2> <p>Для стилизации плэйсхолдеров используются следующие правила:</p> ::-webkit-input-placeholder { color : blue ; } ::-moz-placeholder { color : blue ; } /* Firefox 19+ */ :-moz-placeholder { color : blue ; } /* Firefox 18- */ :-ms-input-placeholder { color : blue ; } <p>Выглядит ужасно, не так ли? И на это есть причина - до сих пор CSS правила для плэйсхолдеров не были стандартизированы и имплементация в каждом браузере различная. Подробнее о всех необходимых префиксах можно узнать на caniuse .</p> <p>Если вы используете CSS-препроцессор, то, скорее всего, для применения стилей к плэйсхолдерам вам будет удобнее всего написать простой миксин. Пример на Sass:</p> @mixin placeholder { & : :- webkit-input-placeholder { @content ; } & : - moz-placeholder { @content ; } & : :- moz-placeholder { @content ; } & : - ms-input-placeholder { @content ; } } <p>В зависимости от контекста миксин можно использовать как для глобального применения стилей, так и для отдельных элементов (опробуйте на SassMeister):</p> <span>// Глобально для каждого поля ввода </span>@include placeholder { color : blue ; } <span>// Для определённых полей ввода </span>.input { @include placeholder { color : green ; } } <h4>Пример</h4> <p>Синий текст для плэйсхолдера (никогда так не делайте):</p> .blue-text ::-webkit-input-placeholder { color : #2e8ece ; } .blue-text :-moz-placeholder { color : #2e8ece ; } .blue-text ::-moz-placeholder { color : #2e8ece ; } .blue-text :-ms-input-placeholder { color : #2e8ece ; } <p> <input type="text" placeholder="Начните печатать здесь" class="demo-css-placeholders-input pl-blue-text"></p> <h2>Поддерживаемые свойства</h2> <p>Не каждое CSS свойство можно использовать с плэйсхолдерами. Вот полный список поддерживаемых свойств:</p> <ul><li>font и все связанные свойства (font-size , font-family и т.д.)</li> <li>background и все связанные свойства (background-color , background-image и т.д.)</li> <li>opacity</li> <li>text-indent</li> <li>text-overflow</li> <li>color</li> <li>text-transform</li> <li>line-height</li> <li>word-spacing</li> <li>letter-spacing</li> <li>text-decoration</li> <li>vertical-align</li> </ul><h2>Анимации</h2> <p>Идеи анимаций принадлежит блогу html5.by .</p> <p>Все следующие примеры написаны с использованием препроцессора Sass . К каждому прилагается ссылка на SassMeister, по которой вы сможете найти скомпилированный CSS код.</p> <p>Скорее всего, вы захотите применять анимации к плэйсхолдерам при фокусе на поле ввода. Делается всё это достаточно просто. Достаточно всего несколько раз использовать написанный ранее миксин placeholder:</p> .input { @include placeholder { <span>// Стили для нормального состояния </span> } & :focus { @include placeholder { <span>// Стили после события focus </span> } } } <h3>Изменение прозрачности</h3> .input { @include placeholder { color : #aaa ; opacity : 1 ; transition : opacity 300ms ; } & :focus { @include placeholder { opacity : 0 ; } } } <p> <input type="text" placeholder="Демо: изменение прозрачности" class="demo-css-placeholders-input pl-opacity"></p> <h3>Сдвиг вправо и влево</h3> <p>Чем больше ширина поля ввода, тем больше должно быть значение свойства text-indent . Для стандартного поля ввода будет достаточно 500px , для более широких стоит подбирать вручную. От ширины поля ввода и значения text-indent зависит скорость анимации. Для сдвига влево нужно использовать отрицательные значения, например -500px .</p><p> <input type="text" placeholder="Демо: сдвиг вправо" class="demo-css-placeholders-input pl-shift-right"><input type="text" placeholder="Демо: сдвиг влево" class="demo-css-placeholders-input pl-shift-left"></p> <h3>Сдвиг вниз</h3> <p>Как и в прошлом примере анимация зависит от размеров воля ввода, но в этом случае внимание своит обратить на высоту. Для подавляющего большинства полей ввода искомое значение line-height будет находиться в пределах 100px . К сожалению, с помощью свойства line-height невозможно реализовать эффект сдвига вверх, так как свойство не принимает отрицательные значения.</p> .input { @include placeholder { text-indent : 0px ; transition : text-indent 300ms ; } & :focus { @include placeholder { text-indent : 500px ; } } } <p> <input type="text" placeholder="Демо: сдвиг вниз" class="demo-css-placeholders-input pl-shift-down"></p> <h3>Всё вместе</h3> <p>Чтобы использовать код анимаций для плэйсхолдеров было приятно и удобно, можно написать небольшую библиотеку миксинов для любого препроцессора. Библиотека выглядит следующим образом ():</p> @mixin placeholder { & : :- webkit-input-placeholder { @content } & : - moz-placeholder { @content } & : :- moz-placeholder { @content } & : - ms-input-placeholder { @content } } @mixin pl-shift ($side : left , $position : 500px , $duration : 200ms ) { @include placeholder { text-indent : 0 ; transition : text-indent $duration ; } & :focus { @include placeholder { text-indent : if ($side == left , - $position , $position ); } } } @mixin pl-slide-down ($position : 5 , $duration : 200ms ) { @include placeholder { line-height : 1 ; transition : line-height $duration ; } & :focus { @include placeholder { line-height : $position ; } } } @mixin pl-fade-out ($duration : 200ms ) { @include placeholder { opacity : 1 ; transition : opacity $duration ; } & :focus { @include placeholder { opacity : 0 ; } } } <p>Использовать её очень просто. Достаточно подключить желаемый миксин к любому полю ввода или просто создать одно глобальное правило для всех пэйсхолдеров на странице:</p> <span>// Для отдельных элементов </span>.pl-shift-right { @include pl-shift ( right ); } .pl-fade-out { @include pl-fade-out ; } <span>// Для всего остального </span>@include pl-shift ( left ); <h2>Autoprefixer</h2> <p>Если вы не используете препроцессор и всё ещё не хотите, чтобы ваш исходный CSS файл превратился в кашу из префиксов для всех возможных браузеров, то обратите внимание на Autoprefixer . С его помощью чистый CSS можно сделать грязным (но уже в другом файле), добавив все необходимые префиксы ко всем свойствам. Чтобы заставить плагин работать с пэйсхолдерами достаточно использовать псевдоэлемент::placeholder:</p> ::placeholder { color : orange ; } . input : : placeholder { color : blue ; } <p>После парсинга ваших стилей Autoprefixer создаст отдельный CSS файл, в котором пропишет все необходимые префиксы для всех указанных вами браузеров.</p> <h2>Что дальше</h2> <p>Как я уже писал выше, всё, что связано с применением стилей к плэйсхолдерам ещё не стандартизировано. Скоро это исправят. В спецификацию Selector Level 4 был добавлен псевдокласс:placeholder-shown , который, наконец-то, приведёт к стандарту всю ту безумную смесь из псевдоклассов и псевдоэлементов, которая существует сейчас. Следить за поддержкой можно на caniuse (сейчас не поддерживается ни в одном браузере).</p> <p>Применять стили с помощью:placeholder-shown будет гораздо проще:</p> .input :placeholder-shown { color : blue ; } <p>Placeholders, those frequently grayed out text elements inside an input, can be a pain to style. Fortunately we"ve sourced a short but effective CSS solution to style your input"s placeholder text any color and opacity you wish. Read on for the code.</p> <h2>Changing placeholder text color</h2> <p>Let"s start with a simple input and some placeholder text, for this example we"ll use the word "search" but you can use anything you want. The basic HTML is below:</p> <h5>HTML</h5> <body> <input placeholder="Search"> </body> <p>Input (and textarea) placeholder text defaults to a light gray color, however, we can change that with a few lines of CSS. Here we"ll color the input text red using an HTML color name, but any color method will suffice (HEX, RGB, HSL).</p> <h5>CSS</h5> ::-webkit-input-placeholder { /* Chrome */ color: red; } :-ms-input-placeholder { /* IE 10+ */ color: red; } ::-moz-placeholder { /* Firefox 19+ */ color: red; opacity: 1; } :-moz-placeholder { /* Firefox 4 - 18 */ color: red; opacity: 1; } <p>Note that it"s important to include the different vendor prefixes in order to support as many browsers as possible. Only Firefox"s input placeholder text defaults to a slight transparency so its unnecessary to set the opacity property on IE or Chrome.</p> <h2>Changing placeholder focus text color</h2> <p>Alright, we"ve successfully changed the color of the placeholder text to red, but it would be nice if something happened when a user clicks inside our input. Using the same vendor prefixed CSS properties, we can alter the opacity of the input placeholder text on focus.</p> <h5>CSS</h5> input { outline: none; padding: 12px; border-radius: 3px; border: 1px solid black; } ::-webkit-input-placeholder { /* Chrome */ color: red; transition: opacity 250ms ease-in-out; } :focus::-webkit-input-placeholder { opacity: 0.5; } :-ms-input-placeholder { /* IE 10+ */ color: red; transition: opacity 250ms ease-in-out; } :focus:-ms-input-placeholder { opacity: 0.5; } ::-moz-placeholder { /* Firefox 19+ */ color: red; opacity: 1; transition: opacity 250ms ease-in-out; } :focus::-moz-placeholder { opacity: 0.5; } :-moz-placeholder { /* Firefox 4 - 18 */ color: red; opacity: 1; transition: opacity 250ms ease-in-out; } :focus:-moz-placeholder { opacity: 0.5; } <p>In the example above we"ve thrown in a few basic styles on the input itself, and added a transition on the opacity to make the experience just a little nicer. Check out the demo and experiment with other CSS properties and transitions.</p> <p>Псевдоэлемент, с помощью которого задаётся стилевое оформление подсказывающего текста, созданного атрибутом placeholder . Допускается использовать свойства для изменения вида текста, например, задать шрифт и цвет.</p><h2>Синтаксис <i> </i></h2><p><i>Селектор </i>::placeholder { ... }</p><active.sync><h2>Обозначения</h2><table><tbody><tr><th> </th><th>Описание </th><th style="width: 130px">Пример </th> </tr><tr><td><тип> </td><td>Указывает тип значения. </td><td><размер> </td> </tr><tr><td>A && B </td><td>Значения должны выводиться в указанном порядке. </td><td><размер> && <цвет> </td> </tr><tr><td>A | B </td><td>Указывает, что надо выбрать только одно значение из предложенных (A или B). </td><td>normal | small-caps </td> </tr><tr><td>A || B </td><td>Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. </td><td>width || count </td> </tr><tr><td> </td><td>Группирует значения. </td><td>[ crop || cross ] </td> </tr><tr><td>* </td><td>Повторять ноль или больше раз. </td><td>[,<время>]* </td> </tr><tr><td>+ </td><td>Повторять один или больше раз. </td><td><число>+ </td> </tr><tr><td>? </td><td>Указанный тип, слово или группа не является обязательным. </td><td>inset? </td> </tr><tr><td>{A, B} </td><td>Повторять не менее A, но не более B раз. </td><td><радиус>{1,4} </td> </tr><tr><td># </td><td>Повторять один или больше раз через запятую. </td><td><время># </td> </tr></tbody></table><h2>Пример</h2><p><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>placeholder</title> <style> body { background: #053f38; } input { border: 1px solid #98baba; /* Параметры рамки */ background: transparent; /* Прозрачный фон */ padding: 1px 4px; /* Поля вокруг текста */ color: #fff; /* Цвет текста */ } input::-moz-placeholder { color: #ffd595; /* Цвет подсказывающего текста */ } input::-webkit-input-placeholder { color: #ffd595; } input:-ms-input-placeholder { color: #ffd595; } input::-ms-input-placeholder { color: #ffd595; } input::placeholder { color: #ffd595; } </style> </head> <body> <form action="handler.php"> <p><input type="search" placeholder="Поиск по сайту" name="q"> <input type="submit" value="Найти"></p> </form> </body> </html> </p><p>Результат примера показан на рис. 1.</p><p>Рис. 1. Использование::placeholder</p><h2>Примечание</h2><p>Internet Explorer использует псевдокласс :-ms-input-placeholder .</p><p>Microsoft Edge использует псевдоэлемент ::-ms-input-placeholder .</p><p>Chrome, до версии 57, Opera до версии 44, Safari до версии 10.1 и Android используют псевдоэлемент ::-webkit-input-placeholder .</p><p>Firefox с версии 4 и до 19 использует псевдокласс :-moz-placeholder .</p><p>Firefox до версии 51 использует псевдоэлемент ::-moz-placeholder .</p><h2>Браузеры <i> </i></h2><p><b-tabs type="is-boxed"><b-tab-item label="Настольные" icon="icon-desktop" icon-pack="icon"></b-tab-item></b-tabs></p><active.sync><h2>Браузеры</h2><p>В таблице браузеров применяются следующие обозначения.</p></active.sync></active.sync> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast?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>");</script> </div> </article> <div class="related_block"> <div class="title">Похожие публикации</div> <ul class="recent_ul"> <li> <div class="img_block"> <div class="overlay"></div> <img src="/uploads/b57980320e109ddfd73b9eab8c7292e2.jpg" style="width:230px; height:145px;" / loading=lazy></div> <a href="/android/obshcherossiiskaya-akciya-nadoel-kak-eto-bylo-nadoel-nesankcionirovannaya-akciya-otkrytoi-rossii-p.html">Общероссийская акция "Надоел": как это было</a></li> <li> <div class="img_block"> <div class="overlay"></div> <img src="/uploads/f76db1367de56e5b3f69e38c52b8d935.jpg" style="width:230px; height:145px;" / loading=lazy></div> <a href="/blog/razukrashennye-bukvy-i-simvoly-dlya-nikov-css-prikolnye-simvoly-takzhe-vy-mozhete.html">Разукрашенные буквы и символы для ников css</a></li> <li> <div class="img_block"> <div class="overlay"></div> <img src="/uploads/70f8d1d34fd716ffb0acb7af27340846.jpg" style="width:230px; height:145px;" / loading=lazy></div> <a href="/iron/otechestvo-my-ne-menyaem-andrei-makarov-my-ne-menyaem-pensionnuyu.html">Андрей Макаров: Мы не меняем пенсионную систему Отечество мы не меняем</a></li> </ul> </div> </div> <aside id="sidebar"> <div class="block"> <nav class="sidebar_menu"> <div class="menu-sidebar_menu-container"> <ul id="menu-sidebar_menu" class="menu"> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/android/">Android</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/ios/">Ios</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/windows/">Windows</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/blog/">Блог</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/gadgets/">Гаджеты</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/iron/">Железо</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/internet/">Интернет</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/computers/">Компьютеры</a></li> </ul> </div> </nav> </div> <div class="block recent_block"> <div class="title">Последние записи</div> <ul class="popular"> <li> <div class="img_block"> <div class="overlay"></div> <img width="240" height="145" src="/uploads/f67a01a19f930a175b801d2bcb0e8e23.jpg" class="attachment-popular_thumb size-popular_thumb wp-post-image" alt="Как зайти в загрузочное меню биос на ноутбуке Lenovo Как попасть в bios на ноутбуке lenovo" / loading=lazy> <span class="cat">Ios</span></div> <a href="/computers/kak-na-noutbuke-lenovo-voiti-v-bios-chto-nado-znat-i-chego-ne-nuzhno-delat-kak.html">Как зайти в загрузочное меню биос на ноутбуке Lenovo Как попасть в bios на ноутбуке lenovo</a></li> <li> <div class="img_block"> <div class="overlay"></div> <img width="240" height="145" src="/uploads/87fbe5548dc64e4411e1652e0dfdc157.jpg" class="attachment-popular_thumb size-popular_thumb wp-post-image" alt="Загрузка VirtualBox с внешнего usb диска" / loading=lazy> <span class="cat">Ios</span></div> <a href="/gadgets/virtualnaya-os-na-fleshke-zagruzka-virtualbox-s-vneshnego-usb-diska-chto-nam.html">Загрузка VirtualBox с внешнего usb диска</a></li> <li> <div class="img_block"> <div class="overlay"></div> <img width="240" height="145" src="/uploads/31c0425af77cc0958e1059ec4ddc0e4e.jpg" class="attachment-popular_thumb size-popular_thumb wp-post-image" alt="Как убрать зарезервированный системой диск?" / loading=lazy> <span class="cat">Ios</span></div> <a href="/iron/dlya-chego-nuzhen-disk-zarezervirovano-sistemoi-kak-ubrat-zarezervirovannyi.html">Как убрать зарезервированный системой диск?</a></li> </ul> </div> </aside> </div> </div> <div class="clear"></div> <footer id="footer"><div class="wrapper"> <div class="copy">© 2024 | Мир современных компьютеров и гаджетов</div> <nav class="header_menu"> <div class="menu-footer_menu-container"> </div> </nav> </div></footer> <div id="toTop"></div> <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script> <nav class="mobile_menu"> <div class="close_menu"></div> <div class="mob_menu"> <div class="menu-mobile_menu-container"> <ul id="menu-mobile_menu" class="menu"> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/android/">Android</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/ios/">Ios</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/windows/">Windows</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/blog/">Блог</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/gadgets/">Гаджеты</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/iron/">Железо</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/internet/">Интернет</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/computers/">Компьютеры</a></li> </ul> </div> </div> </nav> </body> </html>