ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / простецкое меню
25 сообщений из 27, страница 1 из 2
  1  все
простецкое меню
    #36469672
гГость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
гГость
Гость
надо сделать горизонтальное простецкое меню (поминимуму JavaScript). в нем из одного пункта должен выпадать так же один пункт, но содержащий в себе 2 ссылки. а у меня эти две ссылки делятся на 2 строки. как это исправить?

csshorizontalmenu.css
Код: plaintext
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.
.horizontalcssmenu ul{margin:  0 ;padding:  0 ;list-style-type: none;}

/*Top level list items*/
.horizontalcssmenu ul li{position: relative;float: left; /*!!!!!!!!!!!1*/}

/*Top level menu link items style*/
.horizontalcssmenu ul li a{display: block; width: 120px; /*ширина каждого пункта в верхней линейке*/
padding: 2px 8px;border: 1px solid # 202020 ;border-left-width:  0 ;text-decoration: none;color: black;font: bold 13px Tahoma;
}
	
/*Sub level menu*/
.horizontalcssmenu ul li ul{border-top: 1px solid # 202020 ;position: absolute;display: block;visibility: hidden;}

/* Sub level menu links style */
.horizontalcssmenu ul li ul li a{width: 160px; /*width of sub menu levels*/
font-weight: normal;padding: 2px 5px;background: #e3f1bd;border-width:  0  1px 1px 1px;
}

.horizontalcssmenu ul li a:hover{background: url(menubgover.gif) center center repeat-x;}

.horizontalcssmenu ul li ul li a:hover{background: #cde686;}

.horizontalcssmenu .arrowdiv{position: absolute;right:  0 ;background: transparent url(menuarrow.gif) no-repeat center left;}

* html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
	
/* Holly Hack for IE \*/
* html .horizontalcssmenu ul li { float: left; height:  1 %; }
* html .horizontalcssmenu ul li a { height:  1 %; }
csshorizontalmenu.js
Код: plaintext
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.
var cssmenuids=["cssmenu1"] //Enter id(s) of CSS Horizontal UL menus, separated by commas
var csssubmenuoffset=- 1  //Offset of submenus from main menu. Default is  0  pixels.

function createcssmenu2(){
for (var i= 0 ; i<cssmenuids.length; i++){
  var ultags=document.getElementById(cssmenuids[i]).getElementsByTagName("ul")
    for (var t= 0 ; t<ultags.length; t++){
			ultags[t].style.top=ultags[t].parentNode.offsetHeight+csssubmenuoffset+"px"
    	var spanref=document.createElement("span")
			spanref.className="arrowdiv"
			spanref.innerHTML="    "
			ultags[t].parentNode.getElementsByTagName("a")[ 0 ].appendChild(spanref)
    	ultags[t].parentNode.onmouseover=function(){
					this.style.zIndex= 100 
    	this.getElementsByTagName("ul")[ 0 ].style.visibility="visible"
					this.getElementsByTagName("ul")[ 0 ].style.zIndex= 0 
    	}
    	ultags[t].parentNode.onmouseout=function(){
					this.style.zIndex= 0 
					this.getElementsByTagName("ul")[ 0 ].style.visibility="hidden"
					this.getElementsByTagName("ul")[ 0 ].style.zIndex= 100 
    	}
    }
  }
}

if (window.addEventListener)
window.addEventListener("load", createcssmenu2, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu2)
файл html:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
<html>
<head><link rel="stylesheet" type="text/css" href="csshorizontalmenu.css" />

<script type="text/javascript" src="csshorizontalmenu.js">
</script></head>
<body><div class="horizontalcssmenu">
<ul id="cssmenu1">
<li style="border-left: 1px solid #202020;"><a href="#"> 1 </a>
  <ul><li><a href="#">eeeeeeeeee</a><a href="#">wwwwwwwwwwwww</a></li></ul>
</li>
<li><a href="#"> 2 </a></li>
</ul>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
15.02.2010, 13:30:08
| Ответить | Цитировать | Написать  
простецкое меню
    #36469764
EmilRegis
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
EmilRegis
Участник
вот этот пункт css
Код: plaintext
1.
2.
3.
4.
/*Top level menu link items style*/
.horizontalcssmenu ul li a{display: block; width: 120px; /*ширина каждого пункта в верхней линейке*/
padding: 2px 8px;border: 1px solid # 202020 ;border-left-width:  0 ;text-decoration: none;color: black;font: bold 13px Tahoma;
}
если убрать display:block, то показывается как вам надо
...
Рейтинг: 0 / 0
15.02.2010, 13:57:38
| Ответить | Цитировать | Написать  
простецкое меню
    #36469824
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
гГостьнадо сделать горизонтальное простецкое меню (поминимуму JavaScript).
Ваще без JS...

Код: plaintext
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.
<html>
<head>
<title>Test</title>
<style type='text/css'>
#menu {
	list-style-type: none;
}
.menu {
	position: relative;
	margin-left: 10px;
	float: left;
	border: 1px solid;
}
li.menu .submenu {
	position: absolute;
	width: 200px;
	display: none;
	border: 1px solid;
}
li.menu:hover .submenu {
	display: block;
}
</style>
</head>
<body>
<ul id='menu'>
	<li class='menu'>Пункт  1 
		<ul class='submenu'>
			<li>Подпункт  1   1 </li>
			<li>Подпункт  1   2 </li>
		</ul>
	</li>
	<li class='menu'>Пункт  2 
		<ul class='submenu'>
			<li>Подпункт  2   1 </li>
			<li>Подпункт  2   2 </li>
		</ul>
	</li>
</ul>
</body>
</html>

В ИЕ6.0 правда не будет работать li.menu:hover
...
Рейтинг: 0 / 0
15.02.2010, 14:14:51
| Ответить | Цитировать | Написать  
простецкое меню
    #36469866
EmilRegis
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
EmilRegis
Участник
krvsaгГостьнадо сделать горизонтальное простецкое меню (поминимуму JavaScript).
Ваще без JS...

В ИЕ6.0 правда не будет работать li.menu:hover
тут то и поможет js :)
...
Рейтинг: 0 / 0
15.02.2010, 14:27:16
| Ответить | Цитировать | Написать  
простецкое меню
    #36470044
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
EmilRegisтут то и поможет js :)
Хватит событий onmouseover и onmouseout.
...
Рейтинг: 0 / 0
15.02.2010, 15:09:35
| Ответить | Цитировать | Написать  
простецкое меню
    #36470891
