Как сделать красивое меню для сайта


Создание меню с помощью CSS и HTML

Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню - раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью CSS и HTML.

Вертикальное меню

Первым шагом создания вертикального меню будет создание маркированного списка. Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором "navbar". Каждый элемент <li> нашего списка будет содержать по одной ссылке:


 <ul>
 <li><a href="#">Главная</a></li>
 <li><a href="#">Новости</a></li>
 <li><a href="#">Контакты</a></li>
 <li><a href="#">О нас</a></li>
 </ul>
 

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


 #navbar {
 margin: 0;
 padding: 0;
 list-style-type: none;
 width: 100px;
 }
 

Теперь пришло время стилизовать сами ссылки. Мы добавим к ним фоновый цвет, изменим параметры текста: цвет, размер и насыщенность шрифта, уберем подчеркивание, добавим небольшие отступы и переопределим отображение элемента <a> со строчного на блочный. Дополнительно были добавлены левая и нижняя рамки к пунктам списка.

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


 #navbar a {
 background-color: #949494;
 color: #fff;
 padding: 5px;
 text-decoration: none;
 font-weight: bold;
 border-left: 5px solid #33ADFF;
 display: block;
 }
 #navbar li {
 border-left: 10px solid #666;
 border-bottom: 1px solid #666;
 }
 

Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Название документа</title>
 <style>
 #navbar {
 margin: 0;
 padding: 0;
 list-style-type: none;
 width: 100px;
 }
 #navbar li {
 border-left: 10px solid #666;
 border-bottom: 1px solid #666;
 }
 #navbar a {
 background-color: #949494;
 color: #fff;
 padding: 5px;
 text-decoration: none;
 font-weight: bold;
 border-left: 5px solid #33ADFF;
 display: block;
 }
 </style>
 </head>
 
 <body>
 
 <ul>
 <li><a href="#">Главная</a></li>
 <li><a href="#">Новости</a></li>
 <li><a href="#">Контакты</a></li>
 <li><a href="#">О нас</a></li>
 </ul>
 
 </body>
 </html>
Попробовать »

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

Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:


 #navbar a:hover {
 background-color: #666;
 border-left: 5px solid #3333FF;
 }
 
Попробовать »

Горизонтальное меню

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

Горизонтальное меню можно создать путем стилизации обычного списка. Свойству display для элементов <li> нужно присвоить значение inline, чтобы пункты списка располагались друг за другом.

Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:


 <ul>
 <li><a href="#">Главная</a></li>
 <li><a href="#">Новости</a></li>
 <li><a href="#">Контакты</a></li>
 <li><a href="#">О нас</a></li>
 </ul>
 

Напишем для нашего списка пару правил, сбрасывающих стиль используемый для списков по умолчанию, и переопределим пункты списка с блочных на строчные:


 #navbar {
 margin: 0;
 padding: 0;
 list-style-type: none;
 }
 #navbar li { display: inline; }
 
Попробовать »

Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:


 #navbar {
 margin: 0;
 padding: 0;
 list-style-type: none;
 border: 2px solid #0066FF;
 border-radius: 20px 5px;
 width: 550px;
 text-align: center;
 background-color: #33ADFF;
 }
 #navbar a {
 color: #fff;
 padding: 5px 10px;
 text-decoration: none;
 font-weight: bold;
 display: inline-block;
 width: 100px;
 }
 #navbar a:hover {
 border-radius: 20px 5px;
 background-color: #0066FF;
 }
 
Попробовать »

Выпадающее меню

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

Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:


 <ul>
 <li><a href="#">Главная</a></li>
 <li><a href="#">Новости</a></li>
 <li><a href="#">Контакты</a></li>
 <li><a href="#">О нас</a></li>
 </ul>
 

Подпункты мы разместим в отдельном списке, вложив его в элемент <li>, который содержит родительскую ссылку относительно подпунктов. Теперь мы имеем четкую структуру нашей будущей панели навигации:


 <ul>
 <li><a href="#">Главная</a></li>
 <li><a href="#">Новости</a></li>
 <li><a href="#">Контакты</a>
 <ul>
 <li><a href="#">Адрес</a></li>
 <li><a href="#">Телефон</a></li>
 <li><a href="#">Email</a></li>
 </ul>
 </li>
 <li><a href="#">О нас</a></li>
 </ul>
 
Попробовать »

Теперь приступим к написанию CSS кода. Для начала необходимо скрыть список с подпунктами с помощью объявления display: none;, чтобы они не отображались на веб-странице все время. Для отображения подпунктов нам нужно чтобы при наведении на элемент <li> список снова был преобразован в блочный элемент:


 #navbar ul { display: none; }
 #navbar li:hover ul { display: block; }
 

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


 #navbar, #navbar ul {
 margin: 0;
 padding: 0;
 list-style-type: none;
 }
 #navbar li { float: left; }
 #navbar ul li { float: none; }
 

Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative;, а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.

#navbar ul {
 display: none;
 position: absolute;
 top: 100%;
 }
 #navbar li {
 float: left;
 position: relative;
 }
 #navbar { height: 30px; }
 
Попробовать »

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

Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:


 #navbar ul {
 display: none;
 background-color: #f90;
 position: absolute;
 top: 100%;
 }
 #navbar li:hover ul { display: block; }
 #navbar, #navbar ul {
 margin: 0;
 padding: 0;
 list-style-type: none;
 }
 #navbar {
 height: 30px;
 background-color: #666;
 padding-left: 25px;
 min-width: 470px;
 }
 #navbar li {
 float: left;
 position: relative;
 height: 100%;
 }
 #navbar li a {
 display: block;
 padding: 6px;
 width: 100px;
 color: #fff;
 text-decoration: none;
 text-align: center;
 }
 #navbar ul li { float: none; }
 #navbar li:hover { background-color: #f90; }
 #navbar ul li:hover { background-color: #666; }
 
Попробовать »

Создание веб-сайта: как создать красивый сайт

При создании веб-сайта эстетика - это еще не все, но она определенно имеет значение.

Посещали ли вы когда-нибудь веб-сайт, который был загроможден, имел несовместимые цвета или дизайн, затрудняющий чтение и навигацию? Вашим ответом, вероятно, было щелкнуть мышкой и пойти поискать другой веб-сайт вместо него.

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

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

Зачем создавать веб-сайт с помощью конструктора веб-сайтов?

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

Вот три преимущества использования конструктора веб-сайтов.

1. Вы можете использовать шаблоны веб-сайтов, разработанные профессиональными дизайнерами.

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

В большинстве случаев дизайнеры, создающие шаблоны для конструкторов веб-сайтов, будут знать лучшие практики веб-дизайна и включать их в создаваемые ими шаблоны.Даже если вы плохо разбираетесь в визуальных элементах или UX (пользовательском опыте) веб-сайта, вы можете быть уверены, что люди, создавшие шаблон, с которого вы начинаете, справятся.

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

2. Вам не нужно учиться программировать.

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

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

3. Вы можете сделать сайт своим.

Шаблоны - хорошая отправная точка, но вы не хотите, чтобы ваш веб-сайт выглядел так же, как все другие веб-сайты, созданные на основе выбранного вами шаблона. Не волнуйся. У вас все еще есть возможность добавить свой собственный стиль и убедиться, что конечные результаты выглядят красиво для вас, при этом оставаясь интуитивно понятными для ваших посетителей.

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

Как создать веб-сайт с помощью конструктора веб-сайтов

Если вам нравится идея использования конструктора веб-сайтов, то пора приступить к работе. Это шаги к созданию красивого веб-сайта с помощью конструктора веб-сайтов.

1. Выберите конструктор своего сайта.

Перво-наперво вам нужно выбрать, какой конструктор сайтов использовать. У вас есть несколько вариантов на выбор, и теперь важно сделать правильный выбор. Многие конструкторы веб-сайтов затрудняют сохранение вашего веб-сайта, если вы переходите на новый продукт в будущем.

При поиске лучшего конструктора веб-сайтов для вас подумайте:

Выясните, каковы ваши основные приоритеты в конструкторе веб-сайтов, и найдите тот, который предоставляет все необходимое.

2. Выберите понравившийся шаблон.

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

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

3. Выберите цветовую схему.

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

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

Если вы действительно не знаете, как выбирать цвета, которые хорошо смотрятся вместе, вы можете найти в Интернете ряд бесплатных ресурсов, которые помогут. Поищите вдохновение на таких сайтах, как Design Seeds и Color Hunt. Или воспользуйтесь инструментом Canva Color Wheel, который использует «теорию цвета», чтобы подобрать идеальное сочетание цветов.

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

4. Создайте руководство по стилю для своего сайта.

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

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

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

5. Определите цели своего веб-сайта.

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

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

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

6. Уточните свои сообщения.

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

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

Напишите свое уникальное ценностное предложение (UVP) - пару строк, описывающих, что может предложить ваш веб-сайт и чем он отличается от любого другого сайта. Вы можете разместить UVP прямо на главной странице вашего веб-сайта, и он также поможет вам создать копию, которую вы создадите для остальной части сайта.

7. Определитесь со страницами и организацией вашего сайта.

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

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

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

8. Приступите к работе над созданием своего сайта.

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

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

9. Запустите его кто-нибудь другой, чтобы получить второе мнение.

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

Слушайте их отзывы и вносите любые изменения, которые они рекомендуют, которые, как вы полагаете, сделают сайт лучше.

Раскройте свой прекрасный веб-сайт

После всей этой работы ваш веб-сайт готов для более широкой аудитории.Защитите хостинг веб-сайтов (если вы еще этого не сделали) и опубликуйте его в Интернете.

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

Если вы готовы подписаться на услугу хостинга и создать свой собственный веб-сайт, свяжитесь с HostGator сегодня.

Кристен Хикс - внештатный писатель из Остина, постоянный ученик с постоянным интересом к новым знаниям.Она использует это любопытство в сочетании с ее опытом работы в качестве внештатного владельца бизнеса, чтобы писать в блоге HostGator о предметах, ценных для владельцев малого бизнеса. Вы можете найти ее в Твиттере по адресу @atxcopywriter.

Связанные

.

Как создать сайт


Узнайте, как создать адаптивный веб-сайт, который будет работать на всех устройствах, ПК, ноутбук, планшет и телефон.


Создание веб-сайта с нуля


A «Эскизный план»

Перед созданием веб-сайта может быть целесообразно нарисовать черновик макета страницы:

Панель навигации

Боковое содержание

Какой-то текст какой-то текст ..

Основное содержание

Какой-то текст какой-то текст..

Какой-то текст какой-то текст ..

Какой-то текст какой-то текст ..

Нижний колонтитул


Первый шаг - базовая HTML-страница

HTML - это стандартный язык разметки для создания веб-сайтов, а CSS - это язык, описывающий стиль HTML-документа. Мы объединим HTML и CSS, чтобы создать простую веб-страницу.

Пример




Название страницы



кузов {
семейство шрифтов: Arial, Helvetica, sans-serif;
}

Мой веб-сайт


Веб-сайт, созданный мной.


Попробуй сам "

Объяснение примера