Как сделать html меню для сайта


Как сделать html меню для сайта

Как сделать html меню для сайта

Как сделать html меню для сайта





/ /

Если вы интересуетесь разработкой сайтов, то в данной статье вы прочтете, как сделать меню для сайта. Также здесь вы узнаете этапы создания вертикального и горизонтального меню для интернет-ресурса. В данной статье раскрыта тема того, как сделать меню для сайта при помощи HTML и CSS. Помимо этого, здесь описаны этапы создания горизонтального и вертикального меню для любого сайта.

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

Создавая меню для сайта, CSS нужно привести в соответствие ряду основных требований. Во-первых, меню должно быть простым и удобным, компактным по размеру и понятным для пользователей. Наиболее компактным по размеру меню является выпадающее меню – оно способно существенно сэкономить место на странице. Но, вообще, выбор типа меню будет зависеть от общей концепции сайта и общего дизайна. Лучше создавать меню без использования JavaScript и библиотеки JQuery , чтобы меню было доступным и нормально отображалось у тех пользователей, у которых в настройке браузеров скрипты отключены.

Создание вертикального меню

  • Сначала создается маркированный список HTML с помощью тегов <ul> и <li>. Здесь указывается нужное количество пунктов будущего меню, идущих по порядку.
  • После, необходимо сделать каждый из пунктов списка HTML ссылками. Так, получится основа для вертикального меню. Для HTML сайта содержимое каждого из элементов помещается внутрь тега <a></a>, при этом таблицы стилей еще не подключаются. Таким образом, пункты меню станут ссылками на соответствующие разделы сайта. Выглядит документ так:
    <div id="block>
    <ul id="hnav">
    <li><a href=""> 1 пункт меню сайта </a><li>
    <li><a href=""> 2 пункт меню сайта </a><li>
    <li><a href=""> 3 пункт меню сайта </a><li>
    <li><a href=""> 4 пункт меню сайта </a><li>
    <li><a href=""> 5 пункт меню сайта </a><li>
    </ul>
    </div>
    Это усредненный базовый документ, показывающий меню вертикальное. Для сайта, над которым вы будете работать, можно добавить ряд дополнительных элементов.
  • Тег <a></a> имеет атрибут href, в нем необходимо указать адрес страницы, на которую будет вести данная ссылка.
  • Стоит запомнить, что вертикальное меню лучше поместить в блок <div></div>, т.к. в спецификациях HTML4 имеется условие, исходя из которого, внутрь элемента помещаются лишь блочные элементы и элементы <del></del> и <ins></ins>. У тега <div></div>, соответственно, имеется один атрибут - id, имеющий значение block. У <ul> корневого тега, также имеется атрибут – id, имеющий значение «hnav», и данный атрибут требуется для формирования горизонтального и вертикального CSS вашего меню.
  • Можно сделать это вертикальное меню еще и выпадающим. Для начала следует продумать структуру будущего меню. Здесь уже лучше воспользоваться для основы ненумерованным списком. В нем обычно и создаются элементы меню. И внутрь данных элементов добавляются дополнительные пункты выпадающего подменю. На этом же этапе задается желаемая ширина пунктов будущего меню. А также убираются лишние отступы и маркеры.
  • Далее, следует перейти к расположению пунктов и элементов списка. По умолчанию, обычно, они расположены вертикально. Поэтому необходимо задать значения - position, позиционирования пунктов. Лучше выбрать относительное позиционирование - relative. Делается это для того, чтобы впоследствии расположить пункты подменю точно относительно основных пунктов.
  • Таким образом, позиционирование получится абсолютным. При помощи атрибутов «top» и «left» указывается месторасположение вывода пунктов подменю. Позднее можно добавить обводящую границу к пунктам меню и подменю, шириной в 1 пиксель. Если не сдвигать блок пунктов подменю на величину ширины границы влево, то при появлении пунктов подменю станут видны обе границы сразу. Это будет смотреться некрасиво. Атрибуту подменю «display» присваивается значение «none» для того, чтобы пунктов подменю не было видно, пока на него не навели курсор.

Создание горизонтального меню

Это также образец и основа для создания более сложного меню. Горизонтальное меню для сайта создается достаточно несложным способом:

  • Горизонтальное меню нужно разметить следующим html кодом:
    <a href="">Главная</a>
    <a href="">Пункт 1</a>
    <a href="">Пункт 2</a>
    <a href="" id="текущая страница">Пункт 3</a>
    <a href="">Пункт 4</a>
    Т.е. создается ненумерованный простой список, где присваивается id одному из пунктов меню. Лучше присвоить его пункту текущей страницы, чтобы видеть разницу в отображении.
  • Теперь нужно поработать со стилями, с CSS. Главное, чтобы каждый из пунктов меню отображался горизонтально, а не вертикально. Для этого для атрибута «display» нужно присвоить значение - inline.
  • Потом нужно дополнить сам элемент «ul». Необходимо, чтобы визуально меню было горизонтальной линией на всю ширину страницы. Именно так и будут располагаться пункты меню, которым нужно задать расстояние до каждого края страницы. От этого зависит месторасположение меню на странице.
  • Далее, необходимо создать сами блоки, где будут расположены пункты меню, и задать расстояние внутри блоков. Для этого атрибуту « text-decoration» указывается значение – none, атрибуту «margin-left» задается значение - 3px, атрибуту «border» задается значение - 1px solid.
  • Затем необходимо указать значения для активных и неактивных пунктов меню. Для этого атрибуту «link» задается значение - {color:#4903;}, атрибуту «visited» - значение {color:#687;}, атрибуту «hover» - {color:#010; background:#6688FF; border-color:#237}
  • В последнюю очередь нужно указать внешний вид пункта на текущей странице. Для этого атрибуту «background» задается значение - #FFF, атрибуту «border-bottom» - значение 1px bold #FFF.

А если использовать изображения вместо однотонных фонов, то вы сможете получить невероятно разнообразные пункты меню с интересным дизайном. Подключите стили CSS к HTML, и ваше меню будет готово. Теперь вы знаете все о том, как сделать меню для сайта самостоятельно. Это позволит вам реализовать все свои дизайнерские идеи и сделать сайт по своему личному усмотрению. Кроме того, у вас появится возможность сэкономить на заказе разработки у профессиональных компаний, занимающихся веб-дизайном. Поскольку одним из основных элементов сайта является меню, то у вас уже половина вашего творения готова. Осталось наполнить это меню информацией. Желаем вам удачи и хороших идей!


Источник: http://elhow.ru/internet/veb-razrabotka/sozdanie-sajta/kak-sdelat-menju-dlja-sajta





Как сделать html меню для сайта фото


Как сделать html меню для сайта

Как сделать html меню для сайта

Как сделать html меню для сайта

Как сделать html меню для сайта

Как сделать html меню для сайта

Как сделать html меню для сайта

Как сделать html меню для сайта

Читать топ новости: