<HTML>

<HEAD>

<TITLE>menu</TITLE>
<link rel="stylesheet" type="text/css" href="cssverticalmenu.css" />

<script type="text/javascript" src="cssverticalmenu.js">

</script>

</HEAD>


<BODY   >

<ul id="verticalmenu" class="glossymenu">
<li><a href="#">JavaScript Kit</a></li>
<li><a href="#">Free JavaScripts</a></li>
<li><a href="#">JavaScript Tutorials</a></li>
<li><a href="#">References</a>
	<ul>
	<li><a href="#">JavaScript Reference</a></li>
	<li><a href="#">DOM Reference</a></li>
	<li><a href="#">CSS Reference</a>
<!--это не работает ,нужно где-то что-то добавить?
<ul> 
				<li><a href="#">Проект1</a></li> 
				<li><a href="#">Проект2</a></li> 

			</ul>  -->

</li>
	</ul>
</li>
<li><a href="#">DHTML/ CSS Tutorials</a></li>
<li><a href="#">web Design Tutorials</a></li>
<li><a href="#">Helpful Resources</a>
	<ul>
	<li><a href="#">Dynamic HTML</a></li>
	<li><a href="#">Coding Forums</a></li>
	<li><a href="#">CSS Drive</a></li>
	<li><a href="#">CSS Library</a></li>
	<li><a href="#">Image Optimizer</a></li>
	<li><a href="#">Favicon Generator</a></li>
	</ul>
</li>
</ul>


</BODY>

</HTML>

код css:

.glossymenu,
 .glossymenu li ul{list-style-type: none;margin: 0;padding: 0;width: 185px; /*WIDTH OF MAIN MENU ITEMS*/border: 1px solid black;}
.glossymenu li{position: relative;}
.glossymenu li ul{ /*SUB MENU STYLE*/position: absolute;width: 190px; /*WIDTH OF SUB MENU ITEMS*/left: 0;top: 0;display: 

none;filter:alpha(opacity=100);-moz-opacity:1;}
.glossymenu li a{background: white url("./graphics/glossyback.gif") repeat-x bottom left;font: bold 12px Verdana, Helvetica, sans-serif;color: white;display: 

block;width: auto;padding: 5px 0;padding-left: 10px;text-decoration: none;}
.glossymenu .arrowdiv{position: absolute;right: 2px;background: transparent url("./graphics/arrow.gif") no-repeat center right;}
.glossymenu li a:visited, 
.glossymenu li a:active{color: white;}
.glossymenu li a:hover{background-image: url("./graphics/glossyback2.gif");}



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

код js:

var menuids=new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas

var submenuoffset=-2 //Offset of submenus from main menu. Default is -2 pixels.



function createcssmenu(){

for (var i=0; i<menuids.length; i++){

  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")

	for (var t=0; t<ultags.length; t++){

	var spanref=document.createElement("span")

		spanref.className="arrowdiv"

		spanref.innerHTML="  "

		ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)

	ultags[t].parentNode.onmouseover=function(){

	this.getElementsByTagName("ul")[0].style.left=this.parentNode.offsetWidth+submenuoffset+"px"

	this.getElementsByTagName("ul")[0].style.display="block"

	}

	ultags[t].parentNode.onmouseout=function(){

	this.getElementsByTagName("ul")[0].style.display="none"

	}

	}

  }

}





if (window.addEventListener)

window.addEventListener("load", createcssmenu, false)

else if (window.attachEvent)

window.attachEvent("onload", createcssmenu)

Какие советы???

Иван Шумов · January 25, 2008

прежде всего можно вопрос - а зачем 3х!уровневое меню.. как-то не понимаю сути такой вещи... ведь это сильно визуально напрягает (ИМХО)

Talexandria · January 25, 2008

просто в главном меню слишком много разветвлений, а в них ещ?....

вот такая беда!

а что вы предлагаете?

Иван Шумов · January 25, 2008

а есть возможность посмотреть то что уже готово, или наброски.. или хотя-бы идею в принципе? чтобы знать от чего отталкиваться в ходе рассуждений, ведь я могу оказаться и неправым сделав вывод не зная полной информации

Talexandria · January 25, 2008

идея в принципе? Стоит задача разработать сайт о компании, куда должны включаться такиевещи ,как:

-новости

-контакты

-о компании

--история

--структура

—руководство

—отделы

—...

--...

...

—...

В общем инфы много. Поэтому решение и было вложенное меню.

Иван Шумов · January 25, 2008

ну, допустим... почему-бы не сделать просто как наhttp://www.drawmanga.ru/ 3 вложения не надо - есть весь список разделов(там - Уроки).. можно логически разбить.. очень хороший вариант - чуть переделать дизайн и все

Talexandria · January 25, 2008

что-то не то.

А не подскажите примерчик с помощью дивов.

Иван Шумов · January 25, 2008

не подскажу.. они ВСЕ на дивах если нормальные

да, и вы так и не сказали зачем вам реально 3х-уровневое меню.. таже не привели примера 3х уровней..

Talexandria · January 25, 2008

да...может я действительно перегнула.

кстати,тот пример,что я привела выше, как вы считаете он нормальный?

Иван Шумов · January 25, 2008

у меня что-то не работает.. но.. где-то я его видел^^ если не сам писал точно такое же %)....

вообще тот что я показал очень приятная вариация и не мешает

Talexandria · January 25, 2008

это пример от куда-то.

вы писали такое же-и у вас не работает?

хм...

блин да что ж такое.

вообще есть простое меню которое открывается 1 раз, а лучше 2,которое работает...

неужели нет...вразумите меня

D.S.Denton · January 25, 2008

простое меню которое открывается 1 раз, а лучше 2

и потом перестает открываться?

Иван Шумов · January 25, 2008

DSD ну хватит стебаться

Talexandria совет поискать в интернете рабочий скрипт .. их на самом деле довольно много, просто в некоторых приходится пытаться разбираться, а без этого не понятно как оно вообще работает ... поищите - наверняка найдете. У меня к сожалению нат в запасниках таких скриптов.. предпочитаю классику

Talexandria · January 25, 2008

очень даже не смешно :-)

я имею ввиду меню с всплывающим подменю.

У меня создается впечатление что такое меню избегают. Я не права?

D.S.Denton · January 25, 2008

проще сделать такое меню с помощью Sothink DHTML Menu Creator

Иван Шумов · January 25, 2008

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

Да - его в основном избегаю. Я вижу причину этого в следующем

1) кому-то лень мучаться с расположением блоков

2) оно не смотрится красиво в дизайнах.. по крайней мере в большинстве

3) занимает место на странице и закрывает часть контента...

Talexandria · January 25, 2008

есть над чем подумать. только уже не думается.

а на счет ваше предложения-нашла нечто похожее- http://www.javascriptkit.com/script/script2/dbmenu/ - пример3.

Только там всего нового для меня....

как оно вам?

D.S.Denton · January 25, 2008

приятная вещь, и js-код не вызывает испуга

Иван Шумов · January 25, 2008

Вот.. это более менее что-то нормальное, только

0) у всех стоит поиграться с дизайном, а не просто так тупо с цветами лупить

1) Example #1 не забывайте - в горизонтальное меню много не впихнешь в ширину

2) Example #2 ну.. я бы не обдобрил, но это на любителя, ИМХО

3) Example #3 даже не знаю является ли плюсом то что можно открыть сразу пачку разделов.... тоже ИМХО.

а так - если вас устраивает - одобряю - стандартные проверенные меню

Talexandria · January 25, 2008

спасибочки. думаю на сегодня с меня хватит.

Но если вдруг у кого найдутся примеры или ссылки на них похожие на Example #3 пишите.

Talexandria · January 25, 2008

приятная вещь, и js-код не вызывает испуга

это у кого как!

Для меня там не все понятно

Sign In

меню

Question

Link to comment

Share on other sites

20 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Обсуждения

Important Information