rozbalovaci menu

Lion · Príspevok od používateľa **Lion** » 06 feb 2008, 13:45

Ahoj
Nemuzu se nikde dopatrat jak udelat rozbalovaci menu pomoci CSS a JS... potrebuju po kliknuti na odkaz aby se pod nim ukazaly podsekce...

podsekcie budu v dive ktorý bude mať display='none' (čiže bude neviditelný). Po kliknutí z neho spravíš vidietelný/neviditelný podľa toho či je zobrazený alebo nie, takže onclick=menu();
fcia menu() by mohla byť nejak takto:

Kód: Vybrať všetko

function menu(){
  var div = document.getElementById('podmenu');
  if(div.style.display=='none') div.style.display='block'; else div.style.display='none';
}

Lion · Príspevok od používateľa **Lion** » 06 feb 2008, 14:13

jenze tech pod sekci tam bude vic... kazdou pod sekci mam teda dat do zvlastniho divu? a kdyz kliknu na odkaz tak se to objevi pod tim, mam menu jako sloupec ne radek...

hej, každú podsekciu daj do jedného divu, a daj mu výstižné id, napríklad číslo submenu... toto ide bude vystupovať ako argument fcie

Kód: Vybrať všetko

function menu(ktore){
  var div = document.getElementById(ktore);
  if(div.style.display=='none') div.style.display='block'; else div.style.display='none';
}

dalo by sa to aj cez jeden div, a tie odkazy tam meniť cez innerHTML a potom ten div prisunúť k myške, ale neviem do akej miery vieš s js robiť.. ak ti vadí že tam je viac divov, napíš a spravím ti to cez jeden

//edit: ešte jedná vec, toto ti menu otvorí/zavre. Ale ak klikneš na inú položku tak tie rozrolované ostanú otvorené.. ak chceš pri otvorení nového zavreť všetky ostatné, treba to spraviť cez cyklus alebo nastaviš display=none celému polu svojich divov a potom ten jeden zobrazíš

Lion · Príspevok od používateľa **Lion** » 06 feb 2008, 14:18

ja JS vubec neumim

jenom obcas skopcim tento script... du to skusit

... jinak CSS a html vcelku ovladam

//edit: nejak me to nechce se rozjet

jak by mela vypadat cca ta stranka?

//audiotrack: upravuj si príspevky a nepíš ich viac za sebou

Kód: Vybrať všetko

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1250" />
<title>Untitled Document</title>
<script language="javascript">
function menu(ktore){
	//var submenus = document.getElementsByName('submenu');
	var div = document.getElementById(ktore);
	if(div.className == 'submenu_hidden') div.className = 'submenu_visible'; else div.className = 'submenu_hidden';
}
</script>
<style>
.submenu_hidden{
	background-color:#CCCCCC;
	border-color:#999999;
	color:#666666;
	display:none;
	width: 100px;
}
.submenu_visible{
	background-color:#CCCCCC;
	border-color:#999999;
	color:#666666;
	display:block;
	padding-left:10px;
	width:100px;
}
</style>
</head>
<body>
<a href="javascript:menu(1)">LINK 1</a><br>
<div class=submenu_hidden id="1" > Link 1.1<br>
  Link 1.2 </div>
<a href="javascript:menu(2)">LINK 2</a><br>
<div class=submenu_hidden id="2">Link 2.1 </div>
<a href="javascript:menu(3)">LINK 3</a><br>
<div class=submenu_hidden id="3"> Link 3.1<br>
  Link 3.2<br>
  Link 3.3 </div>
</body>
</html>

so štýlmi sa pohraj, nemám času

awtt · Príspevok od používateľa **awtt** » 20 okt 2008, 1:33

ako sa to da prerobit aby rozbalovalo to menu uz pri hovery?

Kamosko

Naco vam je k tomu javascript ?? Je zbytocne pchat javascripty do HTML ked ich netreba... tu mate take css riesenie

Kód: Vybrať všetko

/* Spolocne styly */

* {margin: 0; padding: 0;}
body {font: small/1.9 Verdana, Arial, lucida, helvetica, sans-serif; background: #fff; color: #333; text-align: center;}
* html body, * html td {font-size: x-small;} 
h1 {font-size: 1.5em; font-weight: normal; line-height: 2em; margin-bottom: 0.5em;}
p {margin-bottom: 0.2em;}
table {border-collapse: collapse; margin-top: -1px;}
.clear {clear:both;}

/* Zakladne styly */

#menu {width: 600px; margin: auto;}
#menu ul {list-style-type: none;}
#menu li {float: left; position: relative; width: 120px;}
#menu li a {display: block; border-top: 1px solid #fff; border-right: 1px solid #fff; width: 119px; background: #c9c9a7; color: #000; font-weight: bold; line-height: 2em; text-decoration: none; text-align: center;}
* html #menu li a {width: 120px; position: relative; overflow: hidden;}
#menu li ul {position: absolute; display: none; width: 120px; left: 0;}
* html #menu li ul {display: block; margin-top: 1px;}

/* Hover efekty */

#menu li a:hover,#menu li:hover a {background: #b3ab79; color:#fff; overflow: visible;}
#menu li:hover ul {display: block;}
#menu li li a, #menu li:hover li a {font-weight: normal; background: #c9c9a7; color: #000;}
#menu li li a:hover, #menu li:hover li a:hover {background: #b3ab79; color:#fff;}

Kód: Vybrať všetko

<body>
<h1>Vodorovné hover menu</h1>
<div id="menu">

<ul>
<li><a href="#">Úvod</a></li>
<li><a href="#">Výučba
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Osnova</a></li>
<li><a href="#">Pojmy</a></li>
<li><a href="#">Otázky</a></li>
<li><a href="#">Príklady</a></li>

<li><a href="#">Termíny</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Výskum
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">O výskume</a></li>
<li><a href="#">Publikácie</a></li>
<li><a href="#">Projekty</a></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Rôzne
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Odkazy</a></li>
<li><a href="#">Prednášky</a></li>
<li><a href="#">Info</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>
<li><a href="#">Autor
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">O autorovi</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<div class="clear">&nbsp;</div>
</div>

</body>