Как да направим хоризонтално HTML меню?

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

Меню: обичайно и удобно

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


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

Определено правилни сайтове и техните менюта

Фигурата показва уникално правилни сайтове. Техните менюта могат да се разглеждат като модели на дизайн, логика и функционалност. Въпреки това, мнението на лидерите не е толкова твърдо, понякога има изключения. Сайтовете могат да се разглеждат като пример:
  • международния обмен на Forex;
  • Световна здравна организация;
  • на финансовата система на Русия;
  • компания за нефт и газ.
  • Но размерът на парите или социалната значимост не е критерий за качеството на уеб разработката. Всяко меню е работата на конкретния разработчик и мнението на екипа от разработчици на популярната система за управление на сайта (CMS), използвана при разработването на уеб ресурса. Шаблоните на най-добрите CMS никога не водят реалния живот. Прилагането на интернет технологии винаги определя във всеки случай необходимостта от извършване на теоретична и практическа работа по създаването на комфортно меню.


    Класически многофункционален пример

    Както можете да видите на изображението под номер 1, тук има четири различни менюта. Начална страница: Първо, филм, след това HTML документ. Хоризонтално всичко, но всяко меню се изпълнява с различни съотношения на HTML тагове, натоварване върху използването на CSS и javascript. Горното меню (1.1) се отнася за посетителя (частно или юридическо лице, финансова институция или инвеститор). Долната (1.4) зависи от всички останали и тук не преобладават HTML и JavaScript AJAX, които динамично формират желаната опция за HTML тагове. Средните менюта съдържат функционалността на компанията, в зависимост от посетителя, мнението на собственика и неговите интереси.

    Опростена динамична навигация

    Пример от Google (на снимката по-долу 2) е класическата простота на менюто за превключване. В началото на търсенето е едно нещо, в процеса на търсене е съвсем различно. Няма хоризонтално падащо меню HTML, CSS има минимална роля. Тук е важноточката на превключване на опциите за крайната извадка и менюто е конфигурирано за тази задача.
    Конкурентът на Google, Yandex (фигура 3) изгражда своето меню веднага. Освен това, страницата за търсене веднага се изпълва с допълнителна функционалност и предлага на посетителя не само функция за търсене. Yandex предлага незабавно:
  • търсене;
  • пари;
  • поща и други.
  • Всички функции в чист HTML. Хоризонтални менюта за всяка функционалност. Характерна особеност на Google и Yandex са настройките, които се изпълняват автоматично, но могат да бъдат променяни от посетителя чрез хоризонтално ориентирани функции.

    Реална статична и обща практика

    Най-новият пример (под номер 4) - за разработчиците на платформата Office XML. Документи с формат "*. * X" са популярни, популярни и сайтът, който предлага стандартно описание, използва чист HTML. Хоризонталното меню съдържа връзки към основните раздели:
  • docx;
  • xlsx;
  • pptx.
  • Има много други по-малко популярни сайтове в интернет. Винаги можете да намерите уверено модерно желание за максимална простота и функционалност. Ерата, в която разработчикът и дизайнерът прекарват времето си в разкошни бутони, анимация и други ефекти, преминаха.
    Днес красивото хоризонтално меню: HTML, CSS и javascript - тази простота, комфорт и функционалност за посетителя.

    Меню: от ляво на дясно и отгоре надолу или

    Различните страни четат по различен начин. Възможността да се движите отляво надясно и отгоре надолу е книга, статия, лозунг или рекламна брошура, но не и сайт. Разумно е да се съсредоточите върху такава организация на диалога, ностава дума за уеб презентация на информация, която определя логиката на диалога с посетителя.
    Традиционен HTML документ: хоризонтално меню с падащи под-точки за всеки елемент. Не само списъкът с препратки (елементи), но и списъците с списъци могат да отпаднат. Когато сайтът предоставя десетки услуги (стоки), и във всяка позиция може да бъде повече от една дузина линии, става проблем както в менюто, така и в неговите под-елементи. Обикновено проблемът с голям брой елементи и подпозиции от менюто се решава чрез превъртане. Всяка област на приложение обаче включва систематизиране на информацията. Съмнително е, че има такъв проблем в уеб програмирането, който няма да позволи ограничение от три до четири до седем - девет точки. Тази сума се поставя в HTML страницата, хоризонталното меню е компактно и удобно. Ако комбинираме идеята за систематизиране на информацията и превъртане през йерархията на категориите, може да се реализира голяма идея за движение не от елементите на менюто, а от категориите създадена информационна система.
    Всъщност сайтът е систематично представяне на информация, а структурата на това представяне е категория, т.е. меню.

    Организация на менюто: списъци, таблици и девици

    HTML в хоризонталното меню не отделя никакъв специален синтаксис. Можете да използвате обикновени div (div, span), таблици (таблица, tr, td) и списъци (ul, li). Последното се счита за най-правилно, но често има конструкции, в които всичко е смесено: една точка от менюто може да бъде таблица, във всяка клетка има няколко девици и списък за описание на единиците.

    Синтаксисът на HTML /CSS при създаване на елемент от менюто, ако той се основава на няколко чудеса (т.е. изображения на дизайна), става труден. Не можете да използвате вектора на менюто или неговия елемент: няма връзка между съдържанието на менюто и логиката на вектора (разтягане, компресиране или друго пропорционално оразмеряване). Остава да се използва растер, а това е няколко HTML. Хоризонтално меню (основно), както и:
  • за смартфона - неговото;
  • уголемен - за голям екран;
  • контраст - когато мониторът вече е стар;
  • за хора с увредено зрение и други възможности.
  • Това обяснение е по същество, че не е толкова важно да се ориентирате в пространството на HTML конструкциите, използвайки CSS правилата, като израз на значението на елемента от менюто чрез функционалността на javascript. Идеята: съдържанието на менюто и неговите елементи определят как да се направи хоризонталното меню в HTML, а не твърдия дизайн на оптималната комбинация ul, li, div, table и т.н. Винаги важно съдържание, а не твърд дизайн. Смисълът винаги може да бъде делегиран от сървъра чрез AJAX браузъра, където JavaScript функцията ще я подреди в желания HTML етикет и ще добави към него CSS, което ще определи местоположението, размера и цвета на менюто (елемент от менюто).

    Виртуално хоризонтално меню (HTML, CSS, JS)

    Google е безспорен лидер в търсенето и не само. Идеята за динамична промяна на менюто дойде отдавна, но реализацията на Google - най-лесната в ясна интерпретация. Няма солиден CSS тук, javascript не е изразен, но търсенето чрез класическия "чат" се дължи не само на лаврите на лидера, но и на действителното изпълнение.
    Отидете в хоризонталното менюHTML тагове от един смисъл към съдържание, движени от резултатите от търсенето - е добро решение. Най-вероятно разработчиците на Google означават съвсем различни неща, но обикновеният посетител е свикнал с разбирането си за логиката на търсенето, концепцията за комфорт и управлението на търсачките. Навикът е бил обичаен и далеч от първото поколение търсещи информация го използва. Образованието на навиците на посетителите е трудоемък процес, но когато той е успял, те го използват и не предлагат коренно нови доктрини. Не е възможно да се нарушават правилата и да се формират умения.
    ​​Ако разработчикът на HTML /CSS /JS промени техниката за създаване на хоризонтално меню по логиката на смислено меню, надарен с елементи на реалността, неговият уебсайт може да получи друга аудитория от посетители и напълно различно класиране сред подобни.

    Свързани публикации