Меню горизонтальное с выпадающими вкладками подменю
|
|
Пионер
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 |
|
|