[HTML] Vytvoření pořádného menu

C++, C#, Visual Basic, Delphi, Perl a ostatní

Moderátor: Moderátoři Živě.cz

Odeslat příspěvekod durbatuluk 29. 6. 2005 10:32

Ahoj, nevím proč ale nemůžu vytvořit žádné pořádné menu na mé připravované stránky, původně jsem chtěl přes Flash ale to než bych neco poradneho vytvoril tak to asi radeji ne. Uz jsem dosel az na programy ktere menu primo vyrabi ale zadny neni podle mych predstav a me predstavy jsou vysouvaci horizontalni a nejlepe animovane (flashove) menu - potrebuji tedy radu jak tohoto menu co nejlepe a hlavne NEJRYCHLEJI dosahnout... Diky a tesim se na vase odpovedi a zatim ahoj

// Howard - upraven nazev ... grrrrr
durbatuluk
Junior

Odeslat příspěvekod Niggas 29. 6. 2005 12:21

nejlepší pro na čítání bude css menu, takže mrkni sem: http://css.e-sign.cz/menu/horizontalni-hover-menu :wink:
Niggas
Junior
Uživatelský avatar

Odeslat příspěvekod durbatuluk 29. 6. 2005 14:39

díky moc moc jsi mi pomohl ale kdyby znal nekdo jeste neco nebudu proti podivam se na vsechny moznosti....
durbatuluk
Junior

Odeslat příspěvekod kovi 29. 6. 2005 15:11

ak by si to chcel vo Flashi tak tu je nejake hotove riesenie:
http://www.zive.cz/h/Programovani/AR.asp?ARI=122791
kovi
Junior
Uživatelský avatar

Odeslat příspěvekod Niggas 29. 6. 2005 15:14

mno můžeš zkusit i tento zdroják:

<html>
<head>
<title>Menu</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">

</head>
<body bgcolor="#ffffff">

<script type="text/javascript">

var timer, i, hiddenMenuTops = new Array('','-33','-49','-49'), moveUp = false, justMovingDown = false, justMovingUp = false, queue = '';

var dom = document.getElementById ? true : false;
var ie4 = ((document.all) && (!dom)) ? true : false;
var ns4 = document.layers ? true : false;
var opera = navigator.userAgent.indexOf('Opera') != -1 ? true : false;
var opera4 = navigator.userAgent.indexOf('Opera 4') != -1 ? true : false;
var dhtml = opera4 ? false : dom ? true : ie4 ? true : ns4 ? true : false;

if (dhtml) document.write ('<style type="text/css">#scriptSupport {display: none;} #menuHolder {position: ' + (ie4 ? 'absolute' : 'relative') + '; height: 100px; width: 233px; overflow: hidden; clip: rect(0px,233px,100px,0px); visibility: hidden; z-index: 9;} #visibleMenu1 {position: absolute; left: 0px; top: 0px; z-index: 7;} #visibleMenu2 {position: absolute; left: 51px; top: 0px; z-index: 6;} #visibleMenu3 {position: absolute; left: 135px; top: 0px; z-index: 5;} #whiteMenu {position: absolute; left: 0px; top: 0px; z-index: 4; background-color: #ffffff; height: 22px; width: 227px;} #hiddenMenu1 {position: absolute; left: 0px; top: 0px; z-index: 3;} #hiddenMenu2 {position: absolute; left: 51px; top: 0px; z-index: 2;} #hiddenMenu3 {position: absolute; left: 135px; top: 0px; z-index: 1;}</style>');

function setTop(element,inOrDecrementation,newTop)
{
if (dhtml)
{
if (!inOrDecrementation)
{
if (dom) document.getElementById(element).style.top = newTop;
else if (ie4) document.all[element].style.top = newTop;
else if (ns4) eval('document.menuHolder.document.' + element + '.top = newTop');
}
else
{
if (dom) document.getElementById(element).style.top = parseInt(document.getElementById(element).style.top) + newTop;
else if (ie4) document.all[element].style.top = parseInt(document.all[element].style.top) + newTop;
else if (ns4) eval('document.menuHolder.document.' + element + '.top = parseInt(document.menuHolder.document.' + element + '.top) + newTop');
}
}
}

