Css как сделать меню горизонтальным: Горизонтальное меню на CSS — Независимое театральное объединение "Зрительские симпатии"

Содержание

Горизонтальное меню без float / Хабр

GruZZ 21 января 2009 в 16:57

CSS *

~~Пост скорее для себя, чем для других.~~

Код и подробности под катом.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> * { padding:0; margin:0; border:0; } #content { margin:50px; padding:50px; background:#eee; text-align:center; list-style:none; white-space:nowrap; } #content LI { display:inline-block; margin:0 -2px; vertical-align:top; } #content LI A { display:inline-block; background:#f9f9f9; border:#ccc 1px solid; margin:0 2px 0 0; padding:5px 15px; text-decoration:none; color:#00f; vertical-align:bottom; } #content LI A:hover { color:#f00; background:#fff; } @-moz-document url-prefix() { #content LI {display:-moz-inline-grid;display:inline-block;} /*For FF2 only*/ #content LI {margin:0 -2px;} /*For FF*/ #content LI, x:-moz-any-link, x:default { margin:0 -2px;} /*For FF3*/ } </style>  <title>Title</title> </head> <body> <ul> <li><a href="#">Главная</a></li> <li><a href="#">О нас</a></li> <li><a href="#">О вас</a></li> <li><a href="#">О них</a></li> <li><a href="#">Ссылки</a></li> <li><a href="#">Форум</a></li> </ul> </body> </html> * This source code was highlighted with Source Code Highlighter.

Пояснения:

Иногда требуется сделать такое меню, которое и горизонтальное, но при этом находится по центру странички. Как обычно делается горизонтальное меню? А очень просто — при помощи

float:left; Но вот отцентрировать такое меню у вас вряд ли получится. (ну ладно, получится; но какой ценой? upd: habrahabr.ru/blogs/css/49756/#comment_1306559)

Многие начнут думать над проблемой и придут к выводу, что нам поможет такое замечательное CSS свойство как display:inline-block! И ведь правда — везде работает! В FF3, Opera 8-9, Safari 3 и даже в IE (если специально для него написать display:inline;)!

Кажется, что проблема решена! Просто и достаточно элегантно! Но… но тут мы посмотрели в FF2 и… всё. Приплыли. Не работает 🙁

Лезем на mozilla.org и ищем что-нибудь такое эдакое, чтобы разделить стили для FF2 и FF3. И ведь находим! Наш помошник — свойство display:-moz-inline-grid;

@-moz-document url-prefix() { #content LI {display:-moz-inline-grid;display:inline-block;} /*For FF2 only*/ #content LI {margin:0 -2px;} /*For FF*/ #content LI, x:-moz-any-link, x:default { margin:0 -2px;} /*For FF3*/}

И работает. Вроде бы. Кстати, способ можно пользовать и для картинок: gruzzilkin.110mb.com/nofloat

И еще. Валидацию такой документ не пройдет из-за

@-moz-document url-prefix.

UPD: По просьбе gryzzly выкладываю наиболее интересные варианты, предложенные в комментариях:

www.mauzon.com/?p=87 — горизонтальное выравнивание меню, основанного на плавающих блоках. Способ всем хорош, только используется лишний оберточный DIV
Как всегда, я навалил кучу лишнего кода. минимизируем
Несколько вариантов, так или иначе использующих display:inline-block:
www.ruzee.com/blog/2007/05/align-list-items-horizontally-with-css,
foohack.com/2007/11/cross-browser-support-for-inline-block-styling,
www.brunildo.org/test/ImgThumbIB.html.

Теги:

css
inline-block
вёрстка
nofloat

Хабы:

Всего голосов 91: ↑72 и ↓19 +53

Просмотры

20K

Комментарии 109

Николай Садовников @GruZZ

Пользователь

Комментарии Комментарии 109

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

Статья
000Z» data-article-date-source=»ms.date»>09/18/2014
Чтение занимает 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

Как создать горизонтальное меню CSS с выравниванием по центру в Dreamweaver?

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

Если вы не знакомы с Dreamweaver, см. нашу предыдущую публикацию «Ответы на ваши вопросы», в которой рассказывается о настройке сайта в Dreamweaver. После того, как вы настроите сайт, вы будете готовы приступить к этому руководству.

Приступаем к кодированию!

Создайте новую страницу в Dreamweaver

Выберите «Файл» > «Создать»
Выберите параметр по умолчанию (HTML) и нажмите «Создать».
Выберите «Файл» > «Сохранить как» и сохраните файл как menu.html.
- Дом
__
- около
__
- Careers
__
- Контакт с нами
. или просмотр в реальном времени. Обратите внимание, что каждый элемент в списке связан с тегом . Вы указываете место назначения для каждого элемента в теге . Например, когда вы нажимаете «Главная», браузер открывает страницу home.html.
Мы еще не создали страницы назначения. Так что переход по ссылкам сейчас никуда вас не приведет.
https://blog.adobe.com/media_e72c9422ea597e6f86793cfbbccb1ec9a1153ac3.gif
Удалить маркеры из списка
Вы не хотите маркеров в своем меню CSS, но не бойтесь. Мы будем использовать CSS, чтобы позаботиться об этом! После того, как вы закончите с кодом, щелкните представление «Дизайн». Маркеры в списке должны исчезнуть, оставив вам чистый список.
Сразу под «тегом» создайте теги стиля:
Вставьте этот фрагмент кода CSS между тегами стиля.
ul {
тип-стиля списка: нет;
поля: 0;
заполнение: 0;
}
list-style-type:none : удаляет маркеры из упорядоченного списка.
Установка полей и отступов на 0 переопределяет любые настройки браузера по умолчанию.
Укажите ширину для каждого элемента списка
Если мы не укажем ширину для элементов списка, они будут иметь ширину по умолчанию. Чтобы указать ширину, мы укажем стиль для «тега, связанного с каждым элементом в этом списке.
Ниже приведен код CSS для тега ul. Вставьте этот фрагмент кода:
a {
display: block;
ширина: 60 пикселей;
}
display:block : Это делает кликабельной всю область вокруг ссылки, а не только текст.
Указав ширину 60 пикселей, мы переопределяем любые настройки ширины браузера по умолчанию.
Вы не заметите каких-либо существенных изменений в представлении «Дизайн», за исключением рамки вокруг каждого элемента в списке.
Поскольку мы создаем горизонтальное меню, мы хотим расположить пункты меню рядом друг с другом. Для этого мы должны сначала удалить разрыв строки, связанный с каждым элементом. Хотя вы не видите разрыва строки в коде, каждый элемент блока связан с разрывом строки до и после элемента.
Для этого используйте:
li {
display: inline;
}
Хорошо, теперь разрывы строк исчезли. Вы ничего не увидите в представлении «Дизайн», но это нормально. По умолчанию каждый из элементов занимает всю ширину браузера. Когда мы перемещаем их влево, мы приказываем каждому из этих элементов двигаться влево и освобождать место для следующего элемента в списке, который перемещается вверх и занимает пустое место справа.
li {
дисплей: встроенный;
поплавок:левый;
}
Теперь вы должны выстроить пункты меню рядом друг с другом. Идеальный.
https://blog.adobe.com/media_28cbc0ad19479bf3a61e33d0f752644cf0171cc6.gif
Меню теперь на месте, но оно не имеет цвета, и вы не видите, что что-то происходит при перемещении по каждому из пунктов меню. Давайте исправим это!
Определение стиля для обычных и посещенных состояний
При работе в Интернете вы, вероятно, видели случаи, когда цвет элементов меню меняется после того, как вы щелкнули и посетили страницу, связанную со ссылкой на элемент меню. Это визуальный индикатор, сообщающий вам, что вы ранее посещали эту страницу хотя бы один раз.
Это хорошая идея для обычных ссылок, но не лучший вариант для меню. Мы не хотим, чтобы наше меню меняло цвет после посещения пользователем страницы. Итак, мы собираемся запретить это изменение.
«Тег или тег, связанный со ссылками, имеет четыре состояния:
a:link — обычная, непосещенная ссылка
a:visited — ссылка, которую посетил пользователь пользователь наводит на нее курсор
a:active – ссылка в момент нажатия
Удалите этот фрагмент кода:
a {
display: block;
ширина: 60 пикселей;
}
Теперь введите этот код между тегами стиля:
a:link, a:visited {
display: block;
ширина: 120 пикселей;
вес шрифта: полужирный;
цвет: #FFFFFF;
цвет фона: #98bf21;
выравнивание текста: по центру;
отступ: 4px;
украшение текста: нет;
преобразование текста: верхний регистр;
}
Теперь стиль для нормального и посещенного состояний меню определен. Посмотрите в своем представлении дизайна. Вы должны увидеть что-то вроде этого:
https://blog.adobe.com/media_6ad91ca791e879d935e42ecc1b13076885712106.gif
Определение стиля для наведения и активных состояний
Давайте будем проще. Мы не хотим, чтобы происходили две разные вещи, когда пользователь наводит указатель мыши на ссылку и когда он пытается щелкнуть ее. Нам нужен одинаковый стиль для обоих действий. Все, что мы сделаем, это изменим цвет фона для этих состояний.
Изменение цвета фона позволяет пользователю узнать элемент меню, на который нажимают.
a: hover, a: active {
background-color: #7A991A;
}
Вы должны видеть эффекты при наведении указателя мыши на каждый пункт меню. Однако, поскольку этих страниц не существует, при переходе по этим ссылкам на самом деле ничего не происходит. Вам нужно будет создать каждую из этих страниц и добавить на них некоторый контент, чтобы увидеть меню в действии.
Чтобы центрировать меню, мы свяжем идентификатор с тегом
- , а затем стилизуем идентификатор.
В теле кода ваш код должен выглядеть примерно так:
- Домашняя страница
- Новости
- Контакты
- О программе
Теперь, когда об ассоциации позаботились, давайте стилизуем навигационный идентификатор. Мы будем использовать практически тот же прием, который мы использовали для центрирования веб-страницы в браузере.
#nav{
ширина:750px;
поле:0 авто;
}
С помощью этого кода мы определили ширину контейнера, установили верхнее и нижнее поля на 0, а левое и правое поля на авто. Это очищает пространство слева и справа от поля, позволяя браузеру вычислить поле.
Не уверен, что все правильно понял? Взгляните на готовый исходный файл.
До следующего раза, удачного программирования!
Создание горизонтального меню списка CSS
Есть вопросы? Обсудите это руководство по HTML с другими на форумах.
На самом деле есть только два способа упорядочить ссылки внутри меню. Один из способов — вертикально, как описано в другой учебник. Другой путь по горизонтали:
[ вот живая версия этого, с которой вы можете играть]
В этом руководстве вы узнаете, как перейти от вертикали по умолчанию list в меню, содержимое которого расположено горизонтально. По пути, вы также узнаете, как сделать это меню красивым.
Начнем.
Определение HTML
Во-первых, нам нужно определить наше меню. Это делается используя ул и ли теги. я собираюсь бросить в nav также на удачу.
Откройте документ HTML5, в котором вы хотите создать это меню. in. Если у вас нет документа HTML5, просто создайте новый с следующая разметка в качестве отправной точки:

<голова>
<мета кодировка = "utf-8">
Мой Меню

<тело>

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

магазин

контакт
Если вы просмотрите то, что у вас уже есть, вы увидите то, что выглядит следующим образом:
[ простой. вертикальный. эпический фейл]
Причина проста. Ваше «горизонтальное» меню в основном составленный из неупорядоченного списка (ul) содержащий три элемента списка (li):
главная

магазин

контакт
По умолчанию список в HTML равен всегда вертикальный. Превратить вертикальный список в горизонтальный можно с помощью используя очень мало CSS, чтобы изменить его внешний вид. Давайте посмотрим на как это сделать дальше.
Есть
навигация тег в моем супе!
Возможно, вы заметили тег навигации в нашей разметке. Этот тег является одним из новых элементов, представленных HTML5, и его основная цель состоит в том, чтобы добавить больше семантического значения в ваш документ, объявив его содержимое как то, что в основном используется для навигационных целей.
Нам с тобой наверное применения не найдем, но поисковые системы и, возможно, программы чтения с экрана сочтут этот тег полезным. Для SEO и преимущества доступности, я настоятельно рекомендую вам завернуть ваши навигационные элементы вокруг навигации теги.
Чтобы убедиться, что тег навигации работает предсказуемо в старых браузерах (в первую очередь IE), обратите внимание на использование Скрипт html5shiv. Если вы этого не сделаете и вам небезразличны люди, использующие версии IE старше версии 9, плохие вещи будут бывает…. может быть.

Изменение CSS
Прямо сейчас в нашем меню особо не о чем писать. Это выглядит очень скучный. Хуже того, он даже не оправдал свою мечту стать горизонтальный. Давайте исправим все это в этом разделе, а затем перейдем к сделать его привлекательным.
О, как могучее падение
Прежде всего, давайте поместим «горизонтальное» в наше горизонтальное меню и научим наше самодовольное (возможно, образованное в гуманитарных науках) вертикальное меню — урок. Добавить регион

Горизонтальное меню без float / Хабр

Пояснения:

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

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

PortalSiteMapDataSource

PortalSiteMapProvider

См. также

Ссылка

Концепции

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

Как создать горизонтальное меню CSS с выравниванием по центру в Dreamweaver?

Создайте новую страницу в Dreamweaver

Удалить маркеры из списка

Укажите ширину для каждого элемента списка

Определение стиля для обычных и посещенных состояний

Определение стиля для наведения и активных состояний

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

Определение HTML

Есть

Изменение CSS

О, как могучее падение