Как легко сделать горизонтальное меню HTML CSS (За 5 минут) 

Объясняешь очень хорошо!!! Хотелось бы ещё уроков)

Очень хорошо объясняешь. Спасибо!!!

Боже, я только начинаю постигать языки разметки и хочу сказать то что ты был послан мне свыше. Ибо я столько времени потратил чтобы понять как делается header, ещё раз спасибо тебе большое. Надеюсь ты не забросишь это дело

Ты реально круто обьясняешь, и без воды, и всё понятно, продолжай в том же духе

Большее спасибо за видео,все круто!!

CSS-код из ролика для тех, кому лень писать :) nav { width:1280px; margin: 0 auto; } nav:before{ content:''; display:block; height:50px; width:100%; background:#000; position:absolute; left:0; z-index:-1; } ul{ margin:0; padding:0; list-style:none; height:50px; } ul li{ float:left; } ul li a{ color:#fff; display:block; height:50px; padding:0 30px; text-transform:uppercase; text-decoration:none; line-height:50px; } ul li a:hover{ background:#d34d43; }

Классный видос, жги еще! Полностью всю верстку сайта..

Спасибо огромное! Реально помог, от души

Спасибо огромное! Вы очень классно и понятно объясняете!

Держись брат! Не бросай свой канал! Удачи!

Спасибо большое, очень понятно)))

Огромное спасибо!!! Очень помог)

Только начал изучать Js html css (буквально 3 дня), уже сам верстаю сайты, но с этим navbar ничего не мог поделать, как я рад что увидел твоё видео

никогда не пишу комментарии но решила поделиться радостью. я тот ещё чайник и мучалась 2 дня чтобы понять как в блок меню вставить другой блок и благодаря этому видео мои мучения были успешно закончены.

Прям очень здорово! Лайк Подписка!)

ты отлично объясняешь!)

Очень помог братан, респект)

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

Спасибо! Вы очень помогли!

Мне помогло. Большое спасибо!

Благодарю)

Спасибо за видео, было полезно

Спасибо большое)

Спасибо)

flexbox: ну да ну да пошел я нахер

очень помогло, спасибо

Спасибо братан

А можно ведь вместо флота использовать флекс для меню? Или (я только слышал, но ещё не понимаю толком как работает) грид? Флекс ведь сразу сделает немного адаптивным всё это. Так ведь?!

Да, было быстро и интересно !

Спасибо большое, (я только начинаю изучать html и css) все доходчиво и понятно, - побольше надо таких роликов :)

Подпишусь, мало ли что то ещё надо будет, что б не потерять)

Спасибо большое.

Крутой урок

Этот background прекрасен

продолжай братан

Чеееееел , ты объяснил очевидные вещи , которые не мог вдуплить на купленном курсе

Спасибо!!!!

За страничку, для написания кода и мгновенного просмотра отдельное спасибо

Спасибо за урок

красавчик

Спасибо огромное

cпс, очень помог)

большое спасибо💗

Здраствуйте, я - Каролина 11 лет. И я уже пол года учусь в сфере программирования хоть и ничего не поняла. Это видео помогло мне в создании сайта, спасибо большое)

помогло,спасибо

Спс бро!

а можно ли nav поставить 100%?

А можно все это создать чисто на html код, без css?

а если больше пунктов меню, как отодвинуть первый пункт вправо блока?

Как сделать что бы кнобка навбара изменялась когда я про скролле например дошел до пункта 1 что бы только пункт 1 изменялся

Только начинаю писать сайты, однажды я стану хока... Сисадмином

спасибо

User agent stylesheet. Вроде это мешает и ничего не выходит, что делать

у меня не получается почему то. я написала вместо пунк1 главная и у меня вышла просто три слово расположенные горизонтально в виде ссылки

а как выровнить по средине?

я в этом деле конечно новичок, но не разумнее было бы не делать элементы меню через ul и li, а просто накидать тегов а? Тогда можно было б не через глючный float размещать, а через display: flex; justify-content: space-between;

Велике дякую відео дуже корисно

Good

Как иконки туда добавить?

А как сделать так, чтобы кнопки выравнивались по центру, а не влево?

А как сделать меню из стилизованных красивых дизайнерских кнопок? Ну которые ты сначала рисуешь, например, в фотошопе(ну или скачиваешь в интернете), пишешь на самой кнопке её название, например, "Контакты". И потом, как сделать меню в шапке сайта из таких кнопок, что бы была активна сама кнопка, а не слово-ссылка в ней?

