Горизонтальное меню отображается не верно

Различные модификации основанные на html и css.
Интересные дополнения и украшения для вашего стиля.
Помощь при доработке шаблонов вашего стиля.
igorbond

Горизонтальное меню отображается не верно

igorbond 08 янв 2015, 22:38 Сообщение

Вот такая вот проблема, не верно стало отображаться меню, конфликт скорее всего пошел у jquery и mootools , но как бы его перевести полностью на jquery? Вот тут сайт http://southklad.ru
Заранее спасибо

Аватара пользователя
CabinetAdmin

Горизонтальное меню отображается не верно

CabinetAdmin 09 янв 2015, 00:19 Сообщение

Которое из меню? И как оно не верно отображается? А так вроде оба работают...
Хочешь поблагодарить? Есть способы - Поддержать проект

igorbond

Горизонтальное меню отображается не верно

igorbond 09 янв 2015, 00:23 Сообщение

Второе меню, верно потому что я эксперементирую, вот сейчас будет не верно. Можно его как то переделать под jquery но дизайн оставить такой же? Или вообще что делать чтобы норм работало?

igorbond

Горизонтальное меню отображается не верно

igorbond 09 янв 2015, 00:31 Сообщение

В общем если есть возможность можно это меню переделать, чтобы дизайн остался прежним, но было jquery если у вас есть время

Аватара пользователя
CabinetAdmin

Горизонтальное меню отображается не верно

CabinetAdmin 09 янв 2015, 09:09 Сообщение

Тогда надо отказываться от мутулза и всего того, что на нём завязано.

Вот, есть такой вариант на jquery http://spyrestudios.com/coding-a-horizo ... own-menus/
Стили можно попробовать такие:

Код: Выделить всё

#ddmenu { clear: both; display: block; font-size: 11px; margin: 0 auto; overflow: hidden; text-shadow: 0 1px 0 #FFFFFF; width: 920px; } #ddmenu a { display: block; text-decoration: none; } #ddmenu li { cursor: pointer; display: inline; float: left; margin: 0; padding: 0; } #ddmenu li a { color: #0F6DAB; float: left; font-size: 11px; font-weight: bold; margin: 0; padding: 14px; text-transform: uppercase; } #ddmenu li a:hover { background: url("img/tab.png") no-repeat scroll center top transparent; color: #000000; } #ddmenu ul { display: block; overflow: visible; position: absolute; top: 88px; z-index: 1000000000; line-height: 1em; list-style: none outside none; margin: 0 0 0 -2px; padding: 0 2px; } #ddmenu ul li { list-style: none outside none; float: none; } #ddmenu ul li a { background-color: #F3F5C8; color: #302F2F; font-size: 12px; font-weight: bold; padding: 6px 14px; text-align: left; text-shadow: none; float: none; text-transform: none; } #ddmenu ul li a:hover { background-color: #E9E9E9; color: #302F2F; text-shadow: none; }
Хочешь поблагодарить? Есть способы - Поддержать проект

igorbond

Горизонтальное меню отображается не верно

igorbond 09 янв 2015, 17:57 Сообщение

Спасибо, установил по вашей инструкции все норм, только вот что



При загрузке странице меню выпавшее, при наведении исчизает и потом норм? В чем проблема может быть?

Реализовал так:

Код: Выделить всё

<ul id="ddmenu"> <li><a href="http://southklad.ru/poleznye-stati/kak-prodat-monety.html">Как продать монеты?</a></li> <li><a href="http://southklad.ru/forum/viewforum.php?f=23">Аукцион</a></li> <li><a href="http://southklad.ru/katalog-monet">Ценник монет</a></li> <li><a href="http://southklad.ru/cennik-banknot/">Ценник банкнот</a></li> <li><a href="http://southklad.ru/katalog_adrianova/">Каталог Я. Адрианова</a></li> <li><a href="http://southklad.ru/katalog/">Онлайн каталоги</a> <ul> <li><a href="http://southklad.ru/lampy/">Колесики керосиновых ламп</a></li> <li><a title="Каталог деталей и украшений конской упряжи" href="http://allkanina.ru/forum/">Вся Конина</a></li> <li><a href="http://southklad.ru/katalog/medali_sssr/">Каталог Медалей и Орденов СССР</a></li> </ul> </li> </ul> <script type="text/javascript"> $(document).ready(function(){ $('a').on('click', function(e){ e.preventDefault(); }); $('#ddmenu li').hover(function () { clearTimeout($.data(this,'timer')); $('ul',this).stop(true,true).slideDown(200); }, function () { $.data(this,'timer', setTimeout($.proxy(function() { $('ul',this).stop(true,true).slideUp(200); }, this), 100)); }); }); </script>


и стиль ваш, только изменил top: 245px; так как меню выпадало в самом верху. Скажите где ошибся?

Код: Выделить всё

#ddmenu { clear: both; display: block; font-size: 11px; margin: 0 auto; overflow: hidden; text-shadow: 0 1px 0 #FFFFFF; width: 920px; } #ddmenu a { display: block; text-decoration: none; } #ddmenu li { cursor: pointer; display: inline; float: left; margin: 0; padding: 0; } #ddmenu li a { color: #0F6DAB; float: left; font-size: 11px; font-weight: bold; margin: 0; padding: 14px; text-transform: uppercase; } #ddmenu li a:hover { background: url("img/tab.png") no-repeat scroll center top transparent; color: #000000; } #ddmenu ul { display: block; overflow: visible; position: absolute; top: 245px; z-index: 1000000000; line-height: 1em; list-style: none outside none; margin: 0 0 0 -2px; padding: 0 2px; } #ddmenu ul li { list-style: none outside none; float: none; } #ddmenu ul li a { background-color: #F3F5C8; color: #302F2F; font-size: 12px; font-weight: bold; padding: 6px 14px; text-align: left; text-shadow: none; float: none; text-transform: none; } #ddmenu ul li a:hover { background-color: #E9E9E9; color: #302F2F; text-shadow: none; }

Аватара пользователя
CabinetAdmin

Горизонтальное меню отображается не верно

CabinetAdmin 09 янв 2015, 18:28 Сообщение

Наверно здесь:

Код: Выделить всё

#ddmenu ul { display: block;

стоит поменять block на none.
Хочешь поблагодарить? Есть способы - Поддержать проект


igorbond

Горизонтальное меню отображается не верно

igorbond 09 янв 2015, 19:06 Сообщение

Странно начал эксперементировать с этим кодом, так он оказывается отрубает все ссыдки на странице, нажатие просто не работает

Код: Выделить всё

  <script type="text/javascript"> $(document).ready(function(){ $('a').on('click', function(e){ e.preventDefault(); }); $('#ddmenu li').hover(function () { clearTimeout($.data(this,'timer')); $('ul',this).stop(true,true).slideDown(200); }, function () { $.data(this,'timer', setTimeout($.proxy(function() { $('ul',this).stop(true,true).slideUp(200); }, this), 100)); }); }); </script>

igorbond

Горизонтальное меню отображается не верно

igorbond 09 янв 2015, 19:43 Сообщение

Все решил все сам.

Вот стиль:

Код: Выделить всё

#ddmenu { clear: both; display: block; font-size: 11px; margin: 0 auto; overflow: hidden; text-shadow: 0 1px 0 #FFFFFF; width: 920px; } #ddmenu a { display: block; text-decoration: none; } #ddmenu li { cursor: pointer; display: inline; float: left; margin: 0; padding: 0; } #ddmenu li a { color: #0F6DAB; float: left; font-size: 11px; font-weight: bold; margin: 0; padding: 14px; text-transform: uppercase; } #ddmenu li a:hover, #ddmenu li a:focus { background: url("ссылка на вашу иконку/img/tab.png") no-repeat scroll center top transparent; color: #000000; } #ddmenu ul { display: none; overflow: visible; position: absolute; z-index: 1000000000; line-height: 1em; list-style: none outside none; margin: 35px 0 0 -2px; padding: 0 2px; } #ddmenu ul li { list-style: none outside none; float: none; list-style: none outside none; } #ddmenu ul li a { background-color: #F3F5C8; color: #302F2F; font-size: 12px; font-weight: bold; padding: 6px 14px; text-align: left; text-shadow: none; float: none; text-transform: none; } #ddmenu ul li a:hover { background-color: #E9E9E9; color: #302F2F; text-shadow: none; }


Само меню:

Код: Выделить всё

<div id="w"> <nav> <ul id="ddmenu"> <li><a href="#">Homepage</a></li> <li><a href="#">About</a> <ul> <li><a href="#">Our Mission</a></li> <li><a href="#">The Team</a></li> <li><a href="#">History</a></li> </ul> </li> <li><a href="#">Products</a> <ul> <li><a href="#">Pre-Built Logos</a></li> <li><a href="#">Web Templates</a></li> <li><a href="#">Icon Sets</a></li> <li><a href="#">jQuery Plugins</a></li> <li><a href="#">Internet Marketing</a></li> </ul> </li> <li><a href="#">International</a> <ul> <li><a href="#">China</a></li> <li><a href="#">Japan</a></li> <li><a href="#">Canada</a></li> <li><a href="#">Australia</a></li> <li><a href="#">South America</a></li> </ul> </li> <li><a href="#">Contact Us</a></li> </ul> </nav> </div>


и скрипт, убрал первую строчку:

Код: Выделить всё

<script type="text/javascript"> $(document).ready(function(){ $('#ddmenu li').hover(function () { clearTimeout($.data(this,'timer')); $('ul',this).stop(true,true).slideDown(200); }, function () { $.data(this,'timer', setTimeout($.proxy(function() { $('ul',this).stop(true,true).slideUp(200); }, this), 100)); }); }); </script>


Вроде все работает. Спасибо за помощь!!!!!!!!!


Похожие темы

Вернуться в «HTML модификации»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость