WebTechnologie - ukázkové skripty PHP, XHTML, JavaScript, CSS... (c) Scorpions.cz

HOME SKRIPTY
Menu-dvojklikací
Normální položka
Zobrazeno: 8162

Popis: Menu, které se rozevírá pomocí dvojkliku.
Funkčnost: IE 5.5 a vyššie, Mozzila Firefox
Hodnocení: ****
Kompletně celý postup je popsán přímo ve scriptu, prosím, nezapomeňte si jej řádně upravit! V dalších verzích bude lokalizován do češtiny! 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!--

Autor: Wiki

Nepouzivajte tag <base target="neco">, potom by sa prehliadac snazil skript spusit z inej stranky
potom budete musiet vsade pouzit target="_self".

Doporucujem vytvorit stranku menu.html (tato), index.html s obsahom:
...
</head>
<frameset COLS="100px, *" border="1" frameborder="1" framespacing="0">
  <frame src="menu.html">
  <frame src="uvod.html" name="ramec">
</frameset>
<body>
...

a este uvod.html (pociatocna stranka). A na odkazy na konkretne stranky pridat target="ramec".

Potom sa bude dat velkost (sirka) menu menit priamo na stranke a clanky sa budu zobrazovat vedla.

Ak budete pouzivat velmi vela odkazov v malom pocte rozbalovacich poloziek, tak pouzite tag base, ale potom sa to mili.

-->
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Menu exemplare</title>
<script language="javascript">
function zobrazit(co) // co znamena "co" sa ma zobrazit/skryt
{
  if(document.getElementById(co).style.display == "none") // ak je menu zatvorene
  {
    document.getElementById(co).style.display = "inline"; // tak sa otvori
      //miesto inline mozte dat vsetky varianty atributu display (okrem none :)
  }
  else  // inak s zavrie
  {
    document.getElementById(co).style.display = "none";
  }
        
}

</script>
<style>

/* telo */

body
{
  font-family: Verdana;
  font-size: 12px;
}

/* hlavne menu */

a
{
  font-size: 12px;
  color: #006699;
  text-decoration: none;
}

a:hover
{
  color: #dd6900;
  text-decoration: underline;
}

/* zabezpeci, ze menu bude po nacitani stranky zavrete */

span
{
  display: none;
}

/* subrozbalovacie menu */

a.small
{
  font-size: 11px;
  color: #006699;
  text-decoration: none;
}

a:hover.small
{
  color:#ffcc00;
}

/* konkretny clanok */

a.konkretne
{
  font-size: 10px;
  color: black;
  text-decoration: none;
} 

a:hover.konkretne
{
  color: #7f7f7f;
}

/* posunutie celej navigacie o 5px */

.navigacia
{
  display: inline;
  position: relative;;
  left: 5px;
}

/* iba slovicko obsah */

a.main
{
  font-size: 14px;
  color: #006699;
  text-decoration: none;
}

a:hover.main
{
  color: #ff6633;
  text-decoration: none;
}

</style>
  </head>
  <body>
<a href="vasa_stranka" class="main" target="vas_ramec">Obsah</a><br>
<span id="navigacia" class="navigacia">  
<!--

Cela navigacia je v useku textu (span), aby mohla byt posunuta od okraja o 5 px.

Ak chcete pridat novy zoznam (teraz su dva: php, html), alebo sub menu, tak musite najskvor vytvorit odkaz
<a href="javascript: zobrazit('meno')">, kde namiesto meno vlozite nazov (id) spanu
(id tam musi byt, aby prehliadac vedel co ma skryt / ukazat),
<span id="meno"> a sem pridate zoznam poloziek (alebo aj sub menu)
</span>

Rozdiel medzi hlavnym menu a sub, je len v pouzitych triedach (aby boli rozlisene).

Pokial chcete pridat odkaz na nejaku stranku na odkaz, nezabudnite pridat target!

--> 

<!------- PHP ------->

<a href="javascript: zobrazit('php')">php</a>

<span id="php">
  <br> <a class="small" href="javascript: zobrazit('php_uk');">Ukážky</a>
    <span id="php_uk">
      <br>  <a class="konkretne" target="vas_ramec" href="vasa_stranka">Clanok 1</a>
      <br>  <a class="konkretne" target="vas_ramec" href="vasa_stranka">Clanok 2</a>
    </span>
    
  <br> <a class="small" href="javascript: zobrazit('php_dl');">Download</a>
   <span id="php_dl">
     <br>  <a class="konkretne" target="vas_ramec" href="vasa_stranka">Clanok 3</a>
     <br>  <a class="konkretne" target="vas_ramec" href="vasa_stranka">Clanok 4</a>
   </span>
  
</span><br>


<!------- HTML -------> 

<a href="javascript: zobrazit('html')">html</a>

<span id="html">
  <br> <a class="small" href="javascript: zobrazit('html_uk');">Ukážky</a>
    <span id="html_uk">
      <br>  <a class="konkretne" target="vas_ramec" href="vasa_stranka">Clanok 5</a>
      <br>  <a class="konkretne" target="vas_ramec" href="vasa_stranka">Clanok 6</a>
   </span>
         
  <br> <a class="small" href="javascript: zobrazit('html_dl');">Download</a>
    <span id="html_dl">
     <br>  <a class="konkretne" target="vas_ramec" href="vasa_stranka">Clanok 7</a>
     <br>  <a class="konkretne" target="vas_ramec" href="vasa_stranka">Clanok 8</a>
   </span>  
</span>

<!-- Koniec celej navigacie posledny </span> sa tyka formatovatia celeho menu -->

</span>

  </body>
</html>