Ul горизонтальное меню: Виды горизонтальных меню для сайта

Разное 

Содержание

Равные расстояния между пунктами горизонтального меню? — Хабр Q&A

Всем привет!
Есть меню на списках. Проблема в том, что не получается добиться одинаковых расстояний между пунктами меню. Например пункт «акции» справа вообще прижат к правому краю, и наоробот, у пункта первого слишком большой отступ. Можно как-то изменить, чтобы это автоматически более менее ровно отображалось? Чтобы часть ширины первого пункта (где она избыточна) перешла к тем, у которых отступов практически нет.

popov.ints.net/_kurilshik/perm/test.html

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<title>Горизонтальное меню</title>
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<style type="text/css">
#top_menu{width:1180px;margin:0 auto;}
#top_menu_inner, #top_menu_inner li, #top_menu_inner ul{margin: 0;padding: 0;}
#top_menu_inner{position: relative;background-color:#e52a02;display:table;width:100%;}
#top_menu_inner li{display:table-cell;text-align: center;font-weight:700;font-size:13px;font-family:"helveticaneuecyr-bold", Arial, San-seriff;}
#top_menu_inner a{display:block;color:#ffffff;text-decoration:none;text-align:center;padding:14px 0px;}
#top_menu_inner a:hover{background-color:#cc2400;}
#top_menu_inner ul{display:none;position:absolute;z-index:5;border:6px solid #d72600;}
#top_menu_inner li:hover ul{display:block;background-color:#d72600;}
#top_menu_inner ul li{display:block;text-align:left;background-color:#d72600;border-top:0px;}
#top_menu_inner ul li a{text-align:left;font-size:13px;padding:12px 34px;}
#top_menu_inner li:hover a{background-color:#cc2400;}
#top_menu_inner li:hover ul li a{background-color:#d72600;}
#top_menu_inner li:hover ul li:hover a{background-color:#ffffff;color:#d72600;}
</style>
</head>
<body>
<div>
	<ul>
        <li>
        	<a href="#">ИНТЕРНЕТ ДЛЯ ДОМА</a>
    		<!--Modal parent menu may be disabled in the admin panel-->
            <ul>
            	<li><a href="#">Тарифы на подключение</a></li>
            	<li><a href="#">Наши технологии</a></li>
			</ul>                
			<!--//end parent menu-->
        </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>
    <div></div>
</div>
</body>
</html>

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

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

Пишем HTML-код:

<ul> <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>

<ul>

    <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>

Теперь CSS:

