Форум поддержки пользователей ZeroParking

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Форум поддержки пользователей ZeroParking » Галерея скриптов » Создаем выплывающее меню <


Создаем выплывающее меню <

Сообщений 1 страница 13 из 13

1

Первым действием создадим небольшой список, который в последствии и станет нашим меню

Код:
<ul id="menu-css">
<li>1<ul><li>Подсказка 1</li></ul></li>
<li>2<ul><li>Подсказка 2</li></ul></li>
<li>3<ul><li>Подсказка 3</li></ul></li>
<li>4<ul><li>Подсказка 4</li></ul></li>
</ul>

и предадим ему вид горизонтального меню

Код:
<style type="text/css">
#menu-css
{
	margin: 0; 
	padding: 0; 
	list-style: none; 
}
#menu-css li
{ 
	position: relative; 
	float: left;
	margin: 3px;
}
</style>

Теперь спрячем подсказки, ведь они должны появляться только при наведении мышки

Код:
<style type="text/css">
li ul 
{ 
	position: absolute; 
	display: none; 
	border: 1px solid black;
	background: #DADADA
}
</style>

Ну и наконец, последним действием мы заставим подсказку появляться при наведении мышки на текст

Код:
<style type="text/css">
li:hover ul{display: block;}
</style>


Тема создана для того, чтобы откорректировать данную инструкцию и она стала понятной для пользователей. Потому здесь может быть задан вопрос :)

+3

2

А как сделать так, чтобы это меню посередине было?

0

3

Sara
<center>Код меню</center>

0

4

Вот то что я в объявление поставила, а меню всё равно слева.

Код:
<center><ul id="menu-css">
<li><img src="https://forumupload.ru/uploads/000c/98/80/33-1.jpg"> <ul><li>Подсказка 1</li></ul></li>
<li>Текст<ul><li>Подсказка 2</li></ul></li>
<li>Текст<ul><li>Подсказка 3</li></ul></li>
<li>Текст<ul><li>Подсказка 4</li></ul></li>
</ul>
<style type="text/css">#menu-css{margin: 0; padding: 0; list-style: none; }#menu-css li{ 
position: relative; float: left;margin: 3px;}</style><style type="text/css">li ul { position: absolute; 
display: none; border: 1px solid black;background: #000000}</style><style type="text/css">
li:hover ul{display: block;}</style></center>

0

5

<style type="text/css">#menu-css{margin: 0; padding: 0; list-style: none; text-align: center;}#menu-css li{
position: relative; float: left;margin: 3px;}</style><style type="text/css">li ul { position: absolute;
display: none; border: 1px solid black;background: #000000}
li:hover ul{display: block;}</style>

замените свой цсс этим

0

6

mkusher
не действует. :'(

0

7

Sara
А можно сделать хитро, да)
Распределите еще 182 пикселя длины между крайними картинками например: может добавьте черного у самой левой и правой картинки.
А можно распределить их между всеми картинками, хи)
Экспериментируйте!)

0

8

ой, простите забыл совсем

<style type="text/css">#menu-css{margin: 0 0 0 50px; padding: 0; list-style: none; }#menu-css li{
position: relative; float: left;margin: 3px;}</style><style type="text/css">li ul { position: absolute;
display: none; border: 1px solid black;background: #000000}</style><style type="text/css">
li:hover ul{display: block;}</style>

циферку меняйте пока по середине не станет

0

9

Код:
float: left

вродь это нужно поменять на center...

вопрос... а как сделать, чтоб меню появлялась справо, а не снизу?

Отредактировано FruNya (2010-11-27 23:56:16)

0

10

чо то не хочет работать  :'(

0

11

Милая штука, как раз то, что мне надо. А можно как-то проставить ширину выплывающего блока?

0

12

А надо вставлять хтмл верх, низ или куда?

0

13

Яна :3
попробуйте в объявление поставить

0


Вы здесь » Форум поддержки пользователей ZeroParking » Галерея скриптов » Создаем выплывающее меню <


Рейтинг форумов | Создать форум бесплатно