Вот такая вот проблема, не верно стало отображаться меню, конфликт скорее всего пошел у jquery и mootools , но как бы его перевести полностью на jquery? Вот тут сайт http://southklad.ru
Заранее спасибо
Заранее спасибо
Комментарии: 9
Тогда надо отказываться от мутулза и всего того, что на нём завязано.
Вот, есть такой вариант на jquery http://spyrestudios.com/coding-a-horizo ... own-menus/
Стили можно попробовать такие:
Вот, есть такой вариант на 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;
}
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Спасибо, установил по вашей инструкции все норм, только вот что
При загрузке странице меню выпавшее, при наведении исчизает и потом норм? В чем проблема может быть?
Реализовал так:
и стиль ваш, только изменил top: 245px; так как меню выпадало в самом верху. Скажите где ошибся?
При загрузке странице меню выпавшее, при наведении исчизает и потом норм? В чем проблема может быть?
Реализовал так:
Код: Выделить всё
<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>
Код: Выделить всё
#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;
}
Странно начал эксперементировать с этим кодом, так он оказывается отрубает все ссыдки на странице, нажатие просто не работает
Код: Выделить всё
<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>
Все решил все сам.
Вот стиль:
Само меню:
и скрипт, убрал первую строчку:
Вроде все работает. Спасибо за помощь!!!!!!!!!
Вот стиль:
Код: Выделить всё
#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>
Похожие темы
-
Не отображается боковая панель на некоторых страницах? на странице профиля, странице личных сообщений и т.д. Когда его не видно, его место должна...
-
Расширение позволяющее добавить на форум свой стиль, скрипт или блок с произвольным содержимым. В расширении можно задать шапку форума, ico иконку...