Как сделать такое меню?

Question

[Azers]

Ребят помогите застрял не могу сделать меню

вот такое

Comments

[Ярослав Иванов]

https://jsfiddle.net/space2pacman/3vasy3Lz/

[Frel]

Обычное меню, что тут сложного?

[Hyubert]

Что уже зделано? что не получаеться?

[Монти Пайтон]

Hyubert, не получается других бесплатно работать заставить, никто не хочет это сделать бесплатно на CSS и выкласть

[Azers]

Hyubert, не могу понять как выровнить текст и картинку и в input поместить иконку лупы.

[Hyubert]

Azers, padding для текста и картинки, псевдоелемент для иконки

[Azers]

Hyubert, Вот я не могу понять как текст влево подравнять и картинку по центу же поставить чтобы она было по позиционирование так же как и текст и в инпут не могу картинку вставить пробую before что то не работает

[Azers]

Hyubert, вот еще скрин

[Hyubert]

Azers, выложите код на https://jsfiddle.net/

[Azers]

Hyubert, https://jsfiddle.net/3352Ljyt/

[Hyubert]

Azers, написал в ответ

Answer 1

[Hyubert]

Вот пример как можно было зделать, посмотрите разберитесь, если что непонятно - спрашивайте.
ЗЫ. уже 2017 и можно использовать flexbox, можно отойти от float (пример на float так как и вы питались зделать на них)

Comments

[Azers]

спасибо вам за помощь но для меня там было почти что половина не понятна, я учусь в академии на фронт енд и там мы половину что вы написали не учили к сожалению.

[Azers]

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

[Hyubert]

Azers, о какой "академии" идет речь?

[Azers]

Hyubert, Компьютерная Академия ШАГ

[Hyubert]

Azers, для начала могу рекомендовать интерактивные курсы HTML академии (не реклама), вполне достаточно пройти бесплатные курсы, очень поднимет скил.
После посмотрите выдео на ютюбе, по верстке шаблона, в процесе на непонятных моментах ставте на паузу и в гугл.

Answer 2

[Монти Пайтон]

нашлись исходники PSD:
design-mania.ru/downloads/psd-files/menu-navigation
freepsdfiles.net/graphics/apple-style-navigation-menu