ul {overflow: hidden; zoom: 1;} li {list-style: none; float: left; border-left: 1px solid #666; padding: 0 20px; margin: 0 1px 0 -1px;}

ul {overflow: hidden; zoom: 1;}

li {list-style: none; float: left; border-left: 1px solid #666; padding: 0 20px; margin: 0 1px 0 -1px;}

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

Код кроссбраузерный: IE6+, Opera 9+, Firefox 2+, Chrome, Safari

Смотрим ДЕМО

Как оформить меню для сайта в css: вертикальное, горизонтальное, адаптивное

От автора: приветствую вас на нашем блоге, дорогие читатели. Сегодня я предлагаю вам сделать в html меню для сайта. Css нам тоже в этом деле поможет – с его помощью мы оформим нашу навигацию.

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

Первым делом давайте попробуем сделать вертикальную навигацию, так как сегодня она очень распространена на многих сайтах. В основном ее делают с помощью списка, но в html5 появился специальный тег для важных ссылок на странице – nav. В него мы и обернем наш список. Итак, разметка:

<nav class = «main-menu»> <ul> <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> </nav>

<nav class = «main-menu»>

<ul>

<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>

</nav>

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Приступаем к оформлению

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

.main-menu ul{ list-style: none; margin: 0; padding: 0; } .main-menu li a{ text-decoration: none; color: black; display: block; padding: 25px; }

.main-menu ul{

list-style: none;

margin: 0;

padding: 0;

}

.main-menu li a{

text-decoration: none;

color: black;

display: block;

padding: 25px;

}

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

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

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

.main-menu li a{ text-decoration: none; color: black; display: block; padding: 10px 25px; background: #75CB62; border: 1px solid brown; width: 70px; }

.main-menu li a{

text-decoration: none;

color: black;

display: block;

padding: 10px 25px;

background: #75CB62;

border: 1px solid brown;

width: 70px;

}

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

По желанию можно добавить внутрь какие-нибудь иконки, изменить сам шрифт, также можно добавить изменение цвета фона при наведении на пункты.

.main-menu li a:hover{ background: #53C653 }

.main-menu li a:hover{

background: #53C653

}

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

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

Собственно, из уже получившегося меню можно легко сделать горизонтальное. Для этого всего лишь нужно записать:

.main-menu ul li{ display: inline-block; }

.main-menu ul li{

display: inline-block;

}

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

Он равен четырем пикселям, поэтому если вы хотите от него избавиться, то нужно задать отрицательный margin:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Можно поступить и по-другому: не использовать свойство display, а отправить все блоки влево с помощью float: left, тогда никаких отступов между пунктами и не будет.

Как сделать выпадающее меню для сайта

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

.main-menu ul > li{ display: inline-block; margin-right: -4px; }

.main-menu ul > li{

display: inline-block;

margin-right: -4px;

}

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

<nav class = «main-menu»> <ul> <li><a class = «dropdown» href = «#»>Пункт 1</a> <ul class = «sub-menu»> <li><a href = «#»>Подпункт 1</a></li> <li><a href = «#»>Подпункт 2</a></li> <li><a href = «#»>Подпункт 3</a></li> </ul> </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> </nav>

<nav class = «main-menu»>

<ul>

<li><a class = «dropdown» href = «#»>Пункт 1</a>

<ul class = «sub-menu»>

<li><a href = «#»>Подпункт 1</a></li>

<li><a href = «#»>Подпункт 2</a></li>

<li><a href = «#»>Подпункт 3</a></li>

</ul>

</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>

</nav>

Как видите, мы добавили вложенный список в первый пункт и добавили к нему класс. Добавим такие стили, чтобы окончательно оформить наши меню.

.main-menu ul > li{ display: inline-block; position: relative; margin-right: -4px; } .sub-menu{ margin: 0; padding: 0; position: absolute; }

.main-menu ul > li{

display: inline-block;

position: relative;

margin-right: -4px;

}

.sub-menu{

margin: 0;

padding: 0;

position: absolute;

}

Мы задали абсолютное позиционирование нашей вложенной навигации, чтобы она выпала из потока. Также заметьте, что первой ссылке задан класс dropdown. Это для того, чтобы задать картинку-фон, которая показывала бы, что меню выпадающее.

Вот такую картинку мы поставим в фон ссылке.

.main-menu .dropdown{ background:#75CB62 url(arrow.png) no-repeat 80% 50%; }

. main-menu .dropdown{

background:#75CB62 url(arrow.png) no-repeat 80% 50%;

}

Почти готово! Пока что наше подменю видно на странице, нужно его скрыть с помощью display: none. Осталось прописать вот такой вот не самый понятный селектор:

.main-menu .dropdown:hover ~ .sub-menu{ display: block; }

.main-menu .dropdown:hover ~ .sub-menu{

display: block;

}

Тут мы сначала указываем, что стили будут применены, когда мы наведем на элемент с классом dropdown (а это наш первый пункт), но применяться они не к самой ссылке, а к нашему подменю. Это возможно благодаря тому, что мы поставили знак ~ и дописали после него нужный селектор.

По сути, этот селектор говорит браузеру следующее: при наведении на dropdown сделай видимым элемент sub-menu, который находиться в разметке где-то дальше.

Если вдруг нам какой-то другой пункт тоже нужно будет сделать выпадающим, то просто допишем для него класс dropdown, создадим внутри него свой список . sub-menu и все будет работать.

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

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

На этом я на сегодня с вами прощаюсь. Желаю вам удачного изучения веб-технологий.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

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

ul.contact li {display: inline; },} ul # horizontal-list li { дисплей: встроенный; }, ul # horizontal-list li { дисплей: встроенный }, ul # меню {выравнивание текста: центр; список-стиль-тип: нет;} ul # menu li {display: inline;}

Если мы заключим меню в div «table», мы сможем решить эту проблему. Если вы знакомы со Стю Николлсом из CSSPlay, он все время использует его в своих потрясающих горизонтальных меню. Проверьте HTML:

загрузить больше v

Чтобы выровнять текст и встроенные элементы уровня в элементе уровня блока, используйте text-align: center ;.Итак, все вместе что-то вроде …, ul as inline-table устраняет проблему с. Я использовал родительский div для выравнивания текста по центру. таким образом, он хорошо выглядит даже на других языках (перевод, разная ширина). Вообще говоря, способ центрировать элемент уровня черного (например,

    ) использует margin: auto; свойство. , мне нужно по центру выровнять горизонтальное меню. Я пробовал различные решения, включая сочетание inline-block / block / center-align и т. Д., Но не добился успеха.

     #buttons {
   float: right;
   положение: относительное;
   осталось: -50%;
   текст - выравнивание: по левому краю;
}
#buttons ul {
   список - стиль: нет;
   положение: относительное;
   осталось: 50%;
}

#buttons li {
   float: left; position: relative; поплавок: слева; положение: относительное;
}

#buttons a {
   текст - оформление: нет;
   поле: 10 пикселей;
   фон: красный;
   плыть налево;
   граница: 2 пикселя, начальная синяя;
   цвет: #fff;
   отступ: 2 пикселя 5 пикселя;
   текст - выравнивание: по центру;
   белый - пробел: nowrap;
}
#buttons a: hover {
   граница: 2 пикселя вставка синяя; цвет: красный; фон: # f2f2f2;
}
#содержание {
   переполнение: скрыто
}

    загрузить больше v

    Довольно стандартный, неупорядоченный список пунктов меню. CSS — вот где это. Я выделил биты, которые выполняют большую часть работы: Центрировать элементы уровня блока легко, просто определите ширину и установите margin: 0 auto ;, но что, если вы не знаете эту фиксированную ширину? Вы можете использовать text-align: center; но это не сработает и для блочных элементов со 100% шириной … работать над элементами текстового уровня., меня можно нанять, чтобы проконсультировать, посоветовать и разработать с увлеченными командами разработчиков продукта по всему миру., Вы могли бы, если хотите, применить встроенный блок к

  • .тем не мение IE6-7 позволит встроенному блоку работать только с элементами, которые по своей сути встроенные элементы. дисплей: встроенный блок; не будет работать с элементами блочного уровня.

    загрузить еще v

    Из http: // pmob. co.uk/pob/centred-float.htm:

     #buttons {
   float: right;
   положение: относительное;
   осталось: -50%;
   текст - выравнивание: по левому краю;
}
#buttons ul {
   список - стиль: нет;
   положение: относительное;
   осталось: 50%;
}

#buttons li {
   float: left; position: relative; поплавок: слева; положение: относительное;
}

#buttons a {
   текст - оформление: нет;
   поле: 10 пикселей;
   фон: красный;
   плыть налево;
   граница: 2 пикселя, начальная синяя;
   цвет: #fff;
   отступ: 2 пикселя 5 пикселя;
   текст - выравнивание: по центру;
   белый - пробел: nowrap;
}
#buttons a: hover {
   граница: 2 пикселя вставка синяя; цвет: красный; фон: # f2f2f2;
}
#содержание {
   переполнение: скрыто
}

    загрузить больше v

    Метод № 3 в основном использует text-align: center; для центрирования навигатора. Если ваши элементы меню (li / a) имеют переменную ширину, и вам НЕ нужна среда блока отображения для li / a, то это самый простой способ центрировать навигацию. Основные фрагменты кода, используемые для центрирования навигации, выделены жирным шрифтом. Метод №1 в основном использует margin: auto; для центрирования навигатора. Если ваши пункты меню (li / a) имеют фиксированную ширину, то этот метод, вероятно, является самым простым способом центрировать вашу навигацию. Основные фрагменты кода, используемые для центрирования навигации, выделены жирным шрифтом. Метод № 6 в основном использует display: table; для центрирования навигатора.Если ваши элементы меню (li / a) имеют переменную ширину, и вам НЕОБХОДИМО окружение блока отображения для li / a, то это еще один и последний способ центрировать вашу навигацию. И все же, опять же, IE6 / 7 — единственные, кому нужна небольшая помощь (как показано ниже). Метод № 5 в основном использует position: relative; для центрирования навигатора. Если ваши пункты меню (li / a) имеют переменную ширину, и вам НЕОБХОДИМО окружение блока отображения для li / a, и / или вы хотите центрировать «плавающий элемент без ширины», то это еще один простой способ центрировать ваш навигацияОпять же, IE6 / 7 — единственные, кому нужна небольшая помощь (как показано ниже).

    CSS 

     #nav {
   ширина: 750 пикселей;
   маржа: 0 авто;
   список - стиль: нет;
}
#nav li {
   плыть налево;
}
#nav a {
   дисплей: блок;
   текст - выравнивание: по центру;
   ширина: 150 пикселей;
   текст - оформление: нет;
}

    загрузить больше v

    Разочарованы попытки использовать CSS для выравнивания центра, например DIV, изображений и текста? Теперь у вас есть горизонтально центрированное меню. Применение выравнивания текста к родительскому элементу изображения можно использовать вправо, влево или выровняйте изображение по центру., До сих пор мы научились центрировать элементы по горизонтали или вертикали. Пришло время объединить и то, и другое.

    Вы можете применить правило text-align: center к элементу оболочки навигационной панели. Внутренний «родительский» элемент, UL в этом примере, должен быть установлен на display: inline-block.

     .navbar {
   текст - выравнивание: по центру;
   ширина: 100%;
} .navbar ul {
   display: inline - блочный;
} . navbar li {
   плыть налево;
} .navbar li + li {
   поле - слева: 20 пикселей;
}

    загрузить больше v

    Предотвратить нарушение горизонтального меню — HTML и CSS — Форумы SitePoint

    Есть ли у кого-нибудь идеи, как исправить приведенный ниже код? Это горизонтальное меню с неупорядоченным списком.Я хочу, чтобы всякий раз, когда я изменяю размер браузера до минимально возможного размера, меню все равно будет выровнено по горизонтали и никогда не будет переходить к следующей строке или иметь разрыв строки.

    CSS:

      / * Центральный столбец - меню вкладок * /
#tablist {цвет фона: #EEEEEE; плыть налево; ширина: 100%; размер шрифта: 10 пикселей; выравнивание текста: центр; }
#tablist ul {цвет фона: #EEEEEE; маржа: 0px; отступ: 0 пикселей; стиль списка: нет; }
#tablist li {display: inline; маржа: 0px; отступ: 0 пикселей; }
#tablist a {color: #FFFFFF; font-weight: жирный; плыть налево; фон: url ("images_ef / misc / images_ef / centertab_left. gif ") верхний левый no-repeat; margin: 0px; padding: 0px 0px 0px 8px; text-decoration: none;}
#tablist диапазон {цвет: #FFFFFF; font-weight: жирный; плыть налево; дисплей: блок; фон: url ("images_ef / misc / images_ef / centertab_right.gif") вверху справа без повтора; отступ: 6px 9px 5px 0px; }
/ * Прокомментированный хак с обратной косой чертой скрывает правило из IE5-Mac \\ * /
#tablist диапазон {float: none; }
/ * Завершить взлом IE5-Mac * /
#tablist a: hover span {color: # 004080; }
#tablist a: hover {background-position: 0% -35px; }
#tablist a: hover span {background-position: 100% -35px; }
#tablist a.текущий {color: # 004080; background-position: 0% -35px; }
#tablist a.current span {color: # 004080; background-position: 100% -35px; }
.tabcontent {display: none; }

    HTML:

    Я попытался заключить эти HTML в TD с атрибутом NOWRAP.В IE все в порядке, меню не ломается, когда я изменяю размер браузера, но все еще проблематично в Firefox. Я также пытался приложить его к фиксированной таблице, но не получил хорошего результата.

    Пожалуйста, посоветуйте. Спасибо.

    (перепечатано) Используйте ul для горизонтальной навигации 

     / * ul li отображается горизонтально * /

