горизонтальное » Скрипты для сайтов
Эффект зачеркивания при наведении в меню
Эффект зачеркивания при наведении на пункт в горизонтальном меню. Наиболее эффектно будет смотреться на лендингах, где горизонтальное меню расположено поверх фонового изображения.
Гибкое горизонтальное меню
Небольшой скрипт, который поможет в создании более эстетического адаптивного горизонтального меню. Если размер экрана не позволяет отобразить все пункты горизонтального меню, то данный скрипт перемещает эти пункты в выпадающее меню — «три точки». Использование этого скрипта, позволит отображать адаптивную иконку (гамбургер), тогда, когда вы сами это решите, так как меню теперь будет всегда смотреться аккуратно.
Диагональное меню на CSS
Используя возможности CSS3 в этом уроке сделаем диагональное меню, и напишем media queries, чтобы придать ему адаптивности.
Горизонтальное меню на CSS3
Симпатичное горизонтальное CSS3 меню с всплывающими пунктами при наведении.
Выпадающее меню на CSS3
Горизонтальное меню с выпадющими подпунктами с использованием css3.
Размытое меню на CSS3
Простое горизонтальное меню с эффектом размытия и с элементом адаптивности. Используется CSS3 и HTML5.
JQuery плагин, позволяющий сделать горизонтальную навигацию, которая будет занимать всю ширину контейнера в котором находится. Добавлена также и поддержка IE7.
Горизонтальное меню с выпадающими подпунктами
Горизонтальное меню с выпадающими подпунктами. Выпадающие элементы используют jQuery, все остальное оформлено на CSS. В демо включен практически макет сайта, осталось только заполнить центральную часть контентом и нарисовать красивую шапку. Но можно использовать и только саму идею меню.
Меню с эффектом подпрыгивания
Интересное подпрыгивающее меню (bounce), сделанное с помощью псевдо элементов и пользовательских атрибутов на CSS3.
Многоуровневое выпадающее меню
Многоуровневое выпадающее меню на CSS2. При этом работает оно в IE5.5, IE6, IE7, IE8, Firefox, Opera, Safari(PC) и Google Chrome.
Многоцветное меню на CSS3
Горизонтальное выпадающее меню, фишка которого состоит в том, что выпадающие блоки могут изменять цвет на тот, по какому из цветных квадратиков вы щелкните мышкой. При этом смена цвета реализована на CSS, а не на jаvascript.
Выпадающее CSS3 меню
Выпадающее меню на CSS3 сделанное на базе UI созданного Владимиром Кудиновым.
Популярные статьи
Реклама
Опрос
Редактор кода, каким пользуетесь?
WebStorm, PhpStorm
Sublime
Atom
Visual Studio Code
Notepad++
Brackets
Aptana Studio
Другой
Новости
Подпишись
Присоединяйся, чтобы узнать все самое интересное для frontend разработчика и анонсы статей с сайта.
Разное
Реклама
Свежие статьи
Практическая работа 16-17. Создание горизонтального и вертикального динамического меню на веб-странице
Создание горизонтального и вертикального динамического меню
Цель:
ü научиться вручную создавать горизонтальное и вертикальное css-меню для сайтов.
План:
ü Теоретические сведения
ü Ход работы
ü Контрольные вопросы
Теоретические сведения
Основным понятием CSS является стиль – т. е. набор правил оформления и форматирования, который может быть применен к различным элементам страницы.
Информация о стилях может располагаться либо в отдельном
файле, либо непосредственно в коде Web-странички. Расположение описания стилей
в отдельном файле имеет смысл в случае, если нужно применять эти стили к
большему, чем одна, количеству страниц. Для этого нужно создать обычный
текстовый файл, описать с помощью языка CSS необходимые стили, разместить этот
файл на Web-сервере, а в коде Web-страниц, которые будут использовать стили из
этого файла, нужно будет сделать ссылку на него.
<LINK REL=STYLESHEET TYPE=»text/css» rel=»nofollow ugc» target=»_blank» href=»URL»>
Первые два параметра этого тега являются зарезервированными именами, требующимися для того, чтобы сообщить броузеру, что на этой страничке будет использоваться CSS. Третий параметр – HREF= «URL» – указывает на файл, который содержит описания стилей. Этот параметр должен содержать либо относительный путь к файлу – в случае, если он находится на том же сервере, что и документ, из которого к нему обращаются – или полный URL («http://…») в случае, если файл стилей находится на другом сервере.
Второй вариант, при котором описание стилей располагается в
коде Web-странички, внутри тега <BODY>, в теге <STYLE
type=»text/css»>… </STYLE>. В этом случае вы можете
использовать эти стили для элементов, располагающихся в пределах странички.
Параметр type=»text/css» является обязательным и служит для указания
броузеру использовать CSS.
И третий вариант, когда описание стиля располагается непосредственно внутри тега элемента, который вы описываете. Это делается с помощью параметра STYLE, используемого при применении CSS с большинством стандартных тегов HTML. Этот метод нежелателен, и понятно почему: он приводит к потере одного из основных преимуществ CSS – возможности отделения информации от описания оформления информации.
Самый простой случай присвоения какому-либо элементу определенного стиля выглядит так:
НАЗВАНИЕ_ЭЛЕМЕНТА {свойство: значение;}
Где НАЗВАНИЕ_ЭЛЕМЕНТА – имя HTML-тега (h2, P, TD, A и т. д.), а параметры в фигурных скобках – список свойств элемента и присвоенных им значений. Более подробно команды языка CSS мы рассмотрим чуть позже.
Пример:
h2 {font-size: 30pt; color: blue;}
В этом примере всем заголовкам на странице, оформленным тегом Н1, присваивается размер шрифта 30 пунктов и синий цвет.
Также элементы страниц, созданные с использованием CSS,
используют механизм наследования: т.
е. если вы располагаете изображение внутри
тега <P>…</P>, оформленного с помощью CSS, с отступами, так,
чтобы параграф занимал только определенную часть ширины страницы, изображение
также унаследует значения отступов, указанные для этого параграфа.
CSS реализует возможность присваивать стили не всем одинаковым элементам страницы, а избирательно – для этого используется параметр CLASS = «имя класса» или идентификатор ID=«имя элемента», присваивающиеся любому элементу страницы. Рассмотрим эти возможности подробнее.
Параметр CLASS применяется в случае, если необходимо создать одинаковый стиль для нескольких, но не всех элементов страницы (одинаковых или разных).
Пример:
.b-с {font-weight: bold; text-align: center} – описание стиля для класса b-с
Все элементы класса b-с будут отображаться жирным шрифтом с выравниванием по центру страницы (или ячейки таблицы).
<P>Текст параграфа</P>
– параграфу присвоен стиль класса b-с.
<TD CLASS=»b-c»>текст</TD> – ячейке таблицы присвоен стиль класса b-c.
Свойства элементов, управляемых с помощью CSS
СВОЙСТВА ШРИФТА
font-family Используется для указания шрифта или шрифтового семейства, которым будет отображаться элемент.
P {font-family: Times New Roman, sans-serif;}
font-weight Определяет степень жирности шрифта с помощью трех параметров: lighter, bold, bolder
B {font-weight: bolder;}
font-size Устанавливает размер шрифта. Параметр может указываться как в относительной (проценты), так и абсолютной величине (пункты, пикселы, сантиметры)
h2 {font-size: 200%;}
h3 {font-size: 150px;}
h4 {font-size: 400pt;}
font-size Устанавливает размер шрифта. Параметр может указываться как в относительной (проценты), так и абсолютной величине (пункты, пикселы, сантиметры)
h2 {font-size: 200%;}
h3 {font-size: 150px;}
h4 {font-size: 400pt;}
ЦВЕТ ЭЛЕМЕНТА И ЦВЕТ ФОНА
color Определяет цвет элемента
I {color: yellow;}
background-color
<HTML>
<HEAD>
<TITLE>Пример использования CSS</TITLE>
<STYLE type=”text/css”>
h2 {font-size: 300%;}
</STYLE>
</HEAD>
<BODY bgcolor=white>
<center><BR>
<h2 style=”background-color: teal; color: white;”>Cascading</h2>
<h2 style=”background-color: navy; color: yellow;”>Style</h2>
<h2 style=”background-color: gold; color: brown;”>Sheets</h2>
</BODY></HTML>
В этом примере в разделе <STYLE> всем элементам <Н1> на этой страничке был установлен размер 300 % от нормы. Затем каждому из элементов <h2> были присвоены собственные значения цвета фона и цвета символов.
СВОЙСТВА ТЕКСТА
text-decoration Устанавливает эффекты оформления шрифта, такие, как подчеркивание или зачеркнутый текст
h5 {text-decoration: underline;}
A {text-decoration: none;}
.
wrong {text-decoration: line-through;}
text-align Определяет выравнивание элемента.
P {text-align: justify}
h2 {text-align: center}
text-indent Устанавливает отступ первой строки текста. Чаще всего используется для создания параграфов с табулированной первой строкой.
P {text-indent: 50pt;}
line-height Управляет интервалами между строками текста.
P {line-height: 50 %}
СВОЙСТВА ГРАНИЦ
margin-left Устанавливают значения отступов вокруг элемента.
IMG { margin-right: 20pt}
P { margin-left: 2cm}
margin-right
margin-right
margin-top Устанавливают значения отступов вокруг элемента.
IMG { margin-right: 20pt}
P { margin-left: 2cm}
Откроем наш любимый Web-редактор Notepad (Блокнот) и создадим файл с будущим названием styles.css (название файла может быть любым). Опишем в этом файле стиль параграфа <P>, который будет использоваться на всех страничках нашего сайта:
P {
font-family: Times New Roman, serif;
color: #000000;
margin-left: 15%;
margin-right: 15%;
margin-top: 1pt;
margin-bottom: 1pt;
text-indent: 1cm;
text-align: justify;
}
Для того чтобы «привязать» созданные нами стили к нашим
страничкам, во все html-файлы в разделе <HEAD> мы должны поместить строку
со ссылкой на файл стилей и с указанием об использовании CSS: <LINK REL=STYLESHEET TYPE=»text/css» HREF=»styles.
css»>
Поскольку файл со стилями будет находиться в том же каталоге сервера, что и остальные странички, параметр rel=»nofollow ugc» target=»_blank» href=»URL» в нашем случае будет просто именем нашего файла стилей (styles.css).
Пример 1 Классическое CSS-меню
Код HTML:
<title>Создание базового горизонтального
меню для сайта CSS методами</title>
</head>
<body>
<ul
class=»css-menu-1″>
<li><a
rel=»nofollow ugc» target=»_blank» href=»#»>Главная</a></li>
<li><a
rel=»nofollow ugc» target=»_blank» href=»#»>HTML уроки</a></li>
<li><a
rel=»nofollow ugc» target=»_blank» href=»#»>CSS уроки</a></li>
<li><a rel=»nofollow ugc» target=»_blank» href=»#»
class=»selected»>CSS меню</a></li>
<li><a rel=»nofollow ugc» target=»_blank» href=»#»>Справочник</a></li>
</ul>
Код на css:
ul.
css-menu-1 {
list-style: none
}
ul.css-menu-1 li {
display: inline
}
ul.css-menu-1 li a {
font-family: Tahoma, Geneva, sans-serif;
text-decoration: none;
background: #5c6cb7;
font-weight: bold;
color: #ffaa00;
padding: 6px 10px 6px 10px
}
ul.css-menu-1 li a:hover {
padding: 6px 10px 6px 10px;
font-weight: bold;
background: #364d95;
color: #ff9900
}
ul.css-menu-1 li a.selected {
background: #364e95
}
Пример 2 Меню с подсказкой
Код на HTML:
<title>Создание красивого
горизонтального CSS меню для сайта</title>
</head>
<body>
<div
id=»css-menu»>
<ul>
<li><a
rel=»nofollow ugc» target=»_blank» href=»#»>
<span
class=»text-top»>Главная</span>
<span
class=»text-bottom»>О нашем проекте</span>
</a></li>
<li><a
rel=»nofollow ugc» target=»_blank» href=»#»>
<span
class=»text-top»>Справочник</span>
<span
class=»text-bottom»>CSS справочник</span>
</a></li>
<li><a
rel=»nofollow ugc» target=»_blank» href=»#»>
<span
class=»text-top»>CSS уроки</span>
<span
class=»text-bottom»>Для начинающих</span>
</a></li>
<li><a
rel=»nofollow ugc» target=»_blank» href=»#»>
<span
class=»text-top»>CSS меню</span>
<span>Коллекция
CSS меню</span>
</a></li>
</ul>
</div>
Код на css:
#css-menu ul {
list-style: none;
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
line-height: 1.
4em;
border:2px solid #000000;
border-left: 1px solid #000000;
float: left;
padding: 0;
margin: 12px 0 25px 24px
}
#css-menu ul li {
float: left
}
#css-menu ul li a {
display: block;
text-decoration: none;
background-color: #595959;
padding: 5px 10px 0 10px;
color: #fefefe;
width: 120px;
border-right: 1px solid #797979;
border-left: 1px solid #191919
}
#css-menu ul li a span {
display: block
}
#css-menu ul li a span.text-top {
border-bottom: 1px solid #595959
}
#css-menu ul li a:hover span.text-top {
border-bottom: 1px dashed #fefefe;
color: #ffddbb
}
#css-menu ul li a span.text-bottom {
visibility: hidden;
font-size: 11px;
text-align: right
}
#css-menu ul li a:hover span.text-bottom {
visibility: visible
}
Создание вертикального меню
Вертикальное меню будет
написано на чистом html и CSS.
Смена цвета и дорисовка линий по 1px создают
эффект жалюзи. А дальше экспериментируйте сами и создавайте своё уникальное и
неповторимое вертикальное css меню.
Рисунок 3 — Вертикальное и горизонтальное меню на CSS
Фрагмент html кода:
<table
border=»0″ align=»center» cellpadding=»0″
cellspacing=»0″>
<tr>
<td valign=»top»>
<!— Область вертикального меню —>
<div>
<ul>
<li><a rel=»nofollow ugc» target=»_blank» href=»#1″ title=»Обзорные статьи«>Обзоры</a></li>
<li><a rel=»nofollow ugc» target=»_blank» href=»#2″ title=»Теоретический курс«>Теория</a></li>
<li><a rel=»nofollow ugc» target=»_blank» href=»#3″ title=»Пошаговые инструкции«>Практикум </a></li>
<li><a rel=»nofollow ugc» target=»_blank» href=»#4″ title=»Справочная информация«>Спроавочники</a></li>
<li><a rel=»nofollow ugc» target=»_blank» href=»#5″ title=»Что предстоит«>Перспективы</a></li>
<li><a rel=»nofollow ugc» target=»_blank» href=»#6″ title=»Новые разработки«>Проекты</a></li>
<li><a rel=»nofollow ugc» target=»_blank» href=»#7″ title=»Письма«>Контакт</a></li>
<li><a rel=»nofollow ugc» target=»_blank» href=»#8″ title=»Об авторе«>Автора</a></li>
</ul>
</div>
<!— Конец области вертикального меню —>
</td>
<td><font>Создать сайт
самостоятельно</font></td>
</tr>
</table>
Область вертикального меню — html файл
<table
border=»0″ align=»center» cellpadding=»0″
cellspacing=»0″>.
Границу в таблице убрали: border=»0″ и отредактировали ширину ячеек таблицы, чтобы меню хорошо сидело.
<td width=»17%» valign=»top»> — область вертикального меню css;
<td width=»83%»> — область контента.
Обратите внимание, что в области вертикального меню css есть параметр valign=»top», который необходим для того, чтобы элементы, находящиеся в нём притягивались кверху, т.е. чтобы меню на css не болталось посередине (принято по умолчанию).
Присваиваем блоку div идентификатор «menu-verticalnoe»: <div> и далее используем маркированный список: теги <ul> <li> <li> … </li> </li> </ul>. Практически всё аналогично построению горизонтального меню css, но здесь вводится параметр <title> в теге ссылки:
<a rel=»nofollow ugc» target=»_blank» href=»#2″ title=»Теоретический курс»>Теория</a>.
Файл каскадных таблиц стилей:
Дописываем в файл
style.
css следующие директивы
/****** Меню Вертикальное CSS *********/
Задаём идентификатор для маркированного списка
#menu-verticalnoe ul {
Задаём отступы
margin: 5px;
padding: 0;
Отменяем использование маркеров в маркированном списке.
list-style: none;
Выбираем какие шрифты будут использоваться.
font-family: verdana, arial, Helvetica;
}
Идентификатор для маркера
#menu-verticalnoe li { margin: 0; }
Работаем с кнопками вертикального меню CSS
#menu-verticalnoe a {
Выбираем блочную структуру отображения элементов.
display: block;
Настраиваем отступы вертикального меню css.
padding: 5px 10px;
Задаём размер ширины кнопки.
width: 115px;
Цвет текста ссылки.
color: #fff;
Цвет кнопки вертикального меню css.
background-color: #683906;
Запрещаем все эффекты с текстом.
text-decoration: none;
Создаём эффект кнопкам вертикального меню css, задавая границы в 1px, непрерывными линиями разных цветов.
border-top: 1px solid #ffffff;
border-bottom: 1px solid #444444;
border-left: 1px solid #ffffff;
border-right: 1px solid #444444;
Задаём жирность начертания.
font-weight: bold;
Размер шрифта.
font-size: 13px;
}
Установки идентификатора для вертикального меню при наведении курсора
#menu-verticalnoe a:hover {
Меняем цвет ссылочного текста.
color: #bbb;
Меняем цвет кнопки.
background-color: #572800;
Снимаем все эффекты.
text-decoration: none;
Формируем визуальный эффект вжатости.
border-top: 1px solid #444444;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #444444;
border-right: 1px solid #ffffff;
}
Ход работы
Задание.
Разработать горизонтальное и вертикальное css-меню,
содержащее не менее 7 пунктов.
Контрольные вопросы
1 В чем отличие панели навигации от динамического меню?
2 В каком блоке располагается динамическое меню?
3 С помощью каких тегов создается маркированный список?
4 Какое свойство CSS позволяют убрать маркеры списка?
5 С помощью каких свойств CSS пункты меню размещаются горизонтально (вертикально)?
Добавление и редактирование горизонтальной панели навигации
Чтобы добавить горизонтальную панель навигации на свой сайт, вам нужно включить панель, а затем выбрать, какие страницы вы хотите там отображать. При желании вы можете превратить панель навигации в раскрывающееся меню, добавив страницы в меню и вложив одни страницы под другие. Включить панель навигации
Добавление, изменение или удаление элементов навигацииВы можете добавить любую страницу своего сайта на горизонтальную панель навигации в качестве раздела меню или пункта меню. Перейдя в режим «Редактировать макет сайта», щелкните область с надписью «Нажмите, чтобы изменить горизонтальную навигацию». Это вызовет диалоговое окно для добавления, изменения и удаления элементов на панели навигации.
Изменение стиля панели навигацииПерейдя в режим «Редактировать макет сайта», щелкните область с горизонтальной навигацией. Вы можете изменить стиль горизонтальной панели навигации, выбрав один из переключателей в разделе Style . Вот как выглядят разные стили:
|
Во всплывающем окне введите URL-адрес страницы и название пункта меню, который вы хотите отобразить, затем нажмите «ОК».
Верхние элементы в поле Выберите страницы для отображения будут самыми левыми элементами горизонтального меню. Эта организационная структура применима и к выпадающим меню.Пример простого горизонтального меню
Горизонтальные меню следует применять только к веб-сайтам с несколькими ссылками и без раскрывающихся списков.
Далее идет Пример простого горизонтального меню , разработанного с использованием HTML и CSS для управления цветами при наведении курсора.
Вы можете изменить цвета ссылок, заменив код цвета в каждом из них, и настроить размер шрифта, а если вам не нужно подчеркивание, просто замените его на «обычный». Затем вы можете скопировать приведенный ниже код в свои файлы.
Маленькое горизонтальное меню HTML:
Главная |
О программе |
Материалы |
Контакт |
Маленькое горизонтальное меню CSS:
{цвет: #088989;
фон: прозрачный;
оформление текста: подчеркивание;
размер шрифта:100%; }
a: hover {цвет: #7c5ce6;}
Образец меню вертикального списка
Меню вертикального списка обычно не подходят для небольших мобильных устройств, поскольку они занимают ценное место либо слева, либо справа на странице, обычно в боковой панели. Однако вы можете использовать короткие меню в области контента.
Цвета ссылок, цвета при наведении курсора и высота строки контролируются CSS.
Меню вертикального списка CSS:
Меню вертикального списка HTML:
.меню: ссылка {цвет: # 000;
вес шрифта: полужирный;
фон: прозрачный;
высота строки: 1,5 em;
украшение текста: нет;
размер шрифта: 11 пикселей; }
a: hover {цвет: # 999;}
Горизонтальное выпадающее меню в CSS, HTML и Javascript
Если у вас много страниц, вам понадобится меню с выпадающими списками. Горизонтальное раскрывающееся меню, показанное ниже, взято из адаптивных слайдов, в котором используются CSS, Javascript и HTML. Это меню корректно отображается во всех основных браузерах и подходит для мобильных устройств, поскольку оно сжимается в соответствии с шириной страницы.