Выпадающее CSS меню без использования JS

« : 21.10.2011, 10:59:53 »

Всем доброго дня. Начинаю знакомство с попытки создать свой шаблон. Пусть он будет тривиальный, но свой.
Много идей уже подсмотрел здесь. Однако с реализацией одной из них уже несколько часов мучаюсь. Теперь к делу.
Задумал сделать горизонтальное выпадающее меню , но использовать JS скрипты не хочу но ряду известных факторов (вес страницы и когда у пользователя отключена загрузка JS). Перерыл форум и Гугол - вроде всё просто, но не получается.
Экспериментами дошёл до такого кода:

Код: css

div#topmenu ul  {
margin: 0px;
padding: 0px;
list-style: none;
 float: left;
 display:block;}

div#topmenu ul li{
 list-style:none;
 float:left;
 height:100%;
 position:relative;
 display:block;
 padding:0;
 margin:0; }

div#topmenu ul li a{
 display:block;
 padding:0 15px;
 margin:0;
 line-height:22px;
 color:#646464;
 text-decoration:none;
 font-size:10px;
font-weight:normal;
 text-shadow: #fff 0 1px;}

div#topmenu ul li.active a{
background:#666 ;
 -moz-border-radius: 5px;
 border-radius: 5px;
 font-size:12px; 
color:#fff;
 text-shadow: #666 0 1px;}

div#topmenu ul li a:hover{
display:block;
 text-decoration:none;
 font-weight:normal;
 font-size:12px;
 background:#666 ;
 -moz-border-radius: 5px;
 border-radius: 5px;
 color:#fff;
 text-shadow: #666 0 1px;
 z-index:7;}

div#topmenu ul li ul {
position:absolute;
width:180px;
left:180px;
border-top:0;
 margin:0;
 padding:0;
 display:none;}

div#topmenu ul li :hover ul {
display:block;
/*left:0;*/
z-index:3;}

div#topmenu ul li ul li{
padding:0;
height:auto;
width:180px;
 margin:0 auto;
 border:none;
 text-align: left;
 display:block;}

div#topmenu ul li:hover ul li a {text-shadow:none;}

div#topmenu ul li:hover ul li { background:none; display:none;}

div#topmenu ul li:hover ul li:hover ul{display:block; z-index:4;}

div#topmenu ul li:hover ul li a, #topmenu ul li ul li a, #topmenu ul li.active ul li a{
margin:0;
 padding:0 0 0 10px;
height:22px;
line-height:22px;
 background:#555;
border-bottom:1px solid #3a3a3a;
color:#d1d1d1;
 font-size:10px;
font-weight:normal;
text-shadow:none;
 -moz-border-radius: 0px;
 border-radius: 0px;
 display:block;}

#topmenu ul li ul li a:hover, #topmenu ul li ul li.active a, #topmenu ul li.active ul li a:hover, #topmenu ul li.active ul li.active a {
margin:0;
 padding:0 0 0 10px;
height:22px;
line-height:22px;
background:#343434;
color:#fff;
 font-size:11px;
text-shadow:none;}

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

Заранее спасибо.

« Последнее редактирование: 21.10.2011, 11:40:14 от V-mah »

Записан

AlexSF

Давно я тут
678
68 / 0
В споре истина рождается

Re: Выпадающее CSS меню без использования JS

« Ответ #1 : 21.10.2011, 14:27:06 »

Спасибо за идею, тоже заканчиваю шаблон с фиксированной позицией модуля меню. Но реализовывал модулем со скриптоп а про фактор отключения скриптов позабыл.

Присоединяюсь к вопросу

Записан

Задаёте вопрос - не забудьте приложить ссылку на проблемный сайт
При проблеме с CSS рекомендую использовать Mozilla Firefox и её плагин FireBug
И по максимуму изучите, или поставьте в закладки - http://htmlbook.ru/css
Notepad++ поможет почти в любом деле

zmancer

Давно я тут
519
76 / 19

Re: Выпадающее CSS меню без использования JS