гГость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
гГость
Гость
EmilRegisвыпадающее меню сместилось в сторону, а две ссылки так и бьет на разные строки

krvsaв ie6 при наведении мыши ваще ниче не показывает и на щелчки не реагирует. так что этот вариант сто пудово не подходит
...
Рейтинг: 0 / 0
15.02.2010, 19:10:47
| Ответить | Цитировать | Написать  
простецкое меню
    #36471097
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
гГостьв ie6 при наведении мыши ваще ниче не показывает и на щелчки не реагирует
Я про это сразу и сказал...
...
Рейтинг: 0 / 0
15.02.2010, 21:21:02
| Ответить | Цитировать | Написать  
простецкое меню
    #36471486
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
посмотрите как работают готовые css-меню на http://www.cssplay.co.uk/menus/ в разделе Multi-Level - Dropline. Например, это
...
Рейтинг: 0 / 0
16.02.2010, 02:13:49
| Ответить | Цитировать | Написать  
простецкое меню
    #36471488
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
или в ваше добавьте ul li ul li a {display:inline}
...
Рейтинг: 0 / 0
16.02.2010, 02:19:12
| Ответить | Цитировать | Написать  
простецкое меню
    #36476267
гГость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
гГость
Гость
illionили в ваше добавьте ul li ul li a {display:inline}
Супер! спасибо! границу когда убрал - вообще вышло то что надо! а как сделать что бы когда мы в подменю попадаем, чтобы выделение главного пункта не исчезало?
...
Рейтинг: 0 / 0
17.02.2010, 21:47:29
| Ответить | Цитировать | Написать  
простецкое меню
    #36476566
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
гГость , где твой тестовый пример?
...
Рейтинг: 0 / 0
18.02.2010, 08:16:05
| Ответить | Цитировать | Написать  
простецкое меню
    #36477248
гГость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
гГость
Гость
Так я же его в начале выложил!!!
ну щас css файл имеет такой вид:
Код: plaintext
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.
.horizontalcssmenu ul{margin:  0 ;padding:  0 ;list-style-type: none;}
/*Top level list items*/
.horizontalcssmenu ul li{position: relative;float: left; }

/*Top level menu link items style*/
.horizontalcssmenu ul li a{display: block;width: 120px; 
padding: 2px 8px;border: 1px solid # 202020 ;border-left-width:  0 ;text-decoration: none;color: black;font: bold 13px Tahoma;}
	
/*Sub level menu*/
.horizontalcssmenu ul li ul{border-top: 1px solid # 202020 ;position: absolute; visibility: hidden;}

/* Sub level menu links style */
.horizontalcssmenu ul li ul li a{width: 160px; /*width of sub menu levels*/
font-weight: normal;padding: 2px 5px;background: #e3f1bd; border-width:  0 ; display:inline;}

.horizontalcssmenu ul li a:hover{background: #e3f1bd center repeat-x;}
.horizontalcssmenu ul li a:active{background: #e3f1bd center repeat-x;}
.horizontalcssmenu ul li a:link {color: #bf0000; font-family: "Times New Roman"; font-size: 16 ; font-weight:bold;}
.horizontalcssmenu ul li a:visited {color: #bf0000; font-family: "Times New Roman"; font-size: 16 ; font-weight:bold;} 

.horizontalcssmenu ul li ul li a:hover{background: #cde686;}  

.horizontalcssmenu .arrowdiv{position: absolute;right:  0 ;}

* html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/padding-top: 1em;}

/* Holly Hack for IE \*/
* html .horizontalcssmenu ul li { float: left; height:  1 %; }
* html .horizontalcssmenu ul li a { height:  1 %; }
* /* End */
...
Рейтинг: 0 / 0
18.02.2010, 12:26:49
| Ответить | Цитировать | Написать  
простецкое меню
    #36478124
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
гГость , т.е. тестовый пример мы должны собирать как-то сами?
...
Рейтинг: 0 / 0
18.02.2010, 16:36:27
| Ответить | Цитировать | Написать  
простецкое меню
    #36478768
гГость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
гГость
Гость
csshorizontalmenu.css
Код: plaintext
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.
.horizontalcssmenu ul{margin:  0 ;padding:  0 ;list-style-type: none;}
/*Top level list items*/
.horizontalcssmenu ul li{position: relative;float: left; }

/*Top level menu link items style*/
.horizontalcssmenu ul li a{display: block;width: 120px; 
padding: 2px 8px;border: 1px solid # 202020 ;border-left-width:  0 ;text-decoration: none;color: black;font: bold 13px Tahoma;}
	
/*Sub level menu*/
.horizontalcssmenu ul li ul{border-top: 1px solid # 202020 ;position: absolute; visibility: hidden;}

/* Sub level menu links style */
.horizontalcssmenu ul li ul li a{width: 160px; /*width of sub menu levels*/
font-weight: normal;padding: 2px 5px;background: #e3f1bd; border-width:  0 ; display:inline;}

.horizontalcssmenu ul li a:hover{background: #e3f1bd center repeat-x;}
.horizontalcssmenu ul li a:active{background: #e3f1bd center repeat-x;}
.horizontalcssmenu ul li a:link {color: #bf0000; font-family: "Times New Roman"; font-size: 16 ; font-weight:bold;}
.horizontalcssmenu ul li a:visited {color: #bf0000; font-family: "Times New Roman"; font-size: 16 ; font-weight:bold;} 

.horizontalcssmenu ul li ul li a:hover{background: #cde686;}  

.horizontalcssmenu .arrowdiv{position: absolute;right:  0 ;}

* html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/padding-top: 1em;}

/* Holly Hack for IE \*/
* html .horizontalcssmenu ul li { float: left; height:  1 %; }
* html .horizontalcssmenu ul li a { height:  1 %; }
* /* End */

csshorizontalmenu.js
Код: plaintext
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.
var cssmenuids=["cssmenu1"] //Enter id(s) of CSS Horizontal UL menus, separated by commas
var csssubmenuoffset=- 1  //Offset of submenus from main menu. Default is  0  pixels.

function createcssmenu2(){
for (var i= 0 ; i<cssmenuids.length; i++){
  var ultags=document.getElementById(cssmenuids[i]).getElementsByTagName("ul")
    for (var t= 0 ; t<ultags.length; t++){
			ultags[t].style.top=ultags[t].parentNode.offsetHeight+csssubmenuoffset+"px"
    	var spanref=document.createElement("span")
			spanref.className="arrowdiv"
			spanref.innerHTML="    "
			ultags[t].parentNode.getElementsByTagName("a")[ 0 ].appendChild(spanref)
    	ultags[t].parentNode.onmouseover=function(){
					this.style.zIndex= 100 
    	this.getElementsByTagName("ul")[ 0 ].style.visibility="visible"
					this.getElementsByTagName("ul")[ 0 ].style.zIndex= 0 
    	}
    	ultags[t].parentNode.onmouseout=function(){
					this.style.zIndex= 0 
					this.getElementsByTagName("ul")[ 0 ].style.visibility="hidden"
					this.getElementsByTagName("ul")[ 0 ].style.zIndex= 100 
    	}
    }
  }
}

if (window.addEventListener)
window.addEventListener("load", createcssmenu2, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu2)
файл html:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<html>
<head><link rel="stylesheet" type="text/css" href="csshorizontalmenu.css" />

<script type="text/javascript" src="csshorizontalmenu.js">
</script></head>
<body><div class="horizontalcssmenu">
<ul id="cssmenu1">
<li style="border-left: 1px solid #202020;"><a href="#"> 1 </a>
  <ul><li><a href="#">eeeeeeeeee</a><a href="#">wwwwwwwwwwwww</a></li></ul>
</li>
<li><a href="#"> 2 </a></li>
</ul>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
18.02.2010, 22:10:50
| Ответить | Цитировать | Написать  
простецкое меню
    #36478770
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
krvsa гГость , т.е. тестовый пример мы должны собирать как-то сами?
Хотел - получил. :)
...
Рейтинг: 0 / 0
18.02.2010, 22:15:09
| Ответить | Цитировать | Написать  
простецкое меню
    #36478847
зы
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
зы
Участник
Надо было требовать чтобы он зааттачил архивом.
...
Рейтинг: 0 / 0
18.02.2010, 23:21:42
| Ответить | Цитировать | Написать  
простецкое меню
    #36479111
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
ShSergeХотел - получил. :)
Да, уж...
...
Рейтинг: 0 / 0
19.02.2010, 08:22:51
| Ответить | Цитировать | Написать  
простецкое меню
    #36479720
гГость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
гГость
Гость
вот архив
...
Рейтинг: 0 / 0
19.02.2010, 12:34:46
| Ответить | Цитировать | Написать  
простецкое меню
    #36486818
гГость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
гГость
Гость
простите, дак и как быть то с ним?
...
Рейтинг: 0 / 0
24.02.2010, 21:49:17
| Ответить | Цитировать | Написать  
простецкое меню
    #36486821
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Забей...
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
24.02.2010, 21:51:06
| Ответить | Цитировать | Написать  
простецкое меню
    #36488028
гГость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
гГость
Гость
то есть никто не знает как сделать что бы пункт из которого выпало попап-меню не теряло цвета?
...
Рейтинг: 0 / 0
25.02.2010, 14:36:19
| Ответить | Цитировать | Написать  
простецкое меню
    #36488075
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
гГость , скорее всего с примером твоим никто не хочет возиться... Дюже он не красивый...
...
Рейтинг: 0 / 0
25.02.2010, 14:52:08
| Ответить | Цитировать | Написать  
простецкое меню
    #36488145
EmilRegis
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
EmilRegis
Участник
вместо
Код: plaintext
1.
.horizontalcssmenu ul li a:hover{background: #e3f1bd center repeat-x;}

напиши

Код: plaintext
1.
.horizontalcssmenu ul li:hover{background: #e3f1bd center repeat-x;}
...
Рейтинг: 0 / 0
25.02.2010, 15:09:15
| Ответить | Цитировать | Написать  
простецкое меню
    #36488157
EmilRegis
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
EmilRegis
Участник
предусмотри что в IE6 не будет работать...в скрипте распиши onmouseover, onmouseout
...
Рейтинг: 0 / 0
25.02.2010, 15:15:18
| Ответить | Цитировать | Написать  
простецкое меню
    #36503776
jemoje
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jemoje
Участник
Не работает в мозилле вот такая конструкция:

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />
<html xmlns="http://www.w3.org/1999/xhtml" />
<head></head>
<div onmouseover="document.all['menu_1'].style.display=''" onmouseout="document.all['menu_1'].style.display='none'">
Показать<br>
<div id="menu_1" style="display:none">Выпало ;)</div>
</div>
</html>

если убрать <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" /> то работает, но сайт перекоситься не по детски.

Помоги решить проблему.
...
Рейтинг: 0 / 0
04.03.2010, 20:50:09
| Ответить | Цитировать | Написать  
25 сообщений из 27, страница 1 из 2
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / простецкое меню
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=259&tid=1453433]:
 0ms
get settings:
 11ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 68ms
get topic data:
 10ms
get forum data:
 2ms
get page messages:
 79ms
get tp. blocked users:
 2ms
others: 230ms
total:  423ms
созд. / загр.: 423ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]