К О М М У Н И С Т
ПРОЛЕТАРИИ ВСЕХ СТРАН, СОЕДИНЯЙТЕСЬ!
Меню горизонтальное с выпадающими вкладками подменю
Пионер
MarkoniYA Дата: Пятница, 31.05.2013, 07:10 | Сообщение # 1
Загрузка наград ...
Сообщений: 830
Установите код в нужное место. Для работы необходима библиотека jQuery, на сайтах Ucoz она уже подключена.
Код
<style> #menu { /* -- Фон меню --*/ background: #D2691E; border-bottom: 1px solid #abacad; /* -- Высота меню --*/ height: 37px; margin-bottom: 15px; /* -- Размер шрифта меню --*/ font-size: 16px; /* -- Закругляем углы --*/ -ms-border-radius: 5px 5px 5px 5px; -o-border-radius: 5px 5px 5px 5px; -khtml-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; /* -- Добаляем тени --*/ -ms-box-shadow: 0px 2px 2px #DDDDDD; -o-box-shadow: 0px 2px 2px #DDDDDD; box-shadow: 0px 2px 2px #DDDDDD; padding: 0px 5px; } #menu ul { list-style: none; margin: 0; padding: 0; } #menu > ul > li { position: relative; float: left; z-index: 20; } #menu > ul > li:hover { /* -- Цвет фона ссылок подменю --*/ background: #FFD700; } #menu > ul > li > a { /* -- Размер шрифта подменю --*/ font-size: 15px; /* -- Цвет ссылок подменю --*/ color: #FFF; line-height: 14px; text-decoration: none; display: block; /* -- Отступы подменю --*/ padding: 12px 15px 11px 15px; z-index: 6; position: relative; } #menu > ul > li > div { display: none; background: #FFFFFF; position: absolute; z-index: 5; padding: 5px; border: 1px solid #034281; -o-border-radius: 0px 0px 5px 5px; -ms-border-radius: 0px 0px 5px 5px; -khtml-border-radius: 0px 0px 5px 5px; border-radius: 0px 0px 5px 5px; background: #DAA520; } #menu > ul > li:hover > div { display: table; } #menu > ul > li > div > ul { display: table-cell; } #menu > ul > li ul + ul { padding-left: 20px; } #menu > ul > li ul > li > a { text-decoration: none; padding: 4px; color: #FFFFFF; display: block; white-space: nowrap; min-width: 120px; } #menu > ul > li ul > li > a:hover { background: #B8860B; } #menu > ul > li > div > ul > li > a { color: #FFFFFF; } </style> <div id="menu"> <ul> <li> <a href="#">Главная</a> <div> <ul> <li><a href="#">Скрипты для uCoz</a></li> <li><a href="#">Фоны</a></li> <li><a href="#">Справочник CSS3</a></li> <li><a href="#">Полезные ресурсы</a></li> <li><a href="#">Финал</a></li> </ul> </div> </li> <li><a href="#">Комунист</a> <div> <ul> <li><a href="#">Демотиваторы</a></li> <li><a href="#">Мотиваторы</a></li> <li><a href="#">Форум</a></li> </ul> </div> </li> <li><a href="#">Генераторы градиентов</a> <div> <ul> <li><a href="#">Генератор градиентов</a></li> <li><a href="#">Генератор цветов</a></li> <li><a href="#">Генератор фонов</a></li> </ul> </div> </li> <li><a href="#">Контакты</a> <div> <ul> <li><a href="#">Е - майл</a></li> <li><a href="#">Сайт</a></li> <li><a href="#">Страница соц сети</a></li> <li><a href="#">Местоположение</a></li> </ul> </div> </li> </ul> </div>
Что бы посмотреть пример и проверить работоспособность скрипта вставьте код в форму. Замените в коде # на ссылки на Ваши страницы.
Коммунизм есть высшая ступень развития социализма, когда люди работают из сознания необходимости работать на общую пользу. © В.И.Ленин
Статус: Offline
Октябрёнок
Админ Дата: Вторник, 12.08.2014, 10:47 | Сообщение # 2
Загрузка наград ...
Сообщений: 6
Добрый день! Помогите подправить ваше замечательное меню для IE. Когда раскрываю вкладку, получается то, что видно на рисунке. Нажав на эту штучку, вкладка раскрывается. Спасибо. http://s017.radikal.ru/i421/1408/f6/ec765587e7c3.jpg
Статус: Offline
Пионер
MarkoniYA Дата: Вторник, 12.08.2014, 13:29 | Сообщение # 3
Загрузка наград ...
Сообщений: 830
Здравствуйте. Пропишите перед скриптом: Код
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Если Ваш сайт на ucoz, то в Панели управления сайтом - Настройки - Общие настройки - Значение тега DOCTYPE пропишите этот код, это поможет устранить большинство проблем совместимости с браузером IE.
Коммунизм есть высшая ступень развития социализма, когда люди работают из сознания необходимости работать на общую пользу. © В.И.Ленин
Статус: Offline
Октябрёнок
Админ Дата: Вторник, 12.08.2014, 18:48 | Сообщение # 4
Загрузка наград ...
Сообщений: 6
Цитата MarkoniYA (
)
Пропишите перед скриптом:
Большое спасибо. Сейчас попробую.Добавлено (12.08.2014, 18:48) --------------------------------------------- К сожалению, проблема не решена.
Статус: Offline
Пионер
MarkoniYA Дата: Вторник, 12.08.2014, 20:07 | Сообщение # 5
Загрузка наград ...
Сообщений: 830
Цитата Админ (
)
К сожалению, проблема не решена.
Я проверял в IE у меня все работает. Проверьте скрипт, может где то стерли что нибудь лишнее. P.S. Проверил еще раз. Все работает. Проблема не в скрипте.
Коммунизм есть высшая ступень развития социализма, когда люди работают из сознания необходимости работать на общую пользу. © В.И.Ленин
Статус: Offline
Октябрёнок
Админ Дата: Вторник, 12.08.2014, 20:38 | Сообщение # 6
Загрузка наград ...
Сообщений: 6
Вряд ли я что то стерла,т.к. везде работает, скорее лишнее написала. Гляньте, если не трудно визуально, может конфликтует с чем: http://sch83-rostovdon.ru/ здесь вообще не открывается, а на втором( я здесь тренируюсь) та проблема, о которой писала выше. http://proba83.ucoz.ru, Но это не обязательно, только при наличии желания и свободного время. И так спасибо за участие.
Статус: Offline
Пионер
MarkoniYA Дата: Вторник, 12.08.2014, 21:56 | Сообщение # 7
Загрузка наград ...
Сообщений: 830
На втором сайте верхнее меню в IE работает без проблем. А на первом не знаю, ковыряться долго, по быстрому не нашел.
Коммунизм есть высшая ступень развития социализма, когда люди работают из сознания необходимости работать на общую пользу. © В.И.Ленин
Статус: Offline
Октябрёнок
Админ Дата: Вторник, 12.08.2014, 22:07 | Сообщение # 8
Загрузка наград ...
Сообщений: 6
Спасибо огромное. Да не надо ковыряться, вы и так мне помогли.
Статус: Offline
Пионер
MarkoniYA Дата: Вторник, 12.08.2014, 22:34 | Сообщение # 9
Загрузка наград ...
Сообщений: 830
Вот смотрите я ваш код страницы полностью скопировал, добавил в самое начало страницы этот кодКод
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
У меня все работает Почему вы не хотите прописать код в в Панели управления сайтом - Настройки - Общие настройки - Значение тега DOCTYPE?
Коммунизм есть высшая ступень развития социализма, когда люди работают из сознания необходимости работать на общую пользу. © В.И.Ленин
Статус: Offline
Октябрёнок
Админ Дата: Среда, 13.08.2014, 07:51 | Сообщение # 10
Загрузка наград ...
Сообщений: 6
Я пыталась, но ничего не произошло. Смотрю у вас нормально на скрине. Попробую еще раз.Спасибо.Добавлено (13.08.2014, 07:46) --------------------------------------------- Поставила. Но получилось так http://s019.radikal.ru/i618/1408/02/14d2488715d0.jpg Надо сказать, что благодаря этому коду, открылась выезжающая панель, которая до этого в IE не работала.
Добавлено (13.08.2014, 07:51) --------------------------------------------- Да забыла уточнить. Такая картина получается при повторном открытии вкладок. Первый раз открывается правильно. Извините что гружу своими проблемами.
Статус: Offline
Пионер
MarkoniYA Дата: Вторник, 14.10.2014, 17:42 | Сообщение # 11
Загрузка наград ...
Сообщений: 830
Смотрю все таки победили, все работает.
Коммунизм есть высшая ступень развития социализма, когда люди работают из сознания необходимости работать на общую пользу. © В.И.Ленин
Статус: Offline