« Ответ #2 : 21.10.2011, 15:46:00 »

http://ruseller.com/lessons.php?rub=2&id=941 там пример и исходники.

Записан

AlexSF

Давно я тут
678
68 / 0
В споре истина рождается

Re: Выпадающее CSS меню без использования JS

« Ответ #3 : 31.10.2011, 13:02:48 »

Цитировать

там пример и исходники.

Это конечно хорошо, но большинство указанных там параметров ограничивают кросбраузерность, так-как используют css3

Реализовал это меню так:
   Несколько раз перечитал эту страницу http://htmlbook.ru/css/hover
   Нашёл это сервис - http://purecssmenu.com и сравнил полученный от него код с указанной выше страницей
   Задал модулю меню суффикс _horizont
   Адаптировал полученный от сервиса код под класс .menu_horizont
   Для отображения стрелок указывающих на наличие субменю в настройках соответствующих "Пунктов меню" задал соответствующие классы .submenu0 (1,2,3....) и прописал их в файле цсс.
   И наконец , задал height: более 100рх для родительского элемента(<div>) в котором располагается #topmenu

« Последнее редактирование: 31.10.2011, 13:15:18 от AlexSF »

Записан

Задаёте вопрос - не забудьте приложить ссылку на проблемный сайт
При проблеме с CSS рекомендую использовать Mozilla Firefox и её плагин FireBug
И по максимуму изучите, или поставьте в закладки - http://htmlbook.ru/css
Notepad++ поможет почти в любом деле

Efanych

Глобальный модератор
4683
644 / 0
Меняю свою жизнь на 360°!

Re: Выпадающее CSS меню без использования JS

« Ответ #4 : 31.10.2011, 13:30:51 »

Всё довольно просто. Второй уровень - это ul в li. То есть так <li><ul><li>.
По умолчанию его видно быть не должно. Значит

Цитировать

li ul {display:none}

А при наведении на родительский li должно показываться. Значит

Цитировать

li:hover ul {display:block}

Это механизм работы выпадающего меню. Дальше нужно настроить, куда оно будет выпадать. Используем position:absolute (это свойство работает относительно ближайшего родительского элемента, которому назначено свойство position:relative)
назначаем li {position:relative} а li ul {position:absolute}
Все ul и li желательно использовать с класами. Например .moduletable_menu li

Записан

Создание сайтов, шаблонов, помощь в решении проблем.

Назначение макета, посредством ссылки в меню Автор xxxLOGIATxxx	Ответов: 20 Просмотров: 9822	04.02.2022, 14:44:14 от hoi
Съезжает меню при наведении Автор yyyuuu	Ответов: 4 Просмотров: 5865	08.12.2020, 11:12:32 от AlexB
Проблемы в горизонтальном меню Joomla 2.5 Автор Димьяна	Ответов: 1 Просмотров: 6554	27.11.2018, 14:58:30 от Ragivort
mod_menu и подписи к пунктам меню (subtitles) Автор St@lker	Ответов: 21 Просмотров: 10119	29.10.2017, 16:24:00 от xilog
Перенос строки в название пункта меню Joomla Автор skitskis	Ответов: 33 Просмотров: 20439	29.10.2017, 10:36:30 от xilog

Выпадающее CSS меню без использования JS - Joomla 2.5: Шаблоны, разметка и макеты вывода

Новости Joomla

Вышли релизы безопасности Joomla 6.1.3 и Joomla 5.4.8

👩‍💻 WT Otpravkapochtaru - библиотека сервиса Отправка Почты России для Joomla-разработчиков.

👩‍💻 В Joomla 6.2 появятся встроенный функционал мультикатегорий.

Выпадающее CSS меню без использования JS

AlexSF

Re: Выпадающее CSS меню без использования JS

zmancer

Re: Выпадающее CSS меню без использования JS

AlexSF

Re: Выпадающее CSS меню без использования JS

Efanych

Re: Выпадающее CSS меню без использования JS

Похожие темы