Dvoupolohové menu – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Dvoupolohové menu – CSS – Fórum – Programujte.comDvoupolohové menu – CSS – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Jan Hák
~ Anonymní uživatel
4 příspěvky
15. 8. 2013   #1
-
0
-

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.–
Reklama
Reklama
Flu0
Návštěvník
15. 8. 2013   #2
-
0
-

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
-
0
-

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

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
-
0
-

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

<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_show:hover ~ .menu_slave_show {
            display: none;
        }

        .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>

Nahlásit jako SPAM
IP: 88.146.220.–
Flu0
Návštěvník
16. 8. 2013   #6
-
0
-

#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.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 12 hostů

Podobná vlákna

Menu — založil dinkin

MENU — založil Anonymní uživatel

Menu — založil Eddie

Menu — založil Peťan

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý