Jak udělatroletky
Jak se udělají roletky-když najedu na odkaz, tak se zobrazí menu
no jde to udelat pomoci css a javaskriptu, tedy alespon tak jsem to delala ja... i kdyz z hlediska prehlednosti tech stranek v tom nevidim moc dobre reseni...
pokud tedy chces udelat menu ktere by se po klepnuti na odkaz "rozvinulo" smerem dolu na dalsi pod casti, da se to udelat pomoci seznamu.
nejdrive si nadefinujes nejaky styl pro zobrazeni seznamu:
UL {
cursor : hand;
color : #26539C;
text-decoration: underline;
margin-left : 5pt;
font-family: Arial;
}
UL UL {
display : none;
margin-left : 10px;
}
.leaf {
cursor : text;
color : white;
font-weight : normal;
list-style-type : circle;
}
potom do <head> musis umistit javaskript, ktery prikaze seznamu aby se schovala cast ktera se ma potom zobrazit po klepnuti na odkaz...
<SCRIPT LANGUAGE="JavaScript">
function checkParent(src, dest) {
while (src!=null) {
if (src.tagName == dest) return src;
src = src.parentElement;
}
return null;
}
function Menu() {
var open = event.srcElement;
var el = checkParent(open, "LI");
if (null!=el) {
var pos = 0;
for (var pos=0; pos<el.children.length; pos++) {
if ("UL"==el.children[pos].tagName) break;
}
if (pos==el.children.length) return;
} else return;
el = el.children[pos];
if ("UL"==el.tagName) {
if (""==el.style.display) {
el.style.display = "block";
}
else
{
el.style.display = "";
}
}
event.cancelBubble = true;
}
document.onclick = Menu;
</SCRIPT>
no a kdyz tohleto mas vsechno spravne umistene, tak menu pak bude vypadat takhle:
<ul>
<li>Odkaz 1 - vyditelny
<ul>
<li class=leaf><a>podbod, zatim skryty</a>
<li class=leaf><a>podbod, zatim skryty</a>
</ul>
<li>Odkaz 2 - vyditelny
<ul>
<li class=leaf><a>podbod, zatim skryty</a>
<li class=leaf><a>podbod, zatim skryty</a>
</ul>
</ul>
Tak to je ono, nejsem si jista pro ktere verze prohlizecu to funguje, ale na vsech verzich MSIE a v Opere by to melo fungovat bez problemu... mozillu jsem netestovala....
pokud tedy chces udelat menu ktere by se po klepnuti na odkaz "rozvinulo" smerem dolu na dalsi pod casti, da se to udelat pomoci seznamu.
nejdrive si nadefinujes nejaky styl pro zobrazeni seznamu:
UL {
cursor : hand;
color : #26539C;
text-decoration: underline;
margin-left : 5pt;
font-family: Arial;
}
UL UL {
display : none;
margin-left : 10px;
}
.leaf {
cursor : text;
color : white;
font-weight : normal;
list-style-type : circle;
}
potom do <head> musis umistit javaskript, ktery prikaze seznamu aby se schovala cast ktera se ma potom zobrazit po klepnuti na odkaz...
<SCRIPT LANGUAGE="JavaScript">
function checkParent(src, dest) {
while (src!=null) {
if (src.tagName == dest) return src;
src = src.parentElement;
}
return null;
}
function Menu() {
var open = event.srcElement;
var el = checkParent(open, "LI");
if (null!=el) {
var pos = 0;
for (var pos=0; pos<el.children.length; pos++) {
if ("UL"==el.children[pos].tagName) break;
}
if (pos==el.children.length) return;
} else return;
el = el.children[pos];
if ("UL"==el.tagName) {
if (""==el.style.display) {
el.style.display = "block";
}
else
{
el.style.display = "";
}
}
event.cancelBubble = true;
}
document.onclick = Menu;
</SCRIPT>
no a kdyz tohleto mas vsechno spravne umistene, tak menu pak bude vypadat takhle:
<ul>
<li>Odkaz 1 - vyditelny
<ul>
<li class=leaf><a>podbod, zatim skryty</a>
<li class=leaf><a>podbod, zatim skryty</a>
</ul>
<li>Odkaz 2 - vyditelny
<ul>
<li class=leaf><a>podbod, zatim skryty</a>
<li class=leaf><a>podbod, zatim skryty</a>
</ul>
</ul>
Tak to je ono, nejsem si jista pro ktere verze prohlizecu to funguje, ale na vsech verzich MSIE a v Opere by to melo fungovat bez problemu... mozillu jsem netestovala....
Nové příspěvky
Smazani stranek
index.html )
HTML Tabulky
Zalamování textu pomocí CSS
Přesměrování
Arduino - 400 Bad Request
Nastavení českých písmen
POMOC! po druhé!
Pozicování (obrázek na střed).
Jak vycentrovat obrazek, ktery je v prikazu absolute ?
Použití tvůrce webu
katalog
async functions' is only available in es8 (use 'esversion: 8')
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
Problém s načítáním
Div pro reklamu překrývá prvky webové stránky
Nezobrazuje se mi lišta s reklamou
ako nahrám na môj web favicon?
JavaScript - nečitelný soubor *.js - jak prohlížet/editovat
Problém s textem
videostream
index.html
GB///refresh///JS
Total Commander - server nenalezen
Mobilní verze webu
Další témata
STATUS
FTP
HTTP
SQL
PHP
© 2002 - 2024 Web zdarma s.r.o. — zvládnete to sami