Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Социальные группы Поиск Сообщения за день Заказать работу  
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
0 / 0 / 0
Регистрация: 10.01.2016
Сообщений: 6
1

Подскажите по CSS меню

17.05.2010, 08:20. Показов 710. Ответов 2
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Здраствуйте, помогите пожалуйста с практическим заданием на курсовую, ничего не получается , а задание такое, необходимо создать меню что бы при наведении курсора на пункт меню справа выходило краткое содержание, а при выборе пункта меню информация выводилась в фреим, прилагаю файлик который наварганил ПОМОГИТЕ ПОЖАЛУЙСТА

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
.header {height:60px; background-color:#717dc9; padding:20px; text-align:center}
.left_col {width:120px; height:460px; background-color:#dddddd; padding:15px; vertical-align:top}
.center_col {background-color:#ffffff; padding:15px; vertical-align:top}
.right_col {width:120px; background-color:#dddddd; padding:15px; vertical-align:top}
.footer {padding:10px 0 10px 20px; background-color:#717dc9; font-size:13px}
 
/* CSS Document */
ul#navmenu-v,
ul#navmenu-v li,
ul#navmenu-v ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px; 
list-style: none;
}
 
ul#navmenu-v:after {
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}
 
ul#navmenu-v li {
float: left; 
display: block !important; 
display: inline; 
position: relative;
border:#003366 1px solid;
}
ul#navmenu-v li ul li {
border:none;
border-bottom:#FFFFFF 2px solid;
}
 
/* Root Menu */
ul#navmenu-v a {
padding: 0 6px;
display: block;
background: #003366;
color: #FFFFFF;
font: bold 12px/28px Verdana, Arial;
text-decoration: none;
height: auto !important;
height: 1%; 
}
 
 
ul#navmenu-v a:hover,
ul#navmenu-v li:hover a,
ul#navmenu-v li.iehover a {
background: #FFFFFF;
color: #000000;
 
}
 
/* 2nd Menu */
ul#navmenu-v li:hover li a,
ul#navmenu-v li.iehover li a {
background: #003366;
color: #FFFFFF;
border:#003366 1px solid;
}
 
 
ul#navmenu-v li:hover li a:hover,
ul#navmenu-v li:hover li:hover a,
ul#navmenu-v li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover a {
background: #FFFFFF;
color: #003366;
border:#003366 1px solid;
}
 
 
 
ul#navmenu-v ul,
ul#navmenu-v ul ul,
ul#navmenu-v ul ul ul {
display: none;
position: absolute;
top: 0;
left: 161px;
}
 
 
ul#navmenu-v li:hover ul ul,
ul#navmenu-v li:hover ul ul ul,
ul#navmenu-v li.iehover ul ul,
ul#navmenu-v li.iehover ul ul ul {
display: none;
}
 
ul#navmenu-v li:hover ul,
ul#navmenu-v ul li:hover ul,
ul#navmenu-v ul ul li:hover ul,
ul#navmenu-v li.iehover ul,
ul#navmenu-v ul li.iehover ul,
ul#navmenu-v ul ul li.iehover ul {
display: block;
}
</style>
</head>
<body>
 
#<table cellpadding="0" cellspacing="0" width="100%" align="center">#
<table width="100%" cellspacing="0" cellpadding="0"><tr><td><div id="TopMenu"><ul>
 
<tr>
<td colspan="3" class="header">Мой сайт</td>
</tr>
<tr>
<td class="left_col"><ul id="navmenu-v">
<li><a href="#">Предисловие</a> 
 
</li> 
<li><a href="/"><span>Раздел 8</span></a></li>
<ul> 
<li><a href="text/html(1.1).html">Тема 1</a></li>
<li><a href="text/html(1.2).html">Тема 2</a></li>
<li><a href="text/html(1.3).html">Тема 3</a></li>
</ul></li>
 
<li><a href="#">Практикум</a> 
<ul> 
<li><a href="#">Задание</a></li>
<li><a href="#">Практические</a></li>
<li><a href="#">Тесты</a></li>
 
