Autor Zpráva
Anonymní
Profil *
#1 · Zasláno: 26. 1. 2006, 18:52:13
Odpovědět Citovat
Potřebuji nějaké horizontální víceúrovňové menu. Najlépe pomocí CSS + htc komponenty pro MSIE, ale stačí i samotný JavaScript. Menu musí mít v HTML tento tvar: 

<ul>



  <li><a href="...">...</a>

  </li>



  <li><a href="...">...</a>

    <ul>

      <li><a href="...">...</a></li>

      <li><a href="...">...</a>

        <ul>

          <li><a href="...">...</a></li>

        </ul>

      </li>

    </ul>

  </li>



  <li><a href="...">...</a>

    <ul>

      <li><a href="...">...</a></li>

      <li><a href="...">...</a></li>

    </ul>

  </li>

...

</ul>

Děkuji za pomoc.
Miloš
Profil
#2 · Zasláno: 27. 1. 2006, 20:29:43
Odpovědět Citovat
Tu je to; pokud nemáš soubor hover.htc, najdeš ho na www.hszk.bme.hu/~hj130/css/list_menu/hover/ 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

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

  <!--[if IE]><style type="text/css">li {behavior: url(./hover.htc);}</style><![endif]-->

  <style type="text/css">

    ul.vnoreny, ul.podvnoreny {display: none;}

    ul.hlavni li:hover ul.vnoreny, ul.hlavni li.hover ul.vnoreny,

      ul.vnoreny li:hover ul.podvnoreny, ul.vnoreny li.hover ul.podvnoreny {display: list-item;}

  </style>

  <meta http-equiv="content-language" content="cs">

  <title>Menu</title>

</head>



<body>

<ul class="hlavni">

  <li><a href="#">První odkaz</a></li>

  <li><a href="#">Druhý odkaz</a>

    <ul class="vnoreny">

      <li><a href="#">1. vnořený do 2. odkazu</a></li>

      <li><a href="#">2. vnořený do 2. odkazu</a>

        <ul class="podvnoreny">

          <li><a href="#">1. vnořený do 2. vnořeného</a></li>

        </ul>

      </li>

    </ul>

  </li>

  <li><a href="#">Třetí odkaz</a>

    <ul class="vnoreny">

      <li><a href="#">1. vnořený do 3. odkazu</a></li>

      <li><a href="#">2. vnořený do 3. odkazu</a></li>

    </ul>

  </li>

</ul>



</body>

</html>
Miloš
Profil
#3 · Zasláno: 27. 1. 2006, 20:39:29
Odpovědět Citovat
PS. Kdyby nebylo potřeba dbát na Exploder, šel by celý stylopis zapsat daleko úsporněji: 
ul li>ul {display: none;}

ul li:hover>ul {display: list-item;}

a veškeré class.nejakvnorena by byly zbytečné.
Ještě že ten Mrqo$oft máme, aspoň nám nekrní mozkové buňky :-(
Miloš
Profil
#4 · Zasláno: 27. 1. 2006, 21:23:46
Odpovědět Citovat
Horizontální – teď koukám, že jsem popsal vertikální, takže horizontální takto: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

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

  <!--[if IE]><style type="text/css">li {behavior: url(./hover.htc);}</style><![endif]-->

  <style type="text/css">

    ul.hlavni {position: relative; margin: auto; width: 800px;}

    li#prvni, li#druhy, li#treti {position: absolute; top: 0; left: 0;}

    li#druhy {left: 8em;} li#treti {left: 16em;}

    ul.vnoreny, ul.podvnoreny, li:hover ul li ul, li.hover ul li ul {display: none}

    li:hover ul, li.hover ul, li:hover ul li:hover ul, li.hover ul li.hover ul {display: block}

  </style>

  <meta http-equiv="content-language" content="cs">

  <title>Menu</title>

</head>



<body>

<ul class="hlavni">

  <li id="prvni"><a href="#">První odkaz</a></li>

  <li id="druhy"><a href="#">Druhý odkaz</a>

    <ul class="vnoreny">

      <li><a href="#">1. vnořený do 2. odkazu</a></li>

      <li><a href="#">2. vnořený do 2. odkazu</a>

        <ul class="podvnoreny">

          <li><a href="#">1. vnořený do 2. vnořeného</a></li>

        </ul>

      </li>

    </ul>

  </li>

  <li id="treti"><a href="#">Třetí odkaz</a>

    <ul class="vnoreny">

      <li><a href="#">1. vnořený do 3. odkazu</a></li>

      <li><a href="#">2. vnořený do 3. odkazu</a></li>

    </ul>

  </li>

</ul>



</body>

</html>


Je to trochu složitější; to pozicování jsem nakonec udělal jenom kvůli Exploderu, protože byl velice neodbytný v posouvání třetího hlavního odkazu, když se rozbalil druhý.
Bez Exploderu by i toto vypadalo daleko lidštěji: 
li {display: block; float: left; width: 8em;}

li>ul {display: none;}

li:hover>ul {display: block;}

li:hover>ul li {width: 15em;}
Anonymní
Profil *
#5 · Zasláno: 29. 1. 2006, 17:06:43
Odpovědět Citovat
Dík za pomoc. Funguje to. Nicméně jsme se rozhodl navigaci udělat trochu jinak bez toho menu.
Časová prodleva: 18 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0