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

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

Которое из меню? И как оно не верно отображается? А так вроде оба работают...
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

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

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

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

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;
}
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

southklad 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;
}
  • 0
Изображение

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

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

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

#ddmenu ul {
    display: block;
стоит поменять block на none.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

southklad 09 янв 2015, 18:31 Сообщение

меню совсем тогда исчезло
  • 0
Изображение

southklad 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>
  • 0
Изображение

southklad 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>
Вроде все работает. Спасибо за помощь!!!!!!!!!
  • 0
Изображение

Похожие темы