>
К О М М У Н И С Т
ПРОЛЕТАРИИ ВСЕХ СТРАН, СОЕДИНЯЙТЕСЬ!
Меню горизонтальное с выпадающими вкладками подменю
Пионер
MarkoniYA Дата: Пятница, 31.05.2013, 07:10 | Сообщение # 1
Загрузка наград ...
Сообщений: 832
Установите код в нужное место. Для работы необходима библиотека 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
Загрузка наград ...
Сообщений: 832
Здравствуйте. Пропишите перед скриптом: Код
<!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
Загрузка наград ...
Сообщений: 832
Цитата Админ (
)
К сожалению, проблема не решена.
Я проверял в 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
Загрузка наград ...
Сообщений: 832
На втором сайте верхнее меню в IE работает без проблем. А на первом не знаю, ковыряться долго, по быстрому не нашел.
Коммунизм есть высшая ступень развития социализма, когда люди работают из сознания необходимости работать на общую пользу. © В.И.Ленин
Статус: Offline
Октябрёнок
Админ Дата: Вторник, 12.08.2014, 22:07 | Сообщение # 8
Загрузка наград ...
Сообщений: 6
Спасибо огромное. Да не надо ковыряться, вы и так мне помогли.
Статус: Offline
Пионер
MarkoniYA Дата: Вторник, 12.08.2014, 22:34 | Сообщение # 9
Загрузка наград ...
Сообщений: 832
Вот смотрите я ваш код страницы полностью скопировал, добавил в самое начало страницы этот кодКод
<!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
Загрузка наград ...
Сообщений: 832
Смотрю все таки победили, все работает.
Коммунизм есть высшая ступень развития социализма, когда люди работают из сознания необходимости работать на общую пользу. © В.И.Ленин
Статус: Offline