</ul>
</li> 
<li><a href="#">CSS</a> 
<ul> 
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
<li><a href="#">Ссылка 3</a></li>
<li><a href="#">Ссылка 4</a></li>
<li><a href="#">Ссылка 5</a></li>
</ul>
</li> 
<li><a href="#">CSS</a> 
<ul> 
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
<li><a href="#">Ссылка 3</a></li>
<li><a href="#">Ссылка 4</a></li>
<li><a href="#">Ссылка 5</a></li>
</ul>
</li> 
<li><a href="#">CSS</a> 
<ul> 
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
<li><a href="#">Ссылка 3</a></li>
<li><a href="#">Ссылка 4</a></li>
<li><a href="#">Ссылка 5</a></li>
</ul>
</li> 
<li><a href="#">CSS</a> 
<ul> 
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
<li><a href="#">Ссылка 3</a></li>
<li><a href="#">Ссылка 4</a></li>
<li><a href="#">Ссылка 5</a></li>
</ul>
</li> 
<li><a href="#">CSS</a> 
<ul> 
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
<li><a href="#">Ссылка 3</a></li>
<li><a href="#">Ссылка 4</a></li>
<li><a href="#">Ссылка 5</a></li>
</ul>
</li> 
<li><a href="#">CSS</a> 
<ul> 
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
<li><a href="#">Ссылка 3</a></li>
<li><a href="#">Ссылка 4</a></li>
<li><a href="#">Ссылка 5</a></li>
</ul>
</li> 
<li><a href="#">CSS</a> 
<ul> 
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
<li><a href="#">Ссылка 3</a></li>
<li><a href="#">Ссылка 4</a></li>
<li><a href="#">Ссылка 5</a></li>
</ul>
</li> 
<li><a href="#">Словарный минимум</a>
<ul>
<li><a href="#">Орфоэпический</a></li> 
<li><a href="#">Толковый</a></li>
<li><a href="#">Паронимы</a></li>
<li><a href="#">Антонимы</a></li>
<li><a href="#">Фразеологический</a></li>
</ul></li> 
</ul></td>
<td class="center_col">Ширина ячейки в данном случае зависит от величины монитора или размера окна браузера.</td>
<td class="right_col">Ссылки</td>
</tr>
<tr>
<td colspan="3" class="footer">© Все права защищены</td>
</tr>
</table>
<script>
navHover = function() {
var lis = document.getElementById("navmenu-v").getElementsByTagName("LI");
for (var i=0; i<lis.length; i++) {
lis[i].onmouseover=function() {
this.className+=" iehover";
}
lis[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" iehover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", navHover);
</script>
</body>
</html>
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 17.05.2010, 08:20
Ответы с готовыми решениями:

Подскажите свечение меню в css
Подскажите пожалуйста где в css находится свечение меню при наведении курсораa:active {...

Подскажите, как выделить активный раздел в меню сайта в CSS
Добрый вечер! Допустим есть меню сайта | Главная | Контакты | Как в CSS сделать следующие:...

Подскажите что изучать дальше? Подскажите оптимальное значение для CSS media
Подскажите что изучать дальше? Изучил CSS - Flexbox, grid, JavaScript - DOM. Изучаю не по какой-то...

Меню с CSS
Как сделать подобное меню с помощью CSS?

2
Всегда не хватает времени
119 / 119 / 20
Регистрация: 15.10.2009
Сообщений: 493
17.05.2010, 08:47 2
Нужно именно на СSS? Можно это сделать например на Java

в первую очередь задаем настройки в строке:

HTML5
1

<li onclick="tree('a', 4)">
где

a - продолжаем алфавит в зависимости от того, сколько ссылок будет в основном меню
4 - цифра указывает, количество ссылок в выпадающем списке

дальше само меню :

HTML5
1

<li id="a1">SubMenu 1.1</li>
далее по аналогии буква и цифра.

потом сам Ява скрипт:

Java
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

<script type="text/javascript">
var tmpid,am,let,count;
  function tree(letter, amount)
   {
    count=1;
    am=amount;
    let=letter;
    show2();
   }
  function show2()
   {
    if(count>am)
     {
      tmpid = '' + let + count;
      setTimeout('show(tmpid, 1)', 100);
      count++;
     }
      else if(count==am)
       {
        tmpid = '' + let + count;
        setTimeout('show(tmpid, 0)', 100);
       }
   }
  function show(id, flag)
   {
    var el = document.getElementById(id);
    el.style.display = (el.style.display == 'block')?'none':'block';
    if(flag!=0) show2();
   }
</script>
затем чтобы ссылки открывались во фрейме нужно просто указать вместо
HTML5
1

<li id="a1">SubMenu 1.1</li>
такое
HTML5
1

<li id="a1"><a href="ссылка" target="top">SubMenu 1.1</a></li>
где в target="top" , top - название фрейма в котором будет открыватся ссылка. его задают при прописании фреймов name="top"
1
0 / 0 / 0
Регистрация: 10.01.2016
Сообщений: 6
17.05.2010, 12:57 3
Большое спасибо буду пробовать )))
0
17.05.2010, 12:57
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 17.05.2010, 12:57
Помогаю со студенческими работами здесь

Меню CSS
Беда! При наведении на кнопку вниз выезжает картинка, но Кнопки убегают вниз вместе с выделенной...

css меню
Вопрос: к примеру есть меню ,любое,не имеет значения,и есть к примеры верху 2 кнопки(к примеру...

Меню CSS
Вот мой код, ну как мой я нашёл его на сайте точно не помню на каком а проблема у меня заключается...

Меню на CSS
Доброго дня! И с Новым Годом всех! Я новичок в CSS и сайтостроении, прошу извинить. Вопрос у...


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

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

КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru