Как сделать горизонтальное меню в html и css?

10 ответов на вопрос “Как сделать горизонтальное меню в html и css?”

  1. seerix Ответить


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

    В чем отличия

    Прежде всего я хотел бы сказать, что спецификация не является уж такой и новой – она начала свое становление еще в 2009 году. Собственно, с тех пор происходит постоянное развитие – в html5 появляются новые возможности, современные браузеры все больше и больше поддерживают эти самые возможности, так что уже скоро можно будет говорить о полной поддержке этой технология, хотя она и не является чем-то единым целым, это скорее набор новых возможностей, каждая из которых является самостоятельной.
    Ну хорошо, а чем же отличается создание главной навигации (меню), раз уж вы читаете статью на эту тему, то какие-то отличия точно должны быть. Ну а как раньше создавалось меню? Обычно для этого использовали маркированный список, который помещали в дополнительный контейнер для всей навигации – обычный div.
    Так вот, с появлением новых тегов теперь можно поступить более правильно – вместо тега div обернуть меню в nav – новый семантический элемент, который создан специально для того, чтобы собирать в него самые главные ссылки, группировать их вместе.
    В nav можно поместить как список, так и просто набор ссылок. Мне кажется, это даже более простое и правильное решение, хотя во многих шаблонах по-прежнему видно реализацию меню с помощью тегов ul, li, a.

  2. vanes32 Ответить


    Это в принципе обычные правила CSS для ссылочных элементов горизонтального навигационного меню. Может показаться странным, что везде используется свойство float: left.
    С помощью этого свойства можно «выдрать» элемент из общего потока отображения HTML-страницы и заставить его вести себя так, как нужно нам. В данном случае нам надо, чтобы ссылки, которые являются по умолчанию строчными (inline) элементами вели себя как блочные элементы (block) чтобы мы могли задать для них ширину и высоту, а также внутренние поля и внешние отступы. Свойства border-right и border-left позволяют имитировать эффектную границу – она как будто выгравирована на панели; это достигается за счет разницы цветов границ соседних элементов. Но тут возникает проблема – крайние элементы меню слева и справа будут иметь только одну границу:

    (обратите внимание на правую границу крайнего справа элемента меню)
    Для крайней правой границы это можно решить просто – сразу за ней будет идти блок с формой поиска, для него можно задать левую границу как для элемента меню и на этом дело казалось бы в шляпе, но ведь крайний левый элемент первый в списке, до него нет ни одного элемента, которому можно было бы задать правую границу border-right: 1px solid #333; но границу можно задать для левого края самого списка – помните, для селектора #navigation мы задавали правило border-left: 1px solid #333; — теперь вам должно стать понятно его предназначение. Решение, как я уже говорил, спорное, но ничего не мешает нам его применить, пока список и его верхний (в меню – левый) элемент не имеют внешних отступов и внутренних полей. При помощи псевдокласса CSS :hover создаем эффект визуального выделения пункта меню при наведении на него курсора:

  3. vondor Ответить

    Сайтостроение
    Статьи
    Верстка сайта
    Основы CSS
    Просторы всемирной сети стремительно растут, размещая огромное множество различных веб-сайтов, каждый из которых стремится привлечь внимание посетителей и заинтересовать их.
    Способы покорения людских сердец выбираются разные — от применения Flash анимации, использования баннеров и смелых дизайнерских решений до различных звуковых и визуальных эффектов.
    Однако не стоит забывать, что сайт — это в первую очередь источник информации, поэтому удобству представления контента на сайте веб-разработчик должен уделять особое внимание и именно поэтому навигация, понятная посетителю на интуитивном уровне, так важна.
    Меню является самой распространённой системой навигации на сайте, которую можно сравнить с оглавлением в книге. Меню должно быть заметно на любой странице ресурса, позволяя пользователю мгновенно перейти на интересующий раздел.
    На объёмных сайтах, содержащих более 50 страниц, невозможно разместить полное меню для доступа ко всем разделам.
    В таком случае следует использовать выпадающее меню на CSS, при клике на которое появляются дополнительные ссылки на подразделы.

    Разновидности меню в CSS

    Существует сразу несколько видов и типов CSS меню:
    Главное меню. Это список определённых ссылок на ключевые разделы веб-сайта.
    Дополнительное меню. Такое меню имеет иерархическую структуру и бывает трёх типов:
    Выпадающее меню. Раскрывается при наведении курсора мыши на пункт;
    Всплывающее меню сайта. Раскрывается при клике на определённом пункте;
    Статическое дополнительное меню для CSS. Древовидная структура, представленная в уже раскрытом виде.

    Как создать меню в CSS?

    Приведём пример создания простого горизонтального и вертикального меню на CSS с пояснениями.
    Код горизонтального меню прописывается следующим образом:

  4. VideoAnswer Ответить

  5. VideoAnswer Ответить

Добавить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *