CSS Tab Designer — программа генерирующая меню для сайта
CSS Tab Designer является хорошей программой для создания меню сайта. Это генератор горизонтальных и вертикальных CSS меню.
Для работы в программе не требуются знания CSS, весь процесс создания меню происходит при помощи визуального редактора.
Программа содержит большое количество шаблонов меню, поэтому вам достаточно изменить название пунктов меню, задать каждому пункту ссылку и сохранить меню.
Материалы по теме:
- Coffee Cup Free DHTML Menu Builder – генератор меню
- 30 горизонтальных меню для сайта
- Горизонтальное CSS меню – подборка из 4 заготовок
Нажмите на кнопку «Демо» чтобы просмотреть некоторые варианты меню которые можно создать в программе.
Демо
Функции программы CSS Tab Designer
#1. Редактирование меню при помощи визуального редактора с одновременным просмотром результата.
#2.
Содержит очень красивые вертикальные и горизонтальные шаблоны меню.
#3. Для работы программы не требуется установки дополнительных компонентов, достаточно просто установить программу.
#4. Меню, генерируемое программой, создается только с использованием CSS и HTML.
#5. Код, генерируемый программой, является кроссбраузерным (совместимым для разных браузеров)
#6. Полностью бесплатная программа.
Интерфейс программы
В качестве примера рассмотрим создание меню в программе.
Для начала в окошке Tab Styles необходимо выбрать тот шаблон который вы желаете использовать в качестве меню и кликнуть по ссылке «Fill with samples» которая находится с лева в окне «Tasks».
После этого в окошке Item вы можете выбрать тот пункт меню, который хотите отредактировать и для того чтобы отредактировать данный пункт нажмите на иконку с карандашом.
В результате загрузится окно в котором вы можете задать название и ссылку для данного пункта меню.
Таким же образом все проделываем и для остальных пунктов меню. Если у вас лишний пункт меню, то выделите его и нажмите на иконку удаления . Если нужно добавить пункт то кликните по иконке с крестиком , а затем введя название и ссылку создайте новый пункт меню. При помощи стрелочек вы можете перемещать пункты меню относительно друг друга.
Когда вы будете вводить русские символы в качестве названий пунктов меню то в окне просмотра вместо введенных символов будет кракозябра. Не расстраивайтесь просто все дело в кодировке, которая указанна для данной страницы. Когда вы перенесете меню на свою страницу с правильной кодировкой, то все будет отображаться правильно.
Для того чтобы сохранить меню, выберите пункт «File» >> «Generate HTML & Images», дайте имя и сохраните HTML файл, с изображением использующимся для создания меню, в папку на вашем компьютере.
Код для интеграции данного меню на страницы своего сайта можно взять из сохраненного HTML файла, открыв его при помощи какого либо редактора или перейдя в низу окна программы по вкладке «Code».
Сам CSS код при помощи которого оформлено меню находится между тегами <style> </style>, а HTML код который создает структуру меню между тегами <body> и </body>.
Для интеграции меню на страницы своего сайта скопируйте CSS код и добавьте его в файл стилей своего сайта, а также скопируйте HTML код и добавьте на страницы сайта.
Файлы для скачивания
- Название: CSS Tab Designer
- Ссылка: Скачать с Depositfiles
- Резервная ссылка: Скачать с Letitbit
- Размер: 1,45 Мб
- Фрмат: ZIP
- Совместимость: Windows 98 / XP / Vista / 7
Материал подготовлен порталом: WebMasterMix.ru
Рекомендуем ознакомиться:
- Подробности
Опубликовано: 11 Январь 2011
Обновлено: 04 Ноябрь 2013
Просмотров: 18736
Создание интерактивного меню сайта только с помощью CSS | Мацей Барон | Good Praxis
Недавно перед нашей командой Good Praxis была поставлена задача изменить дизайн и разработать новый веб-сайт Peace & Justice Project.
Вещи, для работы которых много лет назад требовался JavaScript — например, отложенная загрузка изображений, переходы между меню и т. д. — теперь можно реализовать с помощью обычных HTML и CSS. Однако важно помнить о доступности, а не просто пытаться «взломать» свой путь к конечной цели.
Для P&J мы создали меню сайта только на CSS, которое полностью доступно и перемещается с помощью клавиатуры.
Цель состояла в том, чтобы сделать «выпадающее» меню с разделами. Когда пользователь наводит курсор на заголовок раздела, ниже появляется список элементов. Мы хотим, чтобы элементы анимировались, появлялись и исчезали, просто появлялись и немедленно исчезали.
Я объясню, как мы этого добились. Начнем с основной структуры HTML. Обратите внимание, что я оставил несколько циклов Jinja2 for просто для того, чтобы показать, как и где будут появляться новые записи:
Давайте разберем это. У нас есть основной элемент nav и «внутренний» контейнер внутри него. Затем для каждого раздела мы создаем контейнер main-menu__section , который имеет заголовок и список элементов.
Давайте на минутку взглянем на контейнер секции. Обратите внимание, как он использует свойство tabindex ?
tabindex="0" ><ул>Это делается для того, чтобы этот элемент мог становиться активным при перемещении по элементам с помощью табуляции. Почему это важно, станет ясно через мгновение.
Скрытие и отображение элементов
Как объяснялось ранее, мы хотим, чтобы список элементов появлялся (
main-menu__list), когда мы наводим указатель мыши на заголовок раздела (main-menu__section-header).Это означает, что изначально наш список должен быть невидимым.
Конечно, одним из способов достижения этого является использование
display: none. Однако это то, что можно просто включать и выключать, и мы хотели бы иметь переход между чем-то видимым и невидимым. Нашим очевидным выбором в этом случае будет использованиенепрозрачностьи переход между 0 и 1..main-menu__list {
непрозрачность: 0;
переход: непрозрачность 0,5 с;
}Мы знаем, что хотим показать список при наведении курсора на заголовок. Заголовок и список являются родственными элементами, поэтому мы могли бы использовать смежный комбинатор родственных элементов:
.main-menu__section-header:hover + main-menu__list {
opacity: 1;
}…однако с этим подходом есть проблема. В тот момент, когда мы пытаемся щелкнуть что-то в списке, оно исчезает. Это потому, что мы больше не наводим курсор на заголовок раздела, а скорее на список.
Он убегает!Вы можете подумать про себя: «Нет проблем, я просто расширю селектор!» и создайте что-то вроде этого:
.main-menu__section-header + main-menu__list:hover,
.main-menu__list:hover {
opacity: 1;
}… но это может очень быстро привести к путанице. Вместо этого мы можем просто использовать селектор потомков и применить состояние наведения ко всему разделу, а не только к заголовку:
.main-menu__section:hover .main-menu__list {
непрозрачность: 1;
}Гораздо аккуратнее. Теперь всякий раз, когда указатель мыши находится над разделом, мы показываем список, независимо от того, находится ли он над самим списком, заголовком или чем-то еще внутри него.
… больше не убегаю!Невидимый, но все же существующий
Непрозрачность заключается в том, что с ее помощью можно скрыть элементы, но фактически элемент остается на месте. Это как если бы оконное стекло покрасили в черный цвет, а затем сняли бы саму краску.
Использование дисплея
: noneравносильно удалению оконного стекла, поэтому ничего не остается.Почему использование непрозрачности может вызвать здесь проблему? Ну, элементы списка скрыты, но технически они все еще там, то есть… вы можете щелкнуть по ним! Это определенно не то, чего мы хотим.
К счастью, есть простое решение этой проблемы. А именно, мы можем использовать
событий указателя, чтобы убедиться, что элемент не обрабатывает события указателя — это означает, что нет кликов, нет событий наведения — ничего..main-menu__list {
непрозрачность: 0;
события-указатели: нет;
переход: непрозрачность .5s;
}.main-menu__section:hover .main-menu__list {
непрозрачность: 1;
события указателя: начальный;
}События указателя поддерживаются начиная с IE11, поэтому у нас буквально нет причин не использовать их.
Сделать его доступным
Теперь помните, как я упоминал
tabindexранее, и как он станет полезным? Что ж, мы хотим убедиться, что пользователи могут перемещаться по меню, перемещаясь по элементам с помощью табуляции. Для этого мы можем использовать:focusв нашем селекторе:.main-menu__section :hover .main-menu__list,
.main-menu__section :focus .main-menu__list {
; opacity
событий указателя: начальный;
}Это здорово — мы нажимаем Tab, и открывается наш раздел меню! Отличный. Снова нажимаем tab и… упс! Наше меню исчезает. Что происходит? Итак, мы сталкиваемся с ситуацией, аналогичной нашей предыдущей проблеме с наведением — когда мы фокусируемся на пункте меню (якорной ссылке), мы больше не фокусируемся на разделе.
Катастрофа! Означает ли это, что наше меню не может быть доступно? К счастью, есть простое решение: использование
:focus-within, которое срабатывает, когда элемент внутри родителя получает фокус: .
.main-menu__section :focus-within .main-menu__list {
непрозрачность: 1;
событий указателя: начальный;
}Это хорошо поддерживается современными браузерами, если только вам не нужна поддержка IE11 (на самом деле это не нужно) или старые версии Edge (которые используются еще реже).
Вот оно! Простое, полностью работающее меню веб-сайта, созданное без использования JavaScript. Еще одна интересная вещь в этом подходе: он также работает на мобильных устройствах.
Это даст вам все строительные блоки, необходимые для создания собственного меню. Теперь все, что вам нужно сделать, это проработать остальную часть макета, в зависимости от того, как вы хотите, чтобы меню выглядело.
Помните: вам не всегда нужен JavaScript для достижения определенных целей!
Создание навигационного меню с помощью Pure CSS
В этой статье Солодев научит вас создавать адаптивное навигационное меню с помощью чистого CSS.
Новичок
В этой статье Солодев научит вас создавать адаптивное навигационное меню с помощью чистого CSS. Как правило, для создания адаптивных навигационных меню используется смесь JavaScript и CSS, что может привести к замедлению времени загрузки и ухудшению пользовательского опыта (UX). Создавая адаптивное навигационное меню с помощью чистого CSS, вы оптимизируете скорость загрузки веб-сайта и создаете более удобную и быструю навигацию для посетителей веб-сайта.
Ниже приведены необходимые HTML, CSS и JavaScript.
Добавьте приведенный ниже HTML-код на свою веб-страницу
<навигация> <дел> <дел> <дел>
Это означает, что изначально наш список должен быть невидимым.
Теперь вы можете видеть через окно; если он достаточно чистый, вы, вероятно, можете обмануть себя, думая, что там ничего нет. Однако стекло, конечно, все еще там, и его можно потрогать и почувствовать.
main-menu__list, 
