Вопрос по выпадающему меню

julie83 · September 3, 2010

Народ, если у кого-то будет желание, подскажите как исправить ошибки.

За основу был взят шаблон выпадающего вертикального меню.

Изменения в файл .js не вносились.

1. При открытии в браузере элементы выпадающего меню не скрыты.

2. В IE 6 при наведении на пункты меню последние не меняют цвет.

Спасибо!

Файлы здесь

Trayanez · September 3, 2010

я чет понять не могу зачем такой сложный скрипт для выпадающего меню!!! я в нем не стал особо разбираться...

короч чтоб много не писать, я вставил скриптик попроще для менюшки и настроил ее так как ты хотел: в итоге в header код стал такой

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title></title>
<link rel="stylesheet" href="temp-for-menu.css" type="text/css">

	<link rel="stylesheet" type="text/css" href="sdmenu/sdmenu.css" />
	<script type="text/javascript" src="sdmenu/jquery.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		$(".btn-slide").click(function(){
			$("#panel").slideToggle("slow");
			$(this).toggleClass("active"); return false;
		});	 
	});
</script>

</head>

и кусок кода где твое раскрывающееся меню стал такой

<div id="my_menu" class="sdmenu">
	  <div>
		<span class="btn-slide">Выпадающее меню</span>
			<div id="panel" style="display:none;">
				<a href="index.html">Image Optimizer</a>
				<a href="index.html">FavIcon Generator</a></div>
			</div>
<a href="index.html" class="links">Не выпадает</a>

 </div>

и не забудь закинуть файл jquery.js в папку, тогда все работает как ты и хотел!!!(по поводу первого вопроса),

по поводу второго вопроса сходу сказать не могу, так как не могу потестить из-за отсутсвия IE6 на рабочем компе

по второму вопросу советую почитать вот эту статью

http://joomlaforum.ru/index.php?topic=46060.0

julie83 · September 3, 2010

Большое спасибо!

jenyaz · September 22, 2010

Народ, если у кого-то будет желание, подскажите как исправить ошибки.
За основу был взят шаблон выпадающего вертикального меню.
Изменения в файл .js не вносились.
1. При открытии в браузере элементы выпадающего меню не скрыты.
2. В IE 6 при наведении на пункты меню последние не меняют цвет.
Спасибо!

Всегда пиши сам скрипты, пускай будет не такой навороченный код, но ты напишешь его сам, да иногда надо использовать уже готовые скрипты и по необходимости корректить его но таккая тема как выпадающее меню пишется гораздо проще. Написал скрипт быстро в принципе, мой пример НЕ эталон выпадающего меню, но достаточно чистого JQuery.Написал, чтобы ты посмотрел просто как делать, в эксплорере там полная фигня, но для примера пойдет

вставь этот код, скачай jquery min и вставь в пустой хтмл файл

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<style>

div{

background-color:#0000CC;

font-family:Georgia, "Times New Roman", Times, serif;

overflow:visible;

}

ul li{list-style:none;margin-right:15px;position:relative;display:inline;}

ul li a{

color:#FFFFFF;

text-decoration:none;

}

.yo {

position:absolute;

width:200px;

left:0;

top:18px;

_left:-41px;

}

*+html .yo{

left:-41px;

}

ul li ul{

background-color:#333333;

padding:5px;

border:1px solid #FFF;

}

ul li ul li {

padding:5px 0 5px 10px;

margin:0 !important;

position:relative;

display:block;

border:1px solid #FFF;

}

.right_menu{

position:absolute;

left:200px;

top:-7px;

width:150px;

margin:0 !important;

background-color:#666666;

}

</style>

<body>

<div>

<ul>

<li><a href="#">About Us</a>

<li><a href="#">Sector 1</a>

<ul>

<li><a href="#">Sector 3</a></li>

</ul>

</li>

<li><a href="#">Sector 1</a></li>

</ul>

</li>

<li><a href="#">Services of Company</a>

<li><a href="#">Sector 1</a></li>

</ul>

</li>

</ul>

</div>

$('ul li ul').hide();

$('ul li').hover(function(){

$(this).find('.yo').show();},

function(){$(this).find('.yo').hide();}

);

$('ul li ul li').hover(

function(){$(this).find('ul').addClass('right_menu').show();},

function(){$(this).find('ul').addClass('right_menu').hide();}

);

</script>

</body>

</html>

Sign In

Вопрос по выпадающему меню

Question

julie83

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Trayanez

Link to comment

Share on other sites

julie83

Link to comment

Share on other sites

jenyaz

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information