Выпадающее меню на чистом CSS
Категория: Сниппеты с кодом
Продолжим развлекаться с менюшками и сегодня создадим простое выпадающее меню на чистом CSS&HTML.
Перед тем как приступить, предлагаю сразу взглянуть на конечный результат (Codepen).
1. HTML код
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Категории</a>
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
<li><a href="#">Ссылка 3</a></li>
</ul>
</li>
<li><a href="#">О сайте</a>
<ul>
<li><a href="#">Ссылка 1</a></li>
</ul>
</li>
<li><a href="#">Контакт</a></li>
</ul>Создадим обычный список (Unordered List) и добавим к двум пунктам – субменю в виде еще двух вложенных списков.
2. CSS
#menu {
background: #c0392b;
width: 100%;
padding:0;
text-align: center;
float:left;
border-bottom: 6px solid #e74c3c;
}
#menu a {
color: #fff;
text-decoration: none;
}
#menu a:hover {
color: #ccc;
}
#menu ul {
padding:0;
margin:0;
}
#menu li {
list-style: none;
padding: 0 15px 0 0;
width:100px;
margin: 0 auto;
float:left;
line-height: 50px;
}
#menu li ul {
position:absolute;
display: none;
}
#menu li ul li {
float: none;
display: inline;
width:100px;
line-height:35px;
}
#menu li ul li:hover {
background: #c0392b;
}
#menu li:hover ul {
display:block;
}
#menu li ul li {
display: block;
background:#e74c3c;
}Главное, на что стоит обратить внимание в CSS части, то что выпадающее меню изначально скрыто (display:none) и появляется только при наведения курсора (li:hover ul).
Поэкспериментировать с кодом можно, как всегда, в песочнице на Codepen.
Опубликовано
Ролловер меню на CSS
Вот такое симпатичное ролловер-меню мы сейчас станем делать.
Если вы уже пытались что-то подобное изобразить в визуальном редакторе вроде Дримвьювера от Макромедии, то заметили, что там все построено на заковыристом Java-скрипте, и в коде это выглядит просто устрашающе.
Мы же используем всего лишь парочку картинок-заготовок, обычный немаркированный список и немножко css.
Для начала нарисуем две картинки:
Это две части одной закладки меню. Правая делается такой длинны, чтобы при выбранном размере шрифта, на картинке помещалось самое длинное слово из всего списка разделов. Например, «супермегакулфорумблинваще!».
Каждая из картинок состоит из двух частей, одна под другой. Верхняя часть — исходное состояние, нижняя — активная, при наведении мышки.
Принцип довольно простой и изящный: в листе стилей мы зададим разным состояниям различные координаты изображения.
То есть, картинка загружается вся целиком, но на странице мы изначально видим только верхнюю часть. Когда мы подводим к кнопке мышку, то как бы «выскакивает» нижняя часть.
Итак, картинки готовы. В листе стилей запишем следующий код:
#menu {
width: 860px;
height: 39px;
margin: 0 auto;
background: #69c;
font: 90% "Comic Sans MS", Verdana, Arial, sans-serif;
line-height: 1.8em;
clear: both;
}
#menu ul {
padding: 5px 10px 0 30px;
list-style: none;
}
#menu li {
display:inline;
}
#menu a {
float: left;
background: url(images/tableft.gif) no-repeat left top;
padding: 0 0 0 4px;
}
#menu a span {
float: left;
background: url(images/tabright.gif) no-repeat right top;
padding: 4px 20px 5px 10px;
color: #fff;
}
#menu a:hover span {
color: #FF9834;
}
#menu a:hover {
background-position: 0% -42px;
}
#menu a:hover span {
background-position: 100% -42px;
}
#menu li.active {
float: left;
color: #FF9834;
background: url(images/tableft.gif) no-repeat left top;
background-position: 0% -42px;
padding: 0 0 0 4px;
}
#menu li.
active span {
float: left;
background: url(images/tabright.gif) no-repeat right top;
padding: 4px 20px 5px 10px;
background-position: 100% -42px;
}
Разберем запись подробно. Ширина блока меню 860 пикселей, высота 39 пикселей, авто-выравнивание по центру монитора, синий фон и очистка с обоих сторон, чтобы ни справа, ни слева больше ничего лишнего не вылезло.
Дальше зададим списку ul поля и запретим отображение маркеров.
Далее мы укажем пунктам списка li расположение «в линию», иначе по-умолчанию браузеры всегда складывают их в столбик.
А вот следующие два правила весьма интересны. В обоих указаны стили для отображения ссылок, но во втором появилось странное слово span. Зачем это?
Дело в том, что нам нужно привязать наши изображения кнопок к тэгам в виде фона. В данном случае тэг у нас один — <a>.
Привязывать фон можно только к стартовому тэгу. К </a> уже ничего не привяжешь.
Поэтому мы и ввели дополнительный тэг span.
Его еще называют нейтральным, потому как он может быть использован везде и сам по себе не несет какой либо значимой нагрузки.
Замечу также, что этот тег не является блочным элементом. Не пытайтесь заменить им тэг div.
Таким образом, мы привязали первую картинку (как фон) к тэгу a, а вторую к span. Причем для первой указали расположение слева вверху и запретили ей повторяться, а второй — справа вверху, и тоже без повтора.
Поля тут тоже заданы не абы как. Сначала мы указали левой картинке отступить от левого края на 4 пиксела, то есть как раз на ширину картинки. Если этого не сделать, то правая картинка, которая заведомо шире, просто «съест» левую, потому что названия разделов у нас все-таки не очень длинные.
Что касается полей для правой картинки, то мы их задали такими, чтобы справа от имени раздела оставалось столько же пространства, сколько и слева (а иначе браузер «подожмет» слово под обрез). Вобщем экспериментируйте и увидите. 🙂
Для ссылок задали белый цвет (белый на зеленом — обожаю просто!).
А для активных — оранжевый на белом.
Следующие два правила как раз приказывают нашим картинкам спрятать верх и показать низ при наведении на них мышкой. Сделано это при помощи позиционирования.
Для левой картинки мы указали позицию в 0% (то есть крайнее левое положение) и минус 42 пикселя. То есть мы просто «отняли» у нее верхнюю часть. А так как картинка изначально загружена на страницу полностью, то она и покажет нам нижнюю часть.
Для правой картинки мы указали, соответственно, 100% позицию (крайнюю справа) и тоже минус 42 пиксела.
Возникает вопрос: почему мы сразу не видим на странице целые картинки? А потому, что в самом начале для нашего блока менюшек мы задали высоту всего в 39 пикселей (можно и 42, но так как браузеры по разному считают отступы, то мы чуток перестраховались).
То есть, получилось что-то вроде окошка. Помните советские фильмы про Шерлока Холмса? Там в самом начале идут хитроумные титры в виде целого поля буковок? На них наводится черный трафарет с прорезями, и получаются осмысленные слова.
Вот примерно на таком же принципе сделано и наше меню. Все просто! 🙂
Два других правила мы написали для активного раздела. Это тоже понятно — активный раздел не должен быть ссылкой, но должен ясно показывать, что он в данный момент активен. То есть выглядеть так, словно на ссылку навели мышку.
Тут мы тоже приказываем картинкам хитро выглядывать нижней частью, но пристегнули их уже не к тэгам ссылок, а к тэгам строк списка — li.
Не забываем везде указывать обтекание слева — (float: left;). Иначе глюки неизбежны.
Вот вроде бы и все. Но IE все-таки браузер с характером, и наше красивое меню, как-то некрасиво искажает. 🙁 В данном уроке не видно, но вот на собранной целиком странице получалась эдакая щелка между меню и основным блоком.
Это как раз происходит потому, что IE (в отличие от других браузеров) по-своему высчитывает размеры полей и отступов. На такое безобразие хитрые верстальщики придумали не менее хитрый болт, называемый хаком.
То есть спецом для IE в листе стилей делается приписка (зачастую с указанием версии IE): «…сему поганцу показывать мою гениальную менюху вот так: (и тут дополнительное правило)…».
Такой хак можно вписать в основной лист стилей, а можно пристегнуть отдельным листом, дав на него соответствующую ссылку. Мы так и поступим, и пристегнем к странице еще один css, обозвав его просто ie.css. В нем мы запишем следующее:
#menu a span {
padding: 4px 20px 4px 10px;
}
#menu li.active span {
padding: 4px 20px 4px 10px;
}
Как видите, в отличие от основного листа, здесь мы указали нижнее поле на один пиксель меньше (4 вместо 5). Вот и вся трабла.
Ну и наконец код самой страницы (тут только менюха, все остальные, положенные для страницы тэги, опущены):
<div>
<ul>
<li><a href="#" title="Главная"><span>Главная</span></a></li>
<li><a href="#" title="Факты"><span>Факты</span></a></li>
<li><a href="#" title="Байки"><span>Байки</span></a></li>
<li><a href="#" title="Классика"><span>Классика</span></a></li>
<li><a href="#" title="О летучести"><span>О летучести</span></a></li>
</ul>
</div>
Enjoy! 🙂
UPD от 24.
09.2018: Так как статья была написана в дремучем (по меркам Интернета) 2007 году, то по-сути стала уже неактуальна.
С тех пор многое изменилось. Уже никто не делает такие извращения с картинками и пр. Сейчас используют новое правило из арсенала CSS3 под названием border-radius:. Достаточно прописать вот такую простую строчку:
border-radius: 5px 5px 0 0;
чтобы задать скругленные уголки сверху плашки меню и оставить прямыми внизу.
Автор: Игорь Квентор
www.websovet.com
Страница не найдена (ошибка 404)
PHP
|
|
Недвижимости на PHP
Картах из MySQL+PHP
xmlHTML/CSS
|
|
jsonJS/jQuery
htaccess
Bootstrap
Программы
Разное
Справочники
|
|
ru, Яндекс, GmailCSS-вызов по размещению меню.
Размещение меню CSS!
Такая гибкость!
Введение
Одно из замечательных свойств CSS — это то, как мы можем использовать его для управления расположением элементов на наших страницах (и очень легко изменять эти расположения). В этом задании мы поэкспериментируем с макетом и размещением меню на странице
В этом задании мы исследуем следующие концепции:
- Позиционирование
- Различные типы дисплеев
- Изменение стиля отображения списка
- Создание эффектов наведения
- Добавление содержимого перед элементами
Шаг 1. Код шаблона
Скопируйте приведенный ниже начальный код шаблона в текстовый файл (не забудьте сохранить его с расширением .html ) и откройте его в браузере, чтобы посмотреть, как он выглядит.
- <голова>
Вызов меню - <стиль>
- /* Здесь будут стили */
- <тело>
- <дел>
Наша страница
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla lobortis tristique lectus ut maximus. Nulla sit amet nisi at sapien pellentesque auctor. Vivamus et ex ut tortor sollicitudin varius. Vestibulum sed posuere urna, eget tempus ante. Phasellus ornare odio tempor velit tempor, in ullamcorper lectus suscipit. Fusce tellus justo, posuere in quam a, sollicitudin varius elit. Morbi pretium tellus et ex molestie mattis. Pellentesque pulvinar dictum lacus, vitae sollicitudin felis lacinia ac.Vivamus elementum magna enim, sit amet facilisis felis cursus id. Sed viverra elit nisi, id ultricies urna ultrices sed. Donec pulvinar justo erat, at volutpat orci gravida et. In ac nulla turpis. Maecenas id quam dapibus, ornare ex ac, iaculis lectus. Vivamus metus nibh, scelerisque et massa ut, placerat sagittis ipsum. Integer quis volutpat erat, vel facilisis nunc. Nam efficitur orci nec neque volutpat, a feugiat tortor efficitur. Donec venenatis sodales nibh, eget ornare ligula pellentesque eu.
- <дел>
- <ул>
- Главная
- Блог
- О
Nulla lobortis tristique lectus ut maximus. Nulla sit amet nisi at sapien pellentesque auctor. Vivamus et ex ut tortor sollicitudin varius. Vestibulum sed posuere urna, eget tempus ante. Phasellus ornare odio tempor velit tempor, in ullamcorper lectus suscipit. Fusce tellus justo, posuere in quam a, sollicitudin varius elit. Morbi pretium tellus et ex molestie mattis. Pellentesque pulvinar dictum lacus, vitae sollicitudin felis lacinia ac.
Шаблон страницы
Наша страница
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis tristique lectus ut maximus. Nulla sit amet nisi at sapien pellentesque auctor. Vivamus et ex ut tortor sollicitudin varius. Vestibulum sed posuere urna, eget tempus ante. Phasellus ornare odio tempor velit tempor, in ullamcorper lectus suscipit. Fusce tellus justo, posuere in quam a, sollicitudin varius elit. Morbi pretium tellus et ex molestie mattis. Pellentesque pulvinar dictum lacus, vitae sollicitudin felis lacinia ac.
Vivamus elementum magna enim, sit amet facilisis felis cursus id. Sed viverra elit nisi, id ultricies urna ultrices sed. Donec pulvinar justo erat, at volutpat orci gravida et. In ac nulla turpis. Maecenas id quam dapibus, ornare ex ac, iaculis lectus. Vivamus metus nibh, scelerisque et massa ut, placerat sagittis ipsum. Integer quis volutpat erat, vel facilisis nunc. Nam efficitur orci nec neque volutpat, a feugiat tortor efficitur. Donec venenatis sodales nibh, eget ornare ligula pellentesque eu.
Содержимое фиктивного материала было получено с помощью генератора Lorem Ipsum. Это стандартный способ включения фиктивного контента.
Для каждого из приведенных ниже шагов регулярно сохраняйте и просматривайте файл, чтобы увидеть, как элементы, которые вы добавляете и изменяете, влияют на вашу страницу.
На данный момент у нас есть простой контент с меню, которое на самом деле представляет собой просто список пунктов в нижней части страницы. В течение следующих нескольких шагов мы поработаем с этим и посмотрим, что мы можем сделать.
Следует отметить, что мы будем играть только с CSS. HTML мы не будем трогать.
Шаг 2. Меню слева
Мы поместили меню внизу кода, чтобы оно не мешало. Это помещает наш контент прямо в верхнюю часть нашей страницы, что удобно с точки зрения кодирования, но также хорошо с точки зрения SEO (поисковая оптимизация). Это связано с тем, что поисковые системы отдают приоритет контенту выше в нашем коде, что означает, что наш контент имеет более высокую ценность, чем меню.
То, что наше меню находится внизу кода, не означает, что оно должно быть там при просмотре в браузере. Скопируйте приведенный ниже код и поместите его между <стиль> тегов.