Anonymní profil Jan Hák – Programujte.com

Příspěvky odeslané z IP adresy 88.146.220.–

Jan Hák

CSS › Dvoupolohové menu

16. 8. 2013 #180444

Ještě doplním, úplně korektně se to chová s css:

Jan Hák

CSS › Dvoupolohové menu

16. 8. 2013 #180441

Podařilo se mi najít řešení!
Jednodužší, než jsem si myslel. Stačilo zjistit, že + je na následující element, zatímco ~ je na kterýkoli. :)

Zde je funkční kód:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Menu</title>
</head>

<body>
   <style>
       #menu {
           width: 500px;

       }

       .menu_master:hover + .menu_master_show {
           display: block;
       }
       .menu_master_show:hover {
           display: block;
       }

       .menu_master:not(:hover) ~ .menu_slave_show {
           display: block;
       }
       .menu_slave_show:hover {
           display: block;
       }
       .menu_master {
           background:green;
           width: 100px;
           float: left;
       }
       .menu_slave {
           background: red;
           width: 100px;
           float:left;
       }
       .menu_master_show {
           background:purple;
           width: 300px;
           float:left;
           display: none;
       }
       .menu_slave_show {
           background: yellow;
           width: 300px;
           float:left;
           display: none;
       }

   </style>
   <div id="menu" width="500px">

           <div class="menu_master">
               A
           </div>
           <div class="menu_master_show">
               hoj
           </div>
           <div class="menu_slave_show">
               bit
           </div>
           <div class="menu_slave">
               CH
           </div>
   </div>
</body>
</html>

Admini, VYŘEŠENO

Jan Hák

CSS › Dvoupolohové menu

16. 8. 2013 #180439

#2 Flu
Netvrdím že je to nejlepší řešení, spíše řešení, které jsem uvažoval jako správné.

Jinak po vyzkoušení se to chová pořád divně. Jde o to, aby se ty dva prostřední divy zobrazovaly "na střídačku". V původní poloze jeden, a v případě že najedu na jednu stranu, zobrazí se druhý.

Hover a not hover je myslený jako if hover, else :D
Každopádně se na to ještě dnes podívám. Řešení stále hledám !

Jan Hák

CSS › Dvoupolohové menu

15. 8. 2013 #180420

Dobrý den.
Chtěl jsem bez použití javascriptu a ajax obecně pohyblivé menu. V kódu, který je níže, je označena část která nefunguje. Jde o to, že chci mít zobrazenou jednu část menu, a v případě najetí na dannou část jí překreslit odkazy z druhého menu.

Celkově se mi nedaří rámeček menu_slave_show zobrazit.

Podle slov, která jsou napsána, tak:
V případě bežného pohybu po stránce zobrazeno A - bit-ch
V případě najetí na A zobrazeno A-hoj - ch

Kód:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Menu</title>
</head>

<body>
   <style>
       #menu {
           width: 500px;

       }

       .menu_master:hover + .menu_master_show {
           display: block;
       }
       .menu_master_show:hover {
           display: block;
       }

<!--- NEFUNKCNI CAST
       .menu_master:not(:hover) + .menu_slave_show {
           display: block;
       }
       .menu_slave_show:hover {
           display: block;
       }
   KONEC ---!>

       .menu_master {
           background:green;
           width: 100px;
           float: left;
       }
       .menu_slave {
           background: red;
           width: 100px;
           float:left;
       }
       .menu_master_show {
           background:purple;
           width: 300px;
           float:left;
           display: none;
       }
       .menu_slave_show {
           background: yellow;
           width: 300px;
           float:left;
           display: none;
       }

   </style>
   <div id="menu" width="500px">

           <div class="menu_master">
               A
           </div>
           <div class="menu_master_show">
               hoj
           </div>

           <div class="menu_slave_show">
               bit
           </div>
           <div class="menu_slave">
               CH
           </div>

   </div>
</body>
</html>