Avatar
niveses
Redaktor
Avatar
niveses:

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:

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:

Š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:

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:

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:

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:

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

Nahoru Odpovědět 12.11.2013 19:34
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
niveses
Redaktor
Avatar
niveses:

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:

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.