Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.70/10: Рейтинг темы: голосов - 10, средняя оценка - 4.70
Proffessional
Особый статус
694 / 142 / 5
Регистрация: 16.07.2009
Сообщений: 2,129
Записей в блоге: 1
1

Выпадающее меню на JQuery

01.12.2010, 15:29. Просмотров 1870. Ответов 5

Ребята, чувствую себя идиотом, но уже перестал что-либо понимать. Есть такой простенький код.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Site</title>
<style type="text/css">
<!--
body {
    background-color: #999;
    background-image: url(Top.jpg);
    background-repeat: repeat-x;
}
#headVolchok {
    background:url(Volchok1.png) left no-repeat;
}
#menu{
    list-style:none;
    float:right;
    padding-right: 30px;
}
#menu li{
    float:left;
    padding:10px;
    padding-right:15px;
    border-left:solid #fff 1px;
    list-style:none;
    display:block;
}
#menu li:hover{
    cursor:pointer;
    background:#C0C0C0;
}
#moreMenu li{
    float:none;
    border-left:solid #fff 1px;
    display:block;
}
#moreMenu{
    display:none;
}
-->
</style>
<script type="text/javascript">
function hide(){
    $("#moreMenu").slideUp('slow');
}
function show(){
    $("#moreMenu").slideDown('slow');
}
</script>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
 
</head>
<body> 
<table width="800" border="0" align="center">
  <tr>
    <td width="618" height="354" align="left" valign="top">
    <ul id="menu">
    <li>Новости</li>
    <li>Новости</li>
    <li>Игры</li>
    <li>Правила 2010</li>
    <li onMouseOver="show()" onMouseOut="hide()">Больше</li>
    <ul style="position:relative" id="moreMenu">
    <li >Вот и больше!</li>
    <li>More</li>
    </ul>
    </ul>
    </td>
  </tr>
  <tr>
    <td width="130" colspan="0" align="left" valign="top"></td>
  </tr>
</table>
</body>
</html>
Просто плавно выпадающее меню. Но вместо меню получается безобразие. Уже долго смотрю в код, и никак не понять, в чём дело. Наверное, слишком запарился с программированеи.
Помогите, ребята, что не так? А то уже ... себе кажусь
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
01.12.2010, 15:29
Ответы с готовыми решениями:

Выпадающее меню. Не фиксируется бордер раздела меню, при использовании подменю
Делаю выпадающее меню, почти все сделал, осталось по сути немного, и не могу закончить. Вот код:...

Выпадающее меню - разный размер шрифта для разных уровней меню
Есть у меня данный список, но возник вопрос: &quot;как сделать чтобы в надписи буквы1 был шрифт 19px, а...

Выпадающее меню
Доброго времени. Есть выпадающее меню, как сделать, что бы пункты выезжали по нажатию на их и...

Выпадающее меню
Всем привет. Я в этом деле новичок.....подскажите пожалуйста, как создать на странице выпадающее...

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

5
Good-bad man
255 / 233 / 38
Регистрация: 31.10.2010
Сообщений: 504
01.12.2010, 17:29 2
Код
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Site</title>
<style type="text/css">
<!--
body {
        background-color: #999;
        background-image: url(Top.jpg);
        background-repeat: repeat-x;
}
#headVolchok {
        background:url(Volchok1.png) left no-repeat;
}
#menu{
        list-style:none;
        float:right;
        padding-right: 30px;
}
#menu li{
        float:left;
        padding:10px;
        padding-right:15px;
        border-left:solid #fff 1px;
        list-style:none;
        display:block;
}
#menu li:hover{
        cursor:pointer;
        background:#C0C0C0;
}
#moreMenu li{
        float:none;
        border-left:solid #fff 1px;
        display:block;
}
#openMoreMenu{
        width:200px;
}
#moreMenu{
        display:none;
}
-->
</style>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("li#openMoreMenu").mouseover(function(){
            $("#moreMenu").slideDown('slow');
        }).mouseleave(function(){
            $("#moreMenu").slideUp('slow');
        });
    });
