Válí se ti projekty v šuplíku? Dostaň je mezi lidi a získej cool tričko a body na profi IT kurzy v soutěži ITnetwork summer 2017!
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

Diskuze: Hover efekt menu přes layout

HTML a CSS HTML a CSS Hover efekt menu přes layout American English version English version

Aktivity (1)
Avatar
niveses
Redaktor
Avatar
niveses:12.11.2013 18:31

Ahoj, dělám menu. Když najedu myší (hover efekt) na položku v menu, chtěl bych, aby se mi zobrazila šipka. (viz obrázek). Bohužel se mi ale nechce zobrazit. Přikládám foto, jak by to mělo vypadat.

Děkuji

 
Odpovědět 12.11.2013 18:31
Avatar
vodacek
Redaktor
Avatar
Odpovídá na niveses
vodacek:12.11.2013 18:46

bez ani trošky kodu ti nikdo asi nedovede pomoci

 
Nahoru Odpovědět 12.11.2013 18:46
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na niveses
David Čápka:12.11.2013 18:48

Šipku můžeš napozicovat relativně a posunout ji tak, aby z elementu takhle koukala. Potom stačí ji stačí jen zobrazovat/skrývat s hoverem.

Editováno 12.11.2013 18:51
Nahoru Odpovědět 12.11.2013 18:48
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
niveses
Redaktor
Avatar
niveses:12.11.2013 18:49

Tak mám klasické menu

#nav{
        height: 122px !important;
        width: 980px;
        margin-left: auto;
        margin-right: auto;
        height: 122px;
}
#nav ul {
        padding: 0px;
        margin: 0px;
        height: 122px;
}

#nav li{
        float: left;
        list-style: none;
        font-family: "menu_font";
        height: 100%;
        margin: 0px;
        padding:0px;

}
#nav ul li a{
        width: 100% !important;
        height: 100% !important;
        color: #006da1;
        text-decoration: none;
        display: block;
        margin-top: 0;
        padding-top: 0;

}
#nav ul li a p{
        padding-left: 23px;
        padding-right: 23px;
        padding-top: 50px;
        margin-top: 0;

}

#nav ul li:hover{
        background-image: url("../img/hover.PNG");
        z-index: 999;
}
#nav ul li a:hover{
        color: white;
}
#nav ul li p:hover{
        border-right: none;
        display: block;
        position: absolute;
        z-index: 999;
}

Obrázek hover.PNG je modrá "šipka" (1.post). Potřeboval bych, aby se zobrazila celá ta šipka. Nyní se zobrazí pouze těch 122 px (ul). Pokud, ale zruším pixely, tak se mi to celé rozhodí.

Děkuji

 
Nahoru Odpovědět 12.11.2013 18:49
Avatar
niveses
Redaktor
Avatar
niveses:12.11.2013 18:56

Jo už to mám

#nav ul li:hover{
        background-image: url("../img/hover.PNG");
        z-index: 999;
        position: relative;
        height: 156px;

}

Tak díky moc :)

 
Nahoru Odpovědět 12.11.2013 18:56
Avatar
niveses
Redaktor
Avatar
Odpovídá na David Čápka
niveses:12.11.2013 19:11

Ještě se zeptám. Mám obtázek, který by mi měl dělat tu šipku. V menu, mám ale každé "li" jiné.Jak co nejjednodušeji nastavit, aby byla šipka všude stejně hluboká, ale jinak široká, dle "li"?

Díky

 
Nahoru Odpovědět 12.11.2013 19:11
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na niveses
Honza Bittner:12.11.2013 19:34

nastav výšku pevně (třeba 50px) a šířku na 100% toho li

Nahoru Odpovědět 12.11.2013 19:34
Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a zeptat na cokoli se mě můžeš na https://github.com/HoBi/...
Avatar
niveses
Redaktor
Avatar
niveses:12.11.2013 19:44

To bylo první co mě napadlo, avšak:

#nav ul li:hover{
        background-image: url("../img/hover.PNG");
        z-index: 999;
        position: relative;
        height: 156px;
        width: 100%;
}

Vypadá to takhle
Honza Bittner

Editováno 12.11.2013 19:45
 
Nahoru Odpovědět 12.11.2013 19:44
Avatar
niveses
Redaktor
Avatar
niveses:14.11.2013 17:15

Netuší někdo?

 
Nahoru Odpovědět 14.11.2013 17:15
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 9 zpráv z 9.