/ * Стиль ul во всех div, чей класс - menu * /
div.menu ul
{
    стиль списка: нет; / * Удаляем символ перед ul * /
    маржа: 0px; / * Расстояние до внешних элементов равно 0 * /
    отступ: 0 пикселей; / * Расстояние до внутреннего элемента равно 0 * /
    ширина: авто; / * Ширина настраивается в соответствии с содержимым элемента * /
}
/ * Стиль li в ul во всех div, чей класс - menu * /
div. меню ul li
{
    плыть налево; / * Дрейфуем влево, превращаясь из вертикали в горизонтальную * /
}
/ * Стиль a в ul во всех div, чьим классом является меню (включая стили, которые еще не были нажаты и не нажаты) * /
div.menu ul li a, div.menu ul li a: посетил
{
    цвет фона: # 465c71; /*  Фоновый цвет */
    граница: 1px # 4e667d solid; /*  Граница */
    цвет: # dde4ec; /*  Цвет текста */
    дисплей: блок; / * Этот элемент будет отображаться как элемент уровня блока с разрывами строки до и после этого элемента * /
    высота строки: 1.35em; /*  Высота строки */
    отступ: 4px 20px; / * Внутреннее расстояние заполнения * /
    текстовое оформление: нет; / * Не показывать подчеркивание гиперссылки * /
    белое пространство: nowrap; / * Для пробелов в тексте не будет разрывов строк, и текст будет продолжаться в той же строке, пока не встретит тег 
    . * /
}
/ * Стиль a в ul во всех div, чей класс - menu (стиль, когда мышь перемещается к элементу) * /
div.menu ul li a: hover
{
    цвет фона: # bfcbd6; /*  Фоновый цвет */
    цвет: # 465c71; /*  Цвет текста */
    текстовое оформление: нет; / * Не показывать подчеркивание гиперссылки * /
}
/ * Стиль a в ul во всех div, чей класс - menu (стиль, когда мышь щелкает по элементу) * /
div.меню ul li a: активно
{
    цвет фона: # 465c71; /*  Фоновый цвет */
    цвет: # cfdbe6; /*  Цвет текста */
    текстовое оформление: нет; / * Не показывать подчеркивание гиперссылки * /
}

    Стилизация меню навигации с помощью CSS

    Обзор

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

    Результаты учащихся

    По завершении этого упражнения:

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

    Деятельность

    1. Откройте внешнюю таблицу стилей портфолио в текстовом редакторе и домашнюю страницу портфолио в браузере. После каждого шага, указанного ниже, сохраняйте таблицу стилей, затем обновляйте страницу в браузере, чтобы увидеть, какой эффект имело изменение.
    2. Во внешней таблице стилей создайте новый раздел в конце файла CSS, чтобы сохранить вместе все стили, относящиеся к меню навигации. Вы можете сделать это, добавив комментарий в конец файла, например:
        / * стили меню навигации * /
      После этого комментария будут размещены все стили, относящиеся к меню навигации. ПРИМЕЧАНИЕ. Каждое из следующих определений стиля уникально. Селекторы похожи, но если вы внимательно посмотрите на них, вы увидите, что они на самом деле относятся к отдельным элементам.Поэтому обязательно включите каждое из этих определений в свою таблицу стилей.
    3. Меню навигации содержится в элементе nav, но это всего лишь контейнер. Большинство элементов, которые нам нужно стилизовать, на самом деле содержатся внутри элемента nav. Чтобы стилизовать их, мы можем использовать селекторы потомков, которые были определены в уроке по id и class. Для начала мы можем удалить маркеры из неупорядоченного списка, например:
      nav ul {
  тип-стиль-список: нет;
}
    4. Затем переместите все элементы списка влево, как вы это делали с.информационные блоки в предыдущем уроке. Пока вы это делаете, вы можете добавить поле справа от каждого элемента списка, чтобы они не были сжаты вместе:
      nav ul li {
  плыть налево;
  маржа справа: 0,5em;
}
    5. Затем стилизуйте якоря (ссылки), вложенные в элементы списка. Добавленный здесь стиль делает элементы списка похожими на кнопки меню. Следующие стили являются примером, но не стесняйтесь настраивать эти стили и придумать свой собственный уникальный стиль меню:
      nav ul li a {
  отступ: 0.25em 1em;
  текстовое оформление: нет; / * без подчеркивания * /
  цвет фона: # EBF5FF; / * бледно-голубовато-белый * /
  цвет: # 4312AE; /* темно-синий */
  граница: сплошной черный цвет 2px;
  граница-верхний-левый-радиус: 1em 1em; / * закругленный угол! * /
  граница-верх-правый-радиус: 1em 1em; / * еще один закругленный угол! * /
}
    6. Теперь добавьте псевдоклассы: hover и: focus, чтобы элементы меню меняли цвет, когда пользователи указывают на них или вкладываются в них:
      nav ul li a: hover, nav ul li a: focus {
  черный цвет;
  цвет фона: белый;
  font-weight: жирный;
}
    7. Вам также может потребоваться настроить стиль самой навигационной панели, чтобы меню лучше подходило, но это зависит от вас.
    8. Наконец, чтобы предотвратить побочные эффекты от всех этих плавающих элементов, добавьте clear: left в определение стиля для main, поскольку это содержимое, которое следует сразу за меню навигации.

    Раздаточные материалы / Интернет-документы

    Готово?

    Сохраните изменения и покажите окончательное меню навигации преподавателю перед началом следующего модуля.

    Введение в стилизацию неупорядоченного списка как меню

    Введение в стилизацию неупорядоченного списка
      как меню

      Схема основных шагов

      См. CSS для меню здесь…
      Загрузите CSS в формате pdf здесь …

      Неупорядоченный список без оформления

      Шаг 1. Настройте таргетинг на

        с помощью CSS

        Удалите маркеры, поля и отступы из списка.

        Шаг 2. Настройте таргетинг на

      • с помощью CSS

        Для горизонтального меню расположите элементы списка в строку *. Пропустить этот шаг для вертикального меню

        Шаг 3. Настройте таргетинг на ссылки

        с помощью CSS

        Большая часть стиля для изменения внешнего вида применяется к ссылкам.

        Или, для вертикального меню…

        CSS

        HTML-код для списка: 

         

          

        •  пункт 1 
          • 

        •  пункт 2 
          • 

        •  пункт 3 
          •

        Шаг 1. Настройте таргетинг на

          с помощью CSS

          Удалить маркеры, поля и заполнение списка

           
