NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!
Avatar
niveses
Tvůrce
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
Tvůrce
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 Hartinger
Vlastník
Avatar
Odpovídá na niveses
David Hartinger: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
New kid back on the block with a R.I.P
Avatar
niveses
Tvůrce
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
Tvůrce
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
Tvůrce
Avatar
Odpovídá na David Hartinger
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
Tvůrce
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
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
niveses
Tvůrce
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
Tvůrce
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.