Меню горизонтальное с выпадающими вкладками подменю - Форум
К О М М У Н И С Т

ПРОЛЕТАРИИ ВСЕХ СТРАН, СОЕДИНЯЙТЕСЬ!


[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » В помощь вебмастеру Ucoz » Скрипты для сайтов Ucoz » Меню горизонтальное с выпадающими вкладками подменю (без картинок, чистый код)
Меню горизонтальное с выпадающими вкладками подменю
Пионер MarkoniYAДата: Пятница, 31.05.2013, 07:10 | Сообщение # 1


Загрузка наград ...
Сообщений: 830
Награды: 1  +
Репутация: 1  ±
Установите код в нужное место. Для работы необходима библиотека 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
Награды: 0  +
Репутация: 0  ±
Добрый день! Помогите подправить ваше замечательное меню для IE. Когда раскрываю вкладку, получается то, что видно на рисунке. Нажав на эту штучку, вкладка раскрывается. Спасибо.
http://s017.radikal.ru/i421/1408/f6/ec765587e7c3.jpg

Статус: Offline
Пионер MarkoniYAДата: Вторник, 12.08.2014, 13:29 | Сообщение # 3


Загрузка наград ...
Сообщений: 830
Награды: 1  +
Репутация: 1  ±
Здравствуйте. Пропишите перед скриптом:

Код
<!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
Награды: 0  +
Репутация: 0  ±
Цитата MarkoniYA ()
Пропишите перед скриптом:
Большое спасибо. Сейчас попробую.

Добавлено (12.08.2014, 18:48)
---------------------------------------------
К сожалению, проблема не решена.

Статус: Offline
Пионер MarkoniYAДата: Вторник, 12.08.2014, 20:07 | Сообщение # 5


Загрузка наград ...
Сообщений: 830
Награды: 1  +
Репутация: 1  ±
Цитата Админ ()
К сожалению, проблема не решена.
Я проверял в IE у меня все работает. Проверьте скрипт, может где то стерли что нибудь лишнее.
P.S. Проверил еще раз. Все работает. Проблема не в скрипте.



Коммунизм есть высшая ступень развития социализма, когда люди работают из сознания необходимости работать на общую пользу. © В.И.Ленин


Статус: Offline
Октябрёнок АдминДата: Вторник, 12.08.2014, 20:38 | Сообщение # 6


Загрузка наград ...
Сообщений: 6
Награды: 0  +
Репутация: 0  ±
Вряд ли я что то стерла,т.к. везде работает, скорее лишнее написала. Гляньте, если не трудно визуально, может конфликтует с чем:
http://sch83-rostovdon.ru/ здесь вообще не открывается, а на втором( я здесь тренируюсь) та проблема, о которой писала выше.
http://proba83.ucoz.ru, Но это не обязательно, только при наличии желания и свободного время. И так спасибо за участие.

Статус: Offline
Пионер MarkoniYAДата: Вторник, 12.08.2014, 21:56 | Сообщение # 7


Загрузка наград ...
Сообщений: 830
Награды: 1  +
Репутация: 1  ±
На втором сайте верхнее меню в IE работает без проблем. А на первом не знаю, ковыряться долго, по быстрому не нашел.


Коммунизм есть высшая ступень развития социализма, когда люди работают из сознания необходимости работать на общую пользу. © В.И.Ленин


Статус: Offline
Октябрёнок АдминДата: Вторник, 12.08.2014, 22:07 | Сообщение # 8


Загрузка наград ...
Сообщений: 6
Награды: 0  +
Репутация: 0  ±
Спасибо огромное. Да не надо ковыряться, вы и так мне помогли.
Статус: Offline
Пионер MarkoniYAДата: Вторник, 12.08.2014, 22:34 | Сообщение # 9


Загрузка наград ...
Сообщений: 830
Награды: 1  +
Репутация: 1  ±
Вот смотрите я ваш код страницы полностью скопировал, добавил в самое начало страницы этот код
Код
<!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
Награды: 0  +
Репутация: 0  ±
Я пыталась, но ничего не произошло. Смотрю у вас нормально на скрине. Попробую еще раз.Спасибо.

Добавлено (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
Награды: 1  +
Репутация: 1  ±
Смотрю все таки победили, все работает.


Коммунизм есть высшая ступень развития социализма, когда люди работают из сознания необходимости работать на общую пользу. © В.И.Ленин


Статус: Offline
Форум » В помощь вебмастеру Ucoz » Скрипты для сайтов Ucoz » Меню горизонтальное с выпадающими вкладками подменю (без картинок, чистый код)
  • Страница 1 из 1
  • 1
Поиск:
Вся власть Советам!
Яндекс.Метрика Главная страница Правила & Информация