ul {
тип-стиль-список: нет;
отступ: 0;
маржа: 0;
}

          Шаг 2. Настройте таргетинг на

        • с помощью CSS

          При необходимости разместите элементы списка в строке *. Пропустите этот шаг для вертикального меню 

           
ul li {
плыть налево;
}

          Шаг 3. Настройте таргетинг на ссылки

          с помощью CSS

          Большая часть стилей для изменения внешнего вида применяется к ссылкам

           
ul li a {
текстовое оформление: нет;
цвет: # 000000;
цвет фона: # C0C0C0;
отступ: 5px 10px 5px 10px;
}

ul li a: hover {
цвет фона: # FFC13B;
}

          Чтобы элементы меню не перекрывались с вертикальным меню , создайте селектор ul li и добавьте свойство CSS margin-bottom: 

           
ul li {
нижнее поле: 15 пикселей;
}

          * важно

          Плавающие элементы списка слева приведут к перемещению содержимого на странице после меню вверх рядом с ним.Следующий CSS исправит это:

           
ul: after {
содержание: "";
ясно: оба;
дисплей: блок;
}

          CSS: фиксированные меню

          CSS: фиксированные меню

          См. Также указатель всех советов.

          На этой странице:

          Закрепленное меню

          Меню, которое вы видите справа на этой странице, представляет собой просто список UL. Но это остается неизменным при прокрутке страницы. (Возможно, вам придется сделать окно меньше, чтобы сначала получить полосу прокрутки). она остается на месте по правилам таблицы стилей.Здесь разметка меню, берется прямо из источника этого страница:

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

           #menu {
  положение: фиксированное;
  справа: 0;
  верх: 50%;
  ширина: 8em;
  margin-top: -2.5em;
}

          Интересным правилом здесь является «положение : фиксированное », при котором DIV остается фиксированным на экране. Топ ‘: 50% ‘и’ справа: 0 ‘определяют, где DIV в данном случае отображается: 50% вниз от верхнего края окна, и константа 0px справа. Прочие свойства, наценки, границы, цвета и т. д. могут быть добавлены по своему вкусу.

          Существуют также свойства left и bottom для привязки элемент слева или внизу экрана.

          Подробнее

          Точнее: после того, как элемент был зафиксирован с ‘ position: fixed ‘, три свойства ‘left’, ‘width’ и «право» вместе определяют горизонтальное положение и размер, относительно окна. (CSS использует более общее слово область просмотра; окно является примером области просмотра.)

          Вам нужно не более двух из трех свойств, т.е. left & ширина, правая и ширина или левая и правая. Установка только одного из возможно также три или вообще ни одного.В этом случае CSS будет использовать естественный («внутренний») размер и / или положение элемента, как необходимо, для любых свойств, для которых оставлено значение по умолчанию (‘авто’).

          То же самое относится к трио «верх», «высота» и «низ». Ты необходимо установить не более двух из них: ‘top’, если вы хотите контролировать расстояние от верхней части окна, «низ» для управления расстояние от низа и «высота», если вы хотите указать фиксированная высота.

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

          FAQ: IE 5 и 6 в Windows?

          Если вы посмотрите эту страницу с помощью Microsoft Internet Explorer 5 или 6 в Windows («WinIE5» и «WinIE6») вы заметите, что это не Работа. Многие спрашивают меня об этом, поэтому вот небольшое объяснение. Вкратце: ошибка в браузере, а не на этой странице.

          WinIE5 и WinIE6 не реализуют «фиксированный». Это прискорбно, но большая проблема в том, что они также не разбирают «позицию» собственность правильно.Браузер, который не знает «исправлено», должен отбросьте правило «положение: зафиксировано» и вернитесь к тому, что предыдущее значение ‘position’ в таблице стилей было. Тогда мы могли бы добавьте ‘position: absolute’ непосредственно перед ‘fixed’ и браузером использовал бы это. Но в WinIE 5 и 6 этого не происходит. Очевидно, ключевое слово «фиксированный» каким-то образом интерпретируется как «статический».

          Вы не можете сделать поддержку WinIE5 и 6 «фиксированной», но есть решение проблемы синтаксического анализа.Йоханнес Кох предупредил меня о этот трюк (из его коллекции обходных путей [страница на archive.org]). Первый замените ‘position: fixed’ в правилах стиля выше на ‘position: absolute’, а затем вставьте следующее правило в таблица стилей:

           *> # intro {position: fixed}

          В результате браузеры, которые знают о ‘>’ (дочерний) селектор CSS будет использовать это правило, но браузеры, которые не игнорируйте, в частности WinIE5 и WinIE6.Правило Вместо этого будет использоваться ‘position: absolute’, и меню будет в в нужном месте, за исключением того, что оно не останется неизменным, когда вы прокрутка.

          Важно, чтобы вокруг символа «>» не было пробелов.

          Css Center Ul По горизонтали

          Разместите свои комментарии?

          Html Как горизонтально выровнять ul по центру div

          Just Now IE8 +: display: table & margin Как и в первом решении, вы используете автоматические значения для правого и левого полей, но не назначаете ширину.Если вам не нужна поддержка IE7 и ниже, это лучше подходит, хотя использовать значение свойства таблицы для display..container ul {display: table; маржа-право: авто; маржа слева: авто; }

          Веб-сайт: Stackoverflow.com