Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / простецкое меню / 25 сообщений из 27, страница 1 из 2
  1  все
15.02.2010, 13:30:08
    #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:57:38
    #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, 14:14:51
    #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:27:16
    #36469866
EmilRegis
EmilRegis
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
простецкое меню
krvsaгГостьнадо сделать горизонтальное простецкое меню (поминимуму JavaScript).
Ваще без JS...

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

krvsaв ie6 при наведении мыши ваще ниче не показывает и на щелчки не реагирует. так что этот вариант сто пудово не подходит
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.02.2010, 21:21:02
    #36471097
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
простецкое меню
гГостьв ie6 при наведении мыши ваще ниче не показывает и на щелчки не реагирует
Я про это сразу и сказал...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.02.2010, 02:13:49
    #36471486
illion
illion
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
простецкое меню
посмотрите как работают готовые css-меню на http://www.cssplay.co.uk/menus/ в разделе Multi-Level - Dropline. Например, это
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.02.2010, 02:19:12
    #36471488
illion
illion
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
простецкое меню
или в ваше добавьте ul li ul li a {display:inline}
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.02.2010, 21:47:29
    #36476267
гГость
гГость
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
простецкое меню
illionили в ваше добавьте ul li ul li a {display:inline}
Супер! спасибо! границу когда убрал - вообще вышло то что надо! а как сделать что бы когда мы в подменю попадаем, чтобы выделение главного пункта не исчезало?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
18.02.2010, 08:16:05
    #36476566
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
простецкое меню
гГость , где твой тестовый пример?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
18.02.2010, 12:26:49
    #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, 16:36:27
    #36478124
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
простецкое меню
гГость , т.е. тестовый пример мы должны собирать как-то сами?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
18.02.2010, 22:10:50
    #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:15:09
    #36478770
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
простецкое меню
krvsa гГость , т.е. тестовый пример мы должны собирать как-то сами?
Хотел - получил. :)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
18.02.2010, 23:21:42
    #36478847
зы
зы
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
простецкое меню
Надо было требовать чтобы он зааттачил архивом.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.02.2010, 08:22:51
    #36479111
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
простецкое меню
ShSergeХотел - получил. :)
Да, уж...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.02.2010, 12:34:46
    #36479720
гГость
гГость
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
простецкое меню
вот архив
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
24.02.2010, 21:49:17
    #36486818
гГость
гГость
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
простецкое меню
простите, дак и как быть то с ним?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
24.02.2010, 21:51:06
    #36486821
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
простецкое меню
Забей...
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
25.02.2010, 14:36:19
    #36488028
гГость
гГость
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
простецкое меню
то есть никто не знает как сделать что бы пункт из которого выпало попап-меню не теряло цвета?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
25.02.2010, 14:52:08
    #36488075
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
простецкое меню
гГость , скорее всего с примером твоим никто не хочет возиться... Дюже он не красивый...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
25.02.2010, 15:09:15
    #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:15:18
    #36488157
EmilRegis
EmilRegis
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
простецкое меню
предусмотри что в IE6 не будет работать...в скрипте распиши onmouseover, onmouseout
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.03.2010, 20:50:09
    #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
| Ответить | Цитировать | Написать  
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / простецкое меню / 25 сообщений из 27, страница 1 из 2
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 527ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1453433]:
 0ms
get settings:
 9ms
get forum list:
 18ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 159ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 62ms
get tp. blocked users:
 1ms
others: 262ms
total:  527ms
x
x
Закрыть


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