Dvoupolohové menu

~ Anonymní uživatel
~ 4 příspěvky

15. 8. 2013 #1

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>

Nahlásit jako SPAM

IP: 88.146.220.–

Flu0

Návštěvník

15. 8. 2013 #2

Problém je v selectoru, + znamená přímý následovník a ty mezi tím máš ještě .menu_master_show. Kód dole by měl fungovat, ale moc nechápu k čemu používáš :not - nastavuješ tím prakticky výchozí stav, tak proč to neudělat rovnou

.menu_master:not(:hover) + div + .menu_slave_show

Nahlásit jako SPAM

IP: 77.48.21.–

Jan Hák

~ Anonymní uživatel
~ 4 příspěvky

16. 8. 2013 #3

#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 !

Nahlásit jako SPAM

IP: 88.146.220.–

Jan Hák

~ Anonymní uživatel
~ 4 příspěvky

16. 8. 2013 #4

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

Nahlásit jako SPAM

IP: 88.146.220.–

Jan Hák

~ Anonymní uživatel
~ 4 příspěvky

16. 8. 2013 #5

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

Nahlásit jako SPAM

IP: 88.146.220.–

Flu0

Návštěvník

16. 8. 2013 #6

#3 Jan Hák
Přiznám se, že jsem koukala jen na tu část kódu označenou jako nefunkční, co to má jako celek dělat jsem neřešila

If a else je pro hover stavy v podstatě zbytečný - v css si napíšeš, jak to má vypadat v "else" stavu a pak k tomu už jen přidáš hover stav. Ty tam zbytečně máš display: none, který pak přes :not() přepisuješ na display: block.

Nahlásit jako SPAM

IP: 93.157.132.–

← Zpět na seznam vláken ← Zpět do Fóra