</script>
 
</head>
<body>
<table width="800" border="0" align="center">
  <tr>
    <td width="618" height="354" align="left" valign="top">
    <ul id="menu">
    <li>Новости</li>
    <li>Новости</li>
    <li>Игры</li>
    <li>Правила 2010</li>
    <li id="openMoreMenu">Больше
    <ul style="position:relative" id="moreMenu">
    <li>Вот и больше!</li>
    <li>More</li>
    </ul></li>
    </ul>
    </td>
  </tr>
  <tr>
    <td width="130" colspan="0" align="left" valign="top"></td>
  </tr>
</table>
</body>
</html>
1
Proffessional
Особый статус
694 / 142 / 5
Регистрация: 16.07.2009
Сообщений: 2,129
Записей в блоге: 1
01.12.2010, 17:38  [ТС] 3
Спасибо, Good-bad man, но как-то получается тоже самое. Нужно сделать меню подобное этому, но без перемычки и справа.
Чего-то не получается.
0
Миниатюры
Выпадающее меню на JQuery  
Good-bad man
255 / 233 / 38
Регистрация: 31.10.2010
Сообщений: 504
01.12.2010, 17:46 4
А так?
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Site</title>
<style type="text/css">
<!--
body {
        background-color: #999;
        background-image: url(Top.jpg);
        background-repeat: repeat-x;
}
#headVolchok {
        background:url(Volchok1.png) left no-repeat;
}
#menu{
        list-style:none;
        float:right;
        padding-right: 30px;
}
#menu li{
        float:left;
        padding:10px;
        padding-right:15px;
        border-left:solid #fff 1px;
        list-style:none;
        display:block;
}
#menu li:hover{
        cursor:pointer;
        background:#C0C0C0;
}
#moreMenu li{
        float:none;
        border-left:solid #fff 1px;
        display:block;
}
#moreMenu{
        display:none;
        margin-top:50px;
}
-->
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("li#openMoreMenu").mouseover(function(){
            $("#moreMenu").slideDown('slow');
        });
        $("ul#moreMenu").mouseleave(function(){
            $("#moreMenu").slideUp('slow');
        });
    });
</script>
 
</head>
<body>
<table width="800" border="0" align="center">
  <tr>
    <td width="618" height="354" align="left" valign="top">
    <ul id="menu">
    <li>Новости</li>
    <li>Новости</li>
    <li>Игры</li>
    <li>Правила 2010</li>
    <li id="openMoreMenu">Больше</li>
    <ul style="position:relative" id="moreMenu">
    <li>Вот и больше!</li>
    <li>More</li>
    </ul>
    </ul>
    </td>
  </tr>
  <tr>
    <td width="130" colspan="0" align="left" valign="top"></td>
  </tr>
</table>
</body>
</html>
1
Proffessional
Особый статус
694 / 142 / 5
Регистрация: 16.07.2009
Сообщений: 2,129
Записей в блоге: 1
01.12.2010, 19:20  [ТС] 5
Вот странная такая штука: работает, но только в FF. В остальных в момент разворачивания всё съезжает влево, освобождая место появляющемуся пункту. Причём пункт всё так же стоит левее центра, а должен быть справа. Я запутался.
0
Proffessional
Особый статус
694 / 142 / 5
Регистрация: 16.07.2009
Сообщений: 2,129
Записей в блоге: 1
09.12.2010, 14:19  [ТС] 6
Не получилось так, как я хотел. Пришлось сделать отдельным дивом, смотрится хорошо, но вот не знаю как поисковики будут смотреть на это.
0
09.12.2010, 14:19
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
09.12.2010, 14:19

Выпадающее меню
У меня вопрос - как сделать что б при клики на одном из меню сайта под ним выпадали категории?

Выпадающее меню
Приветствую, господа! Имеется статичное меню такого вида: http://pixelpie.ru/public/menu.png Вот...

Выпадающее меню
Всем привет, у меня маленькая проблема такая. Есть выпадающее меню и под ним блок, но когда я...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru