TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Dobrý den, chtěl bych se zeptat jak udělat hierarchické menu podobně jak je to i na těchto stránkách v html. Jak udělat odkaz aby se po kliknutí na něj pod ním objevily nové pododkazy v jedné html stránce jde to vůbec??
Fórum › HTML / XHTML
Hierarchické menu
Nahlásit jako SPAM
IP: ...–
Super člento musis spravit pomocou CSS... skus kuknut na www.interval.cz uz som to tam videl.
BossUz jsem tu na to odpovidal. Dela se to pres JS prepinanim hodnoty style.display mezi "block" a "none". Napada me taky zpusob, jak by to slo ciste pres CSS, ale bylo by to asi zbytecne slozite.
Grafoman
jak už psal CommandeZ přes JS + css je to asi nejrychlejší a nejjedodušší. Jak se to dělá se dozvíš z http://www.jakpsatweb.cz/javascript/priklady/skryvani-odkryvani.html
Jan Malý | web: www.malyphoto.cz, @malyphoto
Prominte ze jeste otravuju ale funguje mi to jen pro jeden pododkaz jak to udělat pro 2 a více...??? A mám to menu ještě komplikovanější mám ho formou tabulky, tudíž bych potřeboval po kliknutí na odkaz aby se mi pod ním objevily další buňky tabulky které by fungovaly jako pododkazy...
To mas problem se sdilenou CSS tridou nebo nevhodne napsanou JS funkci.
Já to myslel jinak, chci mít více těch skrývaných...
<h3 onclick="zobrazSkryj('oddil2')">Nadpis druhého oddílu</h3>
<div id="oddil2" class="skryvany">
druhý oddíl: bla bla bla text</div>
<div id="oddil2" class="skryvany">
druhý oddíl: bla bla bla text</div>
Mě to totiž zobrazí jen ten jeden....
tohle tam je
<script>
function zobrazSkryj(idecko){
el=document.getElementById(idecko).style;
el.display=(el.display == 'block')?'none':'block';
}
</script>
<style>
h3 {cursor: pointer; cursor: hand; text-decoration: underline}
.skryvany {display: none}
</style>
...
<h3 onclick="zobrazSkryj('oddil1')">Nadpis</h3>
<div id="oddil1" class="skryvany">
První oddíl: bla bla bla text</div>
<h3 onclick="zobrazSkryj('oddil2')">Nadpis druhého oddílu</h3>
<div id="oddil2" class="skryvany">
Druhý oddíl: bla bla bla text</div>a pro každej novej musíš přičíst číslo o 1 vyšší
př:
<h3 onclick="zobrazSkryj('oddil2')">Nadpis druhého oddílu</h3>
<div id="oddil2" class="skryvany">
druhý oddíl: bla bla bla text</div>
<h3 onclick="zobrazSkryj('oddil3')">Nadpis třetího oddílu</h3>
<div id="oddil3" class="skryvany">
třetí oddíl: bla bla bla text</div>
<h3 onclick="zobrazSkryj('oddil4')">Nadpis čtvrtého oddílu</h3>
<div id="oddil4" class="skryvany">
čtvrtý oddíl: bla bla bla text</div>
Jan Malý | web: www.malyphoto.cz, @malyphoto
Já to myslel jinak, chci mít více těch skrývaných...
<h3 onclick="zobrazSkryj('oddil2')">Nadpis druhého oddílu</h3>
<div id="oddil2" class="skryvany">
druhý oddíl: bla bla bla text</div>
<div id="oddil2" class="skryvany">
druhý oddíl: bla bla bla text</div>
Mě to totiž zobrazí jen ten jeden....
Id musi byt unikatni. Nemuzes mit vice prvku se stejnym Id. Bud o cele hod do neceho nadrazeneho nebo to res pres jiny parametr (treba class, ale to je zase slozitejsi v JS)
aha... já to dělávám takto...
<html>
<head>
<title></title>
<style>
.odkazRuka {
cursor: pointer;
cursor: hand;
padding-left: 5px;
font-size: 12px;
color: black;
background-color: #ffffff;
font-weight: bold;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.skryvany {
display: none;
padding-left: 25px;
}
</style>
</head>
<body>
<script language="JavaScript1.2" type="text/javascript">
function zobrazSkryj(idecko){
el=document.getElementById(idecko).style;
el.display=(el.display == 'block')?'none':'block';
}
</script>
<div class="odkazRuka" onclick="zobrazSkryj('oddil1')">1 oddíl</div>
<div id="oddil1" class="skryvany">
<a href="#">něco</a>
<a href="#">něco</a>
</div>
<div class="odkazRuka" onclick="zobrazSkryj('oddil2')">2 oddíl</div>
<div id="oddil2" class="skryvany">
<a href="#">něco</a>
<a href="#">něco</a>
</div>
</body>
</html>doufám, že teď sem to dobře pochopil
Jan Malý | web: www.malyphoto.cz, @malyphoto
není zač
Jan Malý | web: www.malyphoto.cz, @malyphoto
Ještě mám další problém :( když to chci dát do tabulky tak mi to nefunguje....
<HTML>
<HEAD>
<TITLE></TITLE>
<style>
a.mouseover:link, a.mouseover:visited {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#ff5a00;
background-image:url(images/button_off.jpg);
display:block;
text-decoration:none;
font-weight:bold;
height:20px;
padding-top:5px;
}
a.mouseover:hover, a.mouseover:focus, a.mouseover:active {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#ffffff;
background-image:url(images/button_on.jpg);
display:block;
text-decoration:none;
font-weight:bold;
height:20px;
padding-top:5px;
}
.odkazRuka {
cursor: pointer;
cursor: hand;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#ff5a00;
background-image:url(images/button_off.jpg);
display:block;
text-decoration:none;
font-weight:bold;
height:20px;
padding-top:5px;}
.skryvany {
display: none
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#ff5a00;
background-image:url(images/button_off.jpg);
display:block;
text-decoration:none;
font-weight:bold;
height:19px;
padding-top:5px;}
</style>
</HEAD>
<BODY>
<table width="200" border="0" cellspacing="0" cellpadding="0" background="images/naviitem_bg.jpg">
<tr><TD> <FONT size=5><U>Menu</U></FONT</TD>
</tr>
<tr>
<td height="25"><a class="mouseover" href="index.html"><img src="images/spacer.gif" height="1" width="40" border="0">Úvodní stránka</a></td>
</tr>
<tr>
<td height="25" class="odkazRuka" onclick="zobrazSkryj('oddil1')"><img src="images/spacer.gif" height="1" width="40" border="0">Tabulky</td></tr>
<tr><td a href="http://www.pinec.info/tabulky/?vystup=&kraj=12&soutez=199" id="oddil1" class="skryvany"><img src="images/spacer.gif" height="1" width="50" border="0">Aktuálně</a></td></tr>
<tr><td a href="tab1.html" id="oddil1" class="skryvany"><img src="images/spacer.gif" height="1" width="50" border="0">Podzim 2006</a></td></tr>
</BODY>
</HTML>
Fakt nevim, jestli JS podporuje skryvani budek tabulky za behu. Rozgodne je ale blbost pouzivat tabulku na menu ;)
Zjistit počet nových příspěvků
Přidej příspěvek
Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!
Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku
×Vložení zdrojáku
×Vložení obrázku
×Vložení videa
Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
Uživatelé prohlížející si toto vlákno
Uživatelé on-line: 0 registrovaných, 2 hosté
Moderátoři diskuze