function getTop(element)
{
if (dhtml)
{
if (dom) return parseInt(document.getElementById(element).style.top);
if (ie4) return parseInt(document.all[element].style.top);
if (ns4) return parseInt (eval('document.menuHolder.document.' + element + '.top'));
}
}

function menu()
{
if (dhtml)
{
for(i = 1; i <= 3; i++) setTop('hiddenMenu' + i,false,hiddenMenuTops[i]);
if (opera) for(i = 1; i <= 3; i++) setTop('visibleMenu' + i,false,1);
if (ie4) for(i = 1; i <= 3; i++) setTop('visibleMenu' + i,false,3);
if (dom) document.getElementById('menuHolder').style.visibility = 'visible';
else if (ie4) document.all.menuHolder.style.visibility = 'visible';
else if (ns4) document.menuHolder.visibility = 'visible';
}
}

function showMenu(id)
{
if (dhtml)
{
if (((getTop('hiddenMenu1') == -33) || (id == 1)) && ((getTop('hiddenMenu2') == -49) || (id == 2)) && ((getTop('hiddenMenu3') == -49) || (id == 3)) && (!justMovingDown))
{
moveUp = false;
clearTimeout(timer);
justMovingUp = false;
queue = '';
justMovingDown = true;
showMenu2(id);
}
else queue = id;
}
}

function showMenu2(id)
{
if ((!moveUp) && (getTop('hiddenMenu' + id) != 21))
{
setTop('hiddenMenu' + id,true,2);
timer = setTimeout('showMenu2(' + id + ')',15);
}
else
{
moveUp = true;
justMovingDown = false;
if ((id == 3) && (getTop('hiddenMenu3') == 21))
{
if (dom) document.getElementById('hiddenMenu3').style.zIndex = 8;
else if (ie4) document.all.hiddenMenu3.style.zIndex = 8;
else if (ns4) document.menuHolder.document.hiddenMenu3.zIndex = 8;
}
}
}

function hideMenu(id)
{
if (dhtml)
{
if (!justMovingUp)
{
moveUp = true;
clearTimeout(timer);
showMenu2(id);
justMovingUp = true;
timer = setTimeout('hideMenu2(' + id + ')',50);
}
else if (queue == id) queue = '';
}
}

function hideMenu2(id)
{
if ((((getTop('hiddenMenu1') != -33) && (id == 1)) || ((getTop('hiddenMenu2') != -49) && (id == 2)) || ((getTop('hiddenMenu3') != -49) && (id == 3))) && (moveUp))
{
setTop('hiddenMenu' + id,true,-2);
if ((id == 3) && (getTop('hiddenMenu3') != 21))
{
if (dom) document.getElementById('hiddenMenu3').style.zIndex = 1;
else if (ie4) document.all.hiddenMenu3.style.zIndex = 1;
else if (ns4) document.menuHolder.document.hiddenMenu3.zIndex = 1;
}
timer = setTimeout('hideMenu2(' + id + ')',15);
}
else
{
moveUp = false;
justMovingUp = false;
if (queue != '') showMenu(queue);
}
}

function dontHideMenu(id)
{
if (dhtml)
{
if ((!justMovingDown) && (!justMovingUp)) clearTimeout(timer);
if (moveUp) showMenu(id);
}
}

</script>

<style type="text/css">

.menuItem {font-family: "Helvetica CE", "Arial CE", Helvetica, Arial, "sans-serif"; font-size: 13px; color: black; background-color: #dde3eb; border: 1px solid #7f8893; padding: 2px; text-align: center;}

a.menuLink {font-family: "Helvetica CE", "Arial CE", Helvetica, Arial, "sans-serif"; font-size: 13px; color: black; text-decoration: none;}

a.menuLink:active {font-family: "Helvetica CE", "Arial CE", Helvetica, Arial, "sans-serif"; font-size: 13px; color: black; text-decoration: none;}

a.menuLink:visited {font-family: "Helvetica CE", "Arial CE", Helvetica, Arial, "sans-serif"; font-size: 13px; color: #336699; text-decoration: none;}

a.menuLink:hover {font-family: "Helvetica CE", "Arial CE", Helvetica, Arial, "sans-serif"; font-size: 13px; color: #cc0000; text-decoration: none;}

.cssSupport {display: none;}

#visibleMenu1 {height: 16px; width: 52px; cursor: default;}

#visibleMenu2 {height: 16px; width: 85px; cursor: default;}

#visibleMenu3 {height: 16px; width: 49px; cursor: default;}

#hiddenMenu1 {width: 56px; height: 52px;}

#hiddenMenu2 {width: 90px; height: 68px;}

#hiddenMenu3 {width: 92px; height: 68px;}

</style>

<p>obsah stránky<br>
txtxtxtxtxtxtxtxxtxtxtxtxtttx<br><br></p>


<span id="scriptSupport">Tato stránka bude správně zobrazena pouze v moderním vizuálním prohlížeči, který bohužel nepoužíváte. I tak je ale stránka plně použitelná.</span><span class="cssSupport"><br></span>


<div id="menuHolder">

<div id="visibleMenu1" onmouseover="showMenu(1);" onmouseout="hideMenu(1);"><div class="menuItem">Portály<script type="text/javascript">function onMouseOver() {showMenu(1);} function onMouseOut() {hideMenu(1);}</script><span class="cssSupport"><br></span></div></div>

<div id="hiddenMenu1" onmouseover="dontHideMenu(1);" onmouseout="hideMenu(1);"><div class="menuItem"><a href="http://atlas.cz" class="menuLink">Atlas</a><br><a href="http://centrum.cz" class="menuLink">Centrum</a><br><a href="http://seznam.cz" class="menuLink">Seznam</a><script type="text/javascript">function onMouseOver() {dontHideMenu(1);} function onMouseOut() {hideMenu(1);}</script><span class="cssSupport"><br></span></div></div>


<div id="visibleMenu2" onmouseover="showMenu(2);" onmouseout="hideMenu(2);"><div class="menuItem">Zpravodajství<script type="text/javascript">function onMouseOver() {showMenu(2);} function onMouseOut() {hideMenu(2);}</script><span class="cssSupport"><br></span></div></div>

<div id="hiddenMenu2" onmouseover="dontHideMenu(2);" onmouseout="hideMenu(2);"><div class="menuItem"><a href="http://cnn.com" class="menuLink">CNN</a><br><a href="http://ceskenoviny.cz" class="menuLink">České Noviny</a><br><a href="http://idnes.cz" class="menuLink">iDNES</a><br><a href="http://www.lidovky.cz" class="menuLink">Lidovky</a><script type="text/javascript">function onMouseOver() {dontHideMenu(2);} function onMouseOut() {hideMenu(2);}</script><span class="cssSupport"><br></span></div></div>


<div id="visibleMenu3" onmouseover="showMenu(3);" onmouseout="hideMenu(3);"><div class="menuItem">Zábava<script type="text/javascript">function onMouseOver() {showMenu(3);} function onMouseOut() {hideMenu(3);}</script><span class="cssSupport"><br></span></div></div>

<div id="hiddenMenu3" onmouseover="dontHideMenu(3);" onmouseout="hideMenu(3);"><div class="menuItem"><a href="http://www.techno.cz" class="menuLink">Czech Techno</a><br><a href="http://flashfun.cz" class="menuLink">FlashFun</a><br><a href="http://www.kompost.cz" class="menuLink">Kompost</a><br><a href="http://novinky.cz" class="menuLink">Novinky</a><script type="text/javascript">function onMouseOver() {dontHideMenu(3);} function onMouseOut() {hideMenu(3);}</script><span class="cssSupport"><br></span></div></div>

<div id="whiteMenu"><script type="text/javascript">if (ns4) document.write('<img src="white.gif" width=227 height=23 border=0 alt="Nic">');</script><span class="cssSupport"><br></span></div>

</div>

<script type="text/javascript">
menu();
</script>

<!--
problem s atributem z-index
aby se dalo cist z vlastnosti top tak je treba ji napred nastavit ve skriptech!!
-->
</body>
</html>
Niggas
Junior
Uživatelský avatar


Kdo je online

Uživatelé procházející toto fórum: Žádní registrovaní uživatelé a 0 návštevníků