В html как создать меню: Горизонтальное меню для сайта

Leave a Comment / Html / By /

Содержание

Создание меню на CSS | Как создать сайт

Создание меню на CSS

Здравствуйте! В этом уроке рассмотрим как создать меню на CSS. Меню или панель навигации играет важную роль на сайте, так как обеспечиват переходы между страницами сайта или на внешние ресурсы.  Фактически панель навигации — это набор ссылок, часто в виде ненумерованного списка. Панели навигации бывают самыми различными: вертикальными и горизонтальными, одноуровневыми и многоуровневыми, но в любом случае в центре каждой навигации находится элемент <a>. Поэтому при создании панели навигации мы можем столкнуться с рядом трудностей, которые вытекают из ограничений элемента ссылки. А именно, элемент <a> является строчным, а это значит, что мы не можем указать для него ширину, высоту, отступы. По ширине ссылка автоматически занимает то место, которое ей необходимо.

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Панель навигации в HTML5</title>
        <style>
            ul.nav{
                margin-left: 0px;
                padding-left: 0px;
                list-style: none;
            }
            ul.nav a {
                display: block;
                width: 7em;
                padding:10px;
                background-color: #f4f4f4;
                border-top: 1px dashed #333;
                border-right: 1px dashed #333;
                border-left: 5px solid #333;
                text-decoration: none;
                color: #333;
            }
            ul.nav li:last-child a {
                border-bottom: 1px dashed #333;
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a href="#">Главная</a></li>
            <li><a href="#">Контакты</a></li>
            <li><a href="#">О сайте</a></li>
        </ul>
    </body>
</html>

Просмотреть  пример

После установки свойства display: block мы можем определить у блока ссылки ширину, отступы и т. д.

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

Для создания горизонтального меню есть два метода. Первый заключается в применении свойства float и создании из ссылок плавающих элементов, которые обтекают друг друга с слева. И второй способ состоит в создании строки ссылок с помощью установки свойства display: inline-block.

Использование float

Алгоритм создания панели навигации с помощью

float разделяется на два этапа. На первом этапе у элемента li, в который заключена ссылка, устанавливается float: left;. Это позволяет расположить все элементы списка в ряд при достаточной ширине, когда правый элемент списка обтекает левый элемент списка.

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Панель навигации в HTML5</title>
        <style>
            ul. nav{
                margin-left: 0px;
                padding-left: 0px;
                list-style: none;
            }
            .nav li {
                float: left;
            }
            ul.nav a {
                display: block;
                width: 5em;
                padding:10px;
                margin: 0 5px;
                background-color: #f4f4f4;
                border: 1px dashed #333;
                text-decoration: none;
                color: #333;
                text-align: center;
            }
            ul.nav a:hover{
                background-color: #333;
                color: #f4f4f4;
            }
        </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>

Просмотреть  пример

Меню с помощью inline и inline-block

Для создания горизонтальной панели навигации нам надо сделать каждый элемент li строчным, то есть установить для него display: inline. После этого для элемента ссылки, которая располагается в элементе li, мы можем установить display: inline-block:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Панель навигации в HTML5</title>
        <style>
            ul.nav{
                margin-left: 0px;
                padding-left: 0px;
                list-style: none;
            }
            .nav li {
                display: inline;
            }
            ul.nav a {
                display: inline-block;
                width: 5em;
                padding:10px;
                background-color: #f4f4f4;
                border: 1px dashed #333;
                text-decoration: none;
                color: #333;
                text-align: center;
            }
            ul.nav a:hover{
                background-color: #333;
                color: #f4f4f4;
            }
        </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>

Просмотреть  пример

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Поделиться

Твитнуть

Поделиться

Также читайте

Меню в WordPress. Работа с классом Walker.

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

Функционал меню появился в версии WordPress 3.0. До этого вывод навигации обычно осуществлялся при помощи функций wp_list_categories() и wp_list_pages(). Конечно, иногда бывает нужно вывести категории сайта в виде меню и ещё чтобы дочерние категории были в виде выпадающих списков, но гораздо удобнее, если каждый элемент меню можно добавить, изменить или удалить по отдельности в админке сайта.

Также в меню WordPress вы можете изменять порядок элементов банальным перетаскиванием.

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

Способ 1. Включение меню через add_theme_support()

Для активации функционала меню вы можете использовать функцию add_theme_support(). Всё просто и легко, вставляем этот код в functions.php текущей темы и да, после этого мы можем зайти в админку и начать создавать меню.

add_theme_support( 'menus' );

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

Регистрация меню WordPress (а точнее областей меню) – это самый частый способ, который вам встретится при работе с меню, его создании и выводе на сайте.

В двух словах, область меню — это такая условная область, которая предназначена для вывода меню (объяснил 😹). Как всё это происходит по порядку:

  1. Сначала мы регистрируем область темы. После этого у нас сразу появляется функционал меню Внешний вид > Меню. Допустим, мы создадим две области темы: «Шапка сайта» и «Левый сайдбар».
  2. Затем, при создании меню мы указываем область темы, в которой хотим отображать данное меню. Также можно указать несколько областей сразу.
  3. И завершающий шаг. В разных частях темы задаём области и выводим в них соответствующие меню.

Не знаю, насколько понятно я всё это объяснил в теории, но на практике определенно будет легко. Итак, для того, чтобы зарегистрировать область темы, нам понадобится функция register_nav_menus(). Давайте тогда создадим две области, о которых я писал выше: «Шапка сайта» и «Левый сайдбар».

Да, код — в functions.php.

register_nav_menus(
	array(
		'head_menu' => 'Шапка сайта', // id области => Название области
		'side_menu' => 'Левый сайдбар'
	)
);

Давайте теперь разберемся, как создавать и как управлять меню. В принципе в админке WordPress всё сделано интуитивно, но на всякий случай мы всё подробно рассмотрим.

Этот процесс подробно разобран на видео:

Понравилось видео? Тогда возможно вам понравится мой видеокурс по созданию интернет-магазина на WordPress + WooCommerce без единой строчки кода!

Вкратце о том, а чём я говорил на видео – переходим во Внешний вид > Меню, указываем в поле название нового меню и нажимаем кнопку Создать меню.

  • Для того, чтобы добавить один или несколько элементов в меню, просто отметьте их галочкой и нажмите кнопку Добавить в меню.
  • Если вы не видите нужной вам страницы в списке, перейдите на вкладку «Все» либо воспользуйтесь вкладкой «Поиск».
  • Для того, чтобы добавить в меню ссылку на главную страницу, в списке страниц перейдите на вкладку «Все», отметьте галочкой элемент «Главная» и добавьте его в меню.
  • По умолчанию в меню можно добавлять только страницы, рубрики и произвольные ссылки. Если вам нужно добавить в меню произвольный тип поста, элементы созданной вами таксономии или записи, перейдите по этой ссылке.
  • Вы можете изменять порядок элементов перетаскиванием.
  • Также, чуть перетащив элемент вправо, его можно сделать дочерним для вышестоящего элемента, то есть это позволит вам создать многоуровневое меню на сайте. Дочерние элементы можно будет реализовать в виде выпадающего списка на сайте.
  • Если отметить галочкой «Автоматически добавлять в это меню новые страницы верхнего уровня», то, после публикации новох страниц, они автоматически будут добавляться в конец этого меню (тогда такое меню лучше будет добавлять в сайдбар, так как в шапке может просто не хватить места).
  • Отметьте галочкой области темы, в которой вы хотите отобразить это меню.
  • Также вы можете включить дополнительные настройки для элементов меню: Цель ссылки, Атрибут title, Классы CSS, Отношение к ссылке (XFN), Описание, нажав на вкладку «Настройки экрана» в верхней правой части экрана и отметив соответствующие галочки.

В админке:

На сайте:

Тут мы используем стандартную тему WordPress Twenty Twenty One.

Поддержка таксономий и типов постов

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

Как добавить туда какой-то произвольный зарегистрированный тип записи или таксономию?

И у тех и у других принцип один и тот же — при регистрации таксономии (register_taxonomy()) или типа поста (register_post_type()) значение параметра функции show_in_nav_menus должно быть true.

register_taxonomy( 'mytaxonomy',
	array( 'post' ),
	array(
		...
		'show_in_nav_menus' => true,
		...
	)
);
$args = array(
	. ..
	'show_in_nav_menus' => true,
	...
);
 
register_post_type( 'product', $args );

Вывод меню на сайте

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

1. Используем для вывода ID / ярлык / название меню

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

В итоге имеем:

$args = array(
	'menu'	=> 381
);
wp_nav_menu( $args );

2. Использование зарегистрированных областей темы для вывода меню

На первый взгляд, этот пример может показаться сложнее, потому что сначала нам требуется зарегистрировать область темы (в этом посту мы уже зарегали две области — head_menu (Шапка сайта) и side_menu (Левый сайдбар), затем, при создании меню, нам надо присвоить его одной из этих областей (мы уже создали с вами меню и присвоили его области head_menu) и только после этого мы можем выводить область с содержащимся в ней меню на сайте.

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

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

wp_nav_menu( array( 
	'theme_location' => 'head_menu'
) );

Функция wp_nav_menu() имеет большое количество параметров, все они описаны в документации этой функции.

3. Вставляем меню в сайдбар (в виде виджета)

Существует ещё и третий способ вывода меню на сайте — в виде виджета. Для этого переходим во Внешний вид > Виджеты, находим виджет «Произвольное меню» и перетаскиваем его в сайдбар. Если по каким-то причинам у вас не получается это сделать, сначала прочитайте пост про сайдбары в WordPress.

Рассмотрение класса Walker безусловно заслуживает отдельного поста. Сейчас я покажу лишь простой пример, который позволит вам использовать этот класс при выводе меню, тем самым подстраивая его под свой сайт, меняя HTML-разметку, добавляя различные атрибуты элементам и PHP-условия.

Для начала нужно создать класс, у меня это True_Walker_Nav_Menu, код которого я вставил в functions.php текущей темы.

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

class True_Walker_Nav_Menu extends Walker_Nav_Menu {
	/*
	 * Позволяет перезаписать <ul>
	 */
	function start_lvl(&$output, $depth) {
	// для WordPress 5.3+
	// function start_lvl( &$output, $depth = 0, $args = NULL ) {
		/*
		 * $depth – уровень вложенности, например 2,3 и т д
		 */ 
		$output .= '<ul>';
	}
	/**
	 * @see Walker::start_el()
	 * @since 3. 0.0
	 *
	 * @param string $output
	 * @param object $item Объект элемента меню, подробнее ниже.
	 * @param int $depth Уровень вложенности элемента меню.
	 * @param object $args Параметры функции wp_nav_menu
	 */
	function start_el( &$output, $item, $depth, $args ) {
	// для WordPress 5.3+
	// function start_el( &$output, $item, $depth = 0, $args = NULL, $id = 0 ) {
		global $wp_query;           
		/*
		 * Некоторые из параметров объекта $item
		 * ID - ID самого элемента меню, а не объекта на который он ссылается
		 * menu_item_parent - ID родительского элемента меню
		 * classes - массив классов элемента меню
		 * post_date - дата добавления
		 * post_modified - дата последнего изменения
		 * post_author - ID пользователя, добавившего этот элемент меню
		 * title - заголовок элемента меню
		 * url - ссылка
		 * attr_title - HTML-атрибут title ссылки
		 * xfn - атрибут rel
		 * target - атрибут target
		 * current - равен 1, если является текущим элементом
		 * current_item_ancestor - равен 1, если текущим (открытым на сайте) является вложенный элемент данного
		 * current_item_parent - равен 1, если текущим (открытым на сайте) является родительский элемент данного
		 * menu_order - порядок в меню
		 * object_id - ID объекта меню
		 * type - тип объекта меню (таксономия, пост, произвольно)
		 * object - какая это таксономия / какой тип поста (page /category / post_tag и т д)
		 * type_label - название данного типа с локализацией (Рубрика, Страница)
		 * post_parent - ID родительского поста / категории
		 * post_title - заголовок, который был у поста, когда он был добавлен в меню
		 * post_name - ярлык, который был у поста при его добавлении в меню
		 */
		$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
 
		/*
		 * Генерируем строку с CSS-классами элемента меню
		 */
		$class_names = $value = '';
		$classes = empty( $item->classes ) ? array() : (array) $item->classes;
		$classes[] = 'menu-item-' .  $item->ID;
 
		// функция join превращает массив в строку
		$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
		$class_names = '';
 
		/*
		 * Генерируем ID элемента
		 */
		$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
		$id = strlen( $id ) ? '' : '';
 
		/*
		 * Генерируем элемент меню
		 */
		$output .= $indent . '<li' . $id . $value . $class_names .'>';
 
		// атрибуты элемента, title="", rel="", target="" и href=""
		$attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
		$attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
		$attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
		$attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
 
		// ссылка и околоссылочный текст
		$item_output = $args->before;
		$item_output . = '<a'. $attributes .'>';
		$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
		$item_output .= '</a>';
		$item_output .= $args->after;
 
 		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
	}
}

Если вам нужны ещё параметры объектов $item, смотрите документацию функции wp_get_nav_menu_items(), которая кстати является ещё одним нестандартным способом вывода меню в WordPress.

Окей, класс вставили, второй шаг — добавить параметр walker в функцию wp_nav_menu(). То есть, если у вас уже используется меню на сайте, не нужно менять его код на тот, который указан тут ниже, надо всего лишь добавить туда ещё один параметр.

$args = array(
	'theme_location' => 'head_menu',
	'walker'=> new True_Walker_Nav_Menu() // этот параметр нужно добавить
 
);
wp_nav_menu( $args );

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

Миша

Недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

Узнаем как изготовить горизонтальное меню на 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. Горизонтальное меню содержит ссылки на основные разделы:

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

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

Сегодня красивое горизонтальное меню: HTML и CSS или JavaScript — это простота, комфорт и функциональность для посетителя.

Меню: слева направо и сверху вниз или .

..

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

Традиционный документ HTML: меню горизонтальное с выпадающими подпунктами по каждому пункту. Выпадать может не только список ссылок (пунктов), но списки списков. Когда сайт предоставляет десятки услуг (товаров), и в каждой позиции может быть более десятка строк, становится проблемой как само меню, так и его подпункты.

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

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

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

Фактически сайт — это систематизированное представление информации, а структура этого представления — есть категории, то есть меню.

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

HTML под горизонтальное меню не отводит никакого специального синтаксиса. Можно использовать обычные дивы (div, span), таблицы (table, 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 сменит технику создания меню горизонтального на логику меню осмысленного, наделенного элементами реальности, возможно, его сайт получит иную аудиторию посетителей и совершенно иной рейтинг среди подобных.

Как в HTML сделать меню? Тег li, ul и ol

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

Следующий раздел довольно небольшой и состоит буквально из пары видео уроков. Но раздел важен и посвящен спискам в HTML. Что такое списки? Как ими пользоваться и т.д.

Как сделать HTML-меню для сайта?

Что касается этого видео, то сегодня мы познакомимся с тремя HTML-тегами. Это тег ul, тег ol и тег li. Мало того, что мы изучим еще три тега и пополним копилку наших знаний в области HTML, еще сегодня мы узнаем, как в HTML сделать меню? Вопрос довольно популярный и актуальный. В этом видео Вы сможете увидеть, насколько все просто.

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

HTML-тег li.

Тег <li> как раз существует для создания пунктов или разделов меню. <Li> является отдельным элементом списка, в котором и будет содержаться вся информация, которая должна быть выведена на странице. Также эти элементы могут быть активными. Я имею в виду, что любой такой элемент можно сделать ссылкой ведущей куда-либо. Неважно на страницу раздела или еще куда-то. Тем более что как сделать ссылку в HTML мы уже заем.

HTML-тег ul.

Тег <ul> не предназначен для вывода какой-либо информации на странице, для этого существует тег <li>. Однако этот элемент не менее важен в создании меню или попросту списка. Элемент <ul> создает некий контейнер, который определяет, с чем веб-браузер имеет дело. Кроме этого <ul> определяет, с каким списком мы столкнулись. Так как списки можно разделить на два вида: нумерованный список и маркированный.

Так вот. Тег <ul> создает маркированный список в HTML. Именно такие списки удобнее всего использовать для создания меню. Также такие списки могут называться неупорядоченными. Я думаю понятно, почему им даны такие определения. Неупорядоченный, потому что не имеет отметок порядка, например, цифровых значений. Но маркированный список более популярное название для этого элемента, так при создании такого списка слева от него появляются некие маркеры, которые визуально выделяют каждый пункт списка.

HTML-тег ol.

Тег <ol> также не предназначен для вывода какой-либо информации на странице. Этот элемент создает блочный элемент, как и <ul>. То есть некий контейнер, в который будут помещены отдельные пункты списка. Но отвечает он не только за это.

Указав тег <ol>, мы сообщаем веб-браузеру о том, что он имеет дело с нумерованным списком или по-другому упорядоченным. Эти списки полная противоположность неупорядоченных списков. Так как подобные списки имеют отметки порядка. Проще говоря, порядковые номера возле каждого отдельного элемента списка. Отсюда и такие определения.

Видео урок: Как в HTML сделать меню? Тег li, ul и ol — списки в HTML.

HTML-справочник и другие материалы можно и нужно скачать здесь!

В следующем видео мы продолжим изучение радела и поговорим о списках определений.

Как создать выпадающее меню при помощи CSS3

На этом уроке мы создадим выпадающее меню на чистом CSS3, которое вы можете найти в Impressionist UI от Владимира Кудинова.

Шаг 1 — HTML-разметка


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

<ul>

 <li><a href=»#»>My dashboard</a></li>
 <li><a href=»#»>Likes</a></li>
 <li><a href=»#»>Views</a>

 <ul>
 <li><a href=»#»>Documents</a></li>
 <li><a href=»#»>Messages</a></li>
 <li><a href=»#»>Sign Out</a></li>
 </ul>

 </li>
 <li><a href=»#»>Uploads</a></li>
 <li><a href=»#»>Videos</a></li>
 <li><a href=»#»>Documents</a></li>

</ul>

Шаг 2 — Макет меню


Мы начнем с удаления полей, отступов, границ и контуров всех элементов меню. Затем мы установим фиксированную ширину и высоту для меню, закругленные углы и CSS3-градиенты. Для выравнивания ссылок горизонтально, мы установим для списка float:left. Нам также необходимо установить относительное позиционирование (position: relative), это нам нужно для выравнивания подменю.

 .menu,
.menu ul,
.menu li,
.menu a {
 margin: 0;
 padding: 0;
 border: none;
 outline: none;
}

.menu {
 height: 40px;
 width: 505px;

 background: #4c4e5a;
 background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}

.menu li {
 position: relative;
 list-style: none;
 float: left;
 display: block;
 height: 40px;
}

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

 .menu ul { display: none; }

Шаг 3 — Ссылки меню


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

 .menu li a {
 display: block;
 padding: 0 14px;
 margin: 6px 0;
 line-height: 28px;
 text-decoration: none;

 border-left: 1px solid #393942;
 border-right: 1px solid #4f5058;

 font-family: Helvetica, Arial, sans-serif;
 font-weight: bold;
 font-size: 13px;

 color: #f3f3f3;
 text-shadow: 1px 1px 1px rgba(0,0,0,.6);

 -webkit-transition: color .2s ease-in-out;
 -moz-transition: color .2s ease-in-out;
 -o-transition: color . 2s ease-in-out;
 -ms-transition: color .2s ease-in-out;
 transition: color .2s ease-in-out;
}

.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }

.menu li:hover > a { color: #8fde62; }

Шаг 4 — Подменю


Прежде всего, давайте удалим эту строку кода, которую мы добавили на втором шаге.

 .menu ul { display: none; }

Теперь мы зададим стили для подменю. Подменю мы разместим в 40px от верхней границы и 0px от левой границы пункта меню и добавим закругленные углы снизу. Установим прозрачность равную 0, а при наведении мыши будем изменять её до 1.

 .menu ul {
 position: absolute;
 top: 40px;
 left: 0;

 opacity: 0;
 background: #1f2024;

 -webkit-border-radius: 0 0 5px 5px;
 -moz-border-radius: 0 0 5px 5px;
 border-radius: 0 0 5px 5px;

 -webkit-transition: opacity .25s ease .1s;
 -moz-transition: opacity .25s ease .1s;
 -o-transition: opacity .25s ease .1s;
 -ms-transition: opacity .25s ease .1s;
 transition: opacity .25s ease .1s;
}

.menu li:hover > ul { opacity: 1; }

.menu ul li {
 height: 0;
 overflow: hidden;
 padding: 0;

 -webkit-transition: height .25s ease .1s;
 -moz-transition: height .25s ease .1s;
 -o-transition: height .25s ease .1s;
 -ms-transition: height .25s ease .1s;
 transition: height .25s ease .1s;
}

.menu li:hover > ul li {
 height: 36px;
 overflow: visible;
 padding: 0;
}

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

 .menu ul li a {
 width: 100px;
 padding: 4px 0 4px 40px;
 margin: 0;

 border: none;
 border-bottom: 1px solid #353539;
}

.menu ul li:last-child a { border: none; }

В конце нам осталось только добавить иконки для каждой ссылки подменю. Для этого мы создадим специальный класс для каждой ссылки и добавим фоновое изображение.

 .menu a.documents { background: url(../img/docs.png) no-repeat 6px center; }
.menu a.messages { background: url(../img/bubble.png) no-repeat 6px center; }
.menu a.signout { background: url(../img/arrow.png) no-repeat 6px center; }

Демонстрация


Перевод статьи с designmodo.com

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Работа с меню и объектами навигации

  • Чтение занимает 5 мин

В этой статье

Дата последнего изменения: 4 апреля 2010 г.

Применимо к: SharePoint Server 2010

В этой статье
Горизонтальные и вертикальные меню
PortalSiteMapDataSource
PortalSiteMapProvider

Инструкции для горизонтальных и вертикальных меню для навигации объявляются в XML-коде для главной страницы. Для реализации навигации используются два класса: PortalSiteMapDataSource и PortalSiteMapProvider.

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

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

При первом создании структуры сайта с корневым сайтом или сайтом верхнего уровня, несколькими веб-сайтами, страницами и дополнительными сайтами, являющимися потомками сайта верхнего уровня, Microsoft SharePoint Server 2010 создает два меню: горизонтальное (сверху) и вертикальное (слева).

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

<SharePoint:AspMenu Runat="server"
  DataSourceID="GlobalNavDataSource"
  Orientation="Horizontal"
  StaticDisplayLevels="1"
  MaximumDynamicDisplayLevels="1" />

Вертикальное меню объявляется аналогичным образом, но при этом используются другие свойства. Они идентичны свойствам, доступным в элементе управления Menu ASP.NET.

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

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

Свойство

Описание

DataSourceID

Определяет элемент управления источника данных, который предоставляет иерархические данные для этого меню. В предыдущем примере кода DataSourceID указывает на элемент управления с идентификатором GlobalNavDataSource.

Orientation

Определяет, является ли меню горизонтальным или вертикальным. В предыдущем примере кода используется горизонтальное меню.

StaticDisplayLevels

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

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

MaximumDynamicDisplayLevels

Определяет количество отображаемых уровней в динамических (всплывающих) меню.

В этом примере задано значение 1, которое указывает, что элемент меню на первом уровне иерархии сайтов с дочерними сайтами или страницами отображает эти сайты или страницы в динамических меню.

PortalSiteMapDataSource

PortalSiteMapDataSource — источник данных, связанный с SharePoint Server 2010, который извлекает данные из объекта PortalSiteMapProvider и предоставляет доступ к данным в соответствии с интерфейсом иерархического источника данных ASP.NET. Объект PortalSiteMapDataSource определяет имя объекта PortalSiteMapProvider, который используется для извлечения данных с помощью свойства SiteMapProvider ASP.NET.

Если в разметке главной страницы указан атрибут DataSourceID=»GlobalNavDataSource», приложение возвращает объект PortalSiteMapDataSource.

<PublishingNavigation:PortalSiteMapDataSource
  Runat="server"
  SiteMapProvider="CombinedNavSiteMapProvider"
  ShowStartingNode="false"
  StartFromCurrentNode="true"
  StartingNodeOffset="0"
  TrimNonCurrentTypes="Heading"
  TreatStartingNodeAsCurrent="true" />

Таблица 2. Часто используемые свойства PortalSiteMapDataSource

Свойство

Описание

ShowStartingNode

Определяет, возвращает ли источник данных начальный узел.

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

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

StartFromCurrentNode

Определяет начало источника данных. Это свойство задает, какой раздел общей иерархии сайтов элемент управления источника данных возвращает меню.

Если значение этого свойства равно true, SharePoint Server 2010 указывает объекту PortalSiteMapDataSource применить соответствующие правила для определения начала источника данных.

StartingNodeOffset

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

По умолчанию используется значение 0, указывающее, что верхний уровень иерархии сайтов, доступный через объект SiteMapDataSource, является таким же, как и у начального узла.

Эффект применения этого свойства является переменным и неопределенным, он зависит от особенностей иерархии сайтов, его описание выходит за рамки данной статьи.

TrimNonCurrentTypes

Включает усечение узлов на основе контекста и типа.

В этом примере используется TrimNonCurrentTypes=»Heading», который указывает источнику данных удалить все узлы типа Heading, которые не располагаются непосредственно под текущим узлом.

Можно указать несколько значений этого свойства с помощью списка с разделителями-запятыми. Доступные значения определены в перечислении NodeTypes.

TrimNonAncestorTypes

Усекает все указанные типы, которые не размещены непосредственно под текущим сайтом или одним из его предков.

TrimNonAncestorDescendantTypes

Усекает все указанные типы, которые не размещены непосредственно под текущим сайтом, одним из его предков или потомков.

TreatStartingNodeAsCurrent

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

Если значение TreatStartingNodeAsCurrent равно true, начальный узел источника данных обрабатывается как контекст или узел усечения.

PortalSiteMapProvider

Объект PortalSiteMapProvider — это действительный источник данных иерархической навигации, который предоставляет данные объекту PortalSiteMapDataSource. PortalSiteMapProvider извлекает узлы из хранилища Microsoft SharePoint Foundation 2010SPNavigation. Объект SPNavigation используется для создания статических ссылок и группировки. После указания статических ссылок и групп приложение объединяет динамические элементы, которые представляют веб-сайты и страницы с помощью статических ссылок и групп. SharePoint Server 2010 также применяет фильтрацию по ролям безопасности, чтобы пользователи видели только те элементы навигации, для которых у них есть разрешение.

Объявите именованные поставщики в файле web.config приложения, чтобы сделать их доступными для всех пользователей. Объявления двух самых важных объектов PortalSiteMapProvider — CombinedNavSiteMapProvider и CurrentNavSiteMapProvider — показаны в следующем примере кода.

<add name="CombinedNavSiteMapProvider" description="MOSS 2007 provider for Combined navigation"
   Type="Microsoft.SharePoint.Publishing.Navigation.PortalSiteMapProvider"
   NavigationType="Combined" EncodeOutput="true">
<add name="CurrentNavSiteMapProvider" description="MOSS 2007 provider for Current navigation"
   Type="Microsoft.SharePoint.Publishing.Navigation.PortalSiteMapProvider"
   NavigationType="Current" EncodeOutput="true" />
Примечание

Имя первого поставщика, CombinedNavSiteMapProvider, совпадает со значением, указанным для свойства SiteMapProvider. Это означает, что будет создано горизонтальное меню.

В таблице 3 описываются часто используемые свойства PortalSiteMapProvider.

Таблица 3. Часто используемые свойства PortalSiteMapProvider

Свойство

Описание

NavigationType

Получает или задает тип навигации для этого поставщика навигации. Доступны следующие параметры: Combined, Current и Global. Они функционируют в соответствии со следующими свойствами: CombinedNavSiteMapProvider, CurrentSiteMapProvider и CurrentSiteNavSiteMapProviderNoEncode.

CombinedNavSiteMapProvider

Получает объект PortalSiteMapProvider, который присоединен по умолчанию к глобальному меню навигации.

CurrentNavSiteMapProvider

Получает объект PortalSiteMapProvider, который присоединен по умолчанию к текущему меню навигации или панели быстрого запуска.

CurrentNavSiteMapProviderNoEncode

Получает объект PortalSiteMapProvider, присоединенный по умолчанию к иерархической навигации.

Объявите это свойство практически так же, как и CurrentSiteNavSiteMapProvider, но исключите атрибут EncodeOutput=»true».

GlobalNavSiteMapProvider

Получает объект PortalSiteMapProvider, значение свойства NavigationType которого задано как Global.

EncodeOutput

Определяет или получает указания о том, следует ли выполнять HTML-кодирование свойства Title любого объекта PortalSiteMapNode, возвращаемого поставщиком.

Элемент управления меню ASP.NET не выполняет автоматическую HTML-кодировку свойства Title при отрисовке. Однако элемент управления SiteMapPath ASP.NET выполняет HTML-кодирование свойства Title.

DynamicChildLimit

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

RequireUniqueKeysForNodes

Определяет или получает указания о том, должен ли каждый из узлов, возвращаемых поставщиком, иметь уникальные значения свойств Key.

Чтобы выделение меню работало правильно для созданных ссылок и заголовков, задайте значение RequireUniqueKeysForNodes=»false». При этом не будут возникать проблемы при присоединении элемента управления меню к ASP.NET через источник данных, но для большинства других элементов управления отображением требуется объявить RequireUniqueKeysForNodes=»true».

IncludeSubSites

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

См. также

Ссылка

Microsoft.SharePoint.Publishing.Navigation

Microsoft.SharePoint.Navigation

Концепции

Настройка навигации

Настройка элементов управления и поставщиков навигации

Другие ресурсы

Modifying Navigation Settings Through the UI

Выпадающее меню на HTML / CSS без использования JavaScript

Очень часто необходимо сделать на сайте выпадающее при наведении меню. Большинство веб-девелоперов используют для этого JavaScript / Jquery. Это конечно хорошо, но такого роди задачи легко решаются с помощью HTML / CSS.

Вот простой пример HTML-кода меню:

<ul>
    <li><a href=#>Menu 1</a>
        <ul>
            <li><a href=#>Sudmenu 1</a></li>
            <li><a href=#>Sudmenu 1</a></li>
            <li><a href=#>Sudmenu 1</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 2</a>
        <ul>
            <li><a href=#>Sudmenu 2</a></li>
            <li><a href=#>Sudmenu 2</a></li>
            <li><a href=#>Sudmenu 2</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 3</a>
        <ul>
            <li><a href=#>Sudmenu 3</a></li>
            <li><a href=#>Sudmenu 3</a></li>
            <li><a href=#>Sudmenu 3</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 4</a>
        <ul>
            <li><a href=#>Sudmenu 4</a></li>
            <li><a href=#>Sudmenu 4</a></li>
            <li><a href=#>Sudmenu 4</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 5</a>
        <ul>
            <li><a href=#>Sudmenu 5</a></li>
            <li><a href=#>Sudmenu 5</a></li>
            <li><a href=#>Sudmenu 5</a></li>
        </ul>
    </li>
</ul>

Для построения меню был использован список с классом menu. Подменю сделаны списками с классом submenu.

Теперь давайте как-нибудь минимально оформим наше меню стилями:


body {
    font: 14px 'Verdana';
    margin: 0;
    padding: 0;
}
ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul:after {
    display: block;
    content: ' ';
    clear: both;
    float: none;
}
ul.menu > li {
    float: left;
    position: relative;
}
ul.menu > li > a {
    display: block;
    padding: 10px;
    color: white;
    background-color: red;
    text-decoration: none;
}
ul.menu > li > a:hover {
    background-color: black;
}
ul.submenu {
    display: none;
    position: absolute;
    width: 120px;
    top: 37px;
    left: 0;
    background-color: white;
    border: 1px solid red;
}
ul.submenu > li {
    display: block;
}
ul.submenu > li > a {
    display: block;
    padding: 10px;
    color: white;
    background-color: red;
    text-decoration: none;
}
ul.submenu > li > a:hover {
    text-decoration: underline;
}

Для класса submenu было установлено свойство ‘display: none’. Это позволило на спрятать наше выпадающее меню.

Теперь добавим в CSS такой код:


ul.menu > li:hover > ul.submenu {
    display: block;
}

Это позволит показывать подменю при наведении.

Вот и все. Просто и легко без JavaScript.

Создание базовых меню навигации · Документация WebPlatform

Сводка

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

Введение

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

элемент HTML5