Псевдокласс before не работает, в саблайн высвечивается белым, что делать?(

Плз помогите кто-нибудь. Я не могу найти нужный мне пример меню. Хочу чтобы меню 1.было вертикал. 2. например когда нажимаешь на один из пунктов остальные опускаются под него а под ним появляется менюшка с под-категориями. Заранее спасибо за ответ

Для чего нужна nav.before?

спс тебееееее

А почему li не сделать через display: inline-block

Знающие, скажите, пожалуйста, *почему не центрируется меню?* align-items: center ровняет по вертикали, как я понял, а нужно ещё по горизонтали. Как? css: * { box-sizing:border-box; margin:0; padding:0; } li, a { font-family: Arial, sans-serif; color: #cccccc; text-decoration: none; } header { display:flex; justify-content: space-betwen; align-items: center; padding: 30px 10%; height:50px; background-color: #000; } .menu { list-style: none; } .menu li { display:inline-block; padding: 20px 40px; }

как ето меню подвинуть в центр?

почему фон через before , а не напрямую задать?

Как сделать этот горизонтальный список меню по центру? И как вообще изменять его положение по горизонтали?

Простой способ, спасибо!

не сказать что слишком легкий способ но как говорится любой работающий пример ценен)

А как передвинуть ссылки в правую часть? Что то вообще не разберусь лол

Я замутил похожую штуку (основываясь, конечно): nav { width: 1280px; margin: 0 auto; padding: 20px;} nav:before { content: ''; display: block; width: 100%; height: 50px; left: 0; position: absolute; background: rgba(5,1,21,0.8); z-index: -1; } nav ul { list-style: none; height: 50px; } nav li { float: left; margin: 0 15px; background-color: rgba(29, 5, 18, 0.98); border-radius: 5px; opacity: 0.5; transition: 1s; font-weight: bold; } nav a { color: #FD9590; display: block; height: 50px; padding: 0 30px; line-height: 50px; text-decoration: none; text-transform: uppercase; } nav li:hover { transition: 0s; opacity: 1; }

зачем использовать float с его грехами когда уже есть flex?

А можно фоновую музыку в студию?

И в CSS font:normal, sans-serif. Для шрифта красивого

А у меня между верхней границей страницы и самой лентой образовалась пустота. Её как-то можно убрать?

Адаптивность на уровне

почему то не работает before

Поможет.

А как добавить иконку рядом с пунктом меню?

Хороший урок но не надо было черным заливать. Как только черный применился, все дальнейшие шаги видно до какого-то момента не было.

Осталось дописать, как оставить тот или иной пункт активными после нажатия, но это уже js. А на css придется извращаться..

ппц ты его еще в космос запусти,там надо две строчки кода написать,я фигею)))

Привет, а как это меню полностью поставить вверх?

Спасибо за то, что вы сделали для всех - люди смогут создавать свои сайты на вашем примере. Может вы что-то слышали об уже готовой сборке neoseo.com.ua/internet-magazin-seo-magazin-model? Поделитесь опытом?

А я не понял всё в точности повторил а на екране просто чёрные надписи :[

Эт, что мелодия из наруто на фоне.

Для тех кому лень переписывать: nav{ width: 960px; margin: 0 auto; } nav:before { content: :''; display: block; height: 50px; width: 100%; background: black; position: absolute; left: 0; z-index: -1; } ul{ margin: 0; padding: 0; list-style: none; } ul li{ float: left; } ul li a{ color: #fff; display: block; height: 50px; padding: 0 30px; text-transform: uppercase; text-decoration: none; line-height: 50px; } ul li a:hover { background: green; }

Блеать этот конченный Float мне снится уже! В чем может быть причина если после того как прописал float: left Меню Не стало по горизонтали! спасите(

фууухх спс бро

у меня контрольная будет, нужно свой сайт сделать, готовлюсь...

почему не работает?

Зачем так усложнять? Можно реализовать данную строку-менюшку более простым методом

Спасіба очень памог а те што пишот што легче так чи так Зачем? Хатітє пішитє так но зачем крітікавать?

Стадии изучения html 1.Гнев: понимаешь что ни один знакомый программист не поможет тебе сделать сайтик 2.Отрицание: тщетно пытаешься что-то сделать самостоятельно 3.Торг: подумываешь встать на сторону феминизма 4.Принятие: смотришь видео на канале Good Luck

Тебя как звать?

Так то интересно,но по моему на flexbox куда проще...

щас уже есть display:flex, grid, float вообще не нужен