IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: IMG jako rozbalovací menu

Aktivity
Avatar
Lukáš Navrátil
Člen
Avatar
Lukáš Navrátil:9.5.2020 10:17

Zdravím,

snažím se vytvořit IMG jako rozbalovací tlačítko pro menu a z nějakého důvodu se mi to nedaří.

Proto bych rád požádal o pomoc.

Čerpám z https://www.w3schools.com/…dropdown.asp.

Zkusil jsem: Na www.tersource.cz je kód, který by dle mého názoru měl fungovat. Bohužel se ale po najetí na tlačítko nic nestane.

Na http://tersource.cz/button.php je příklad z W3schools a funguje dobře.

Je možné, že problémem je to, že se jedná o obrázek? Zkoušel jsem i samotný button a i tak nefungoval jak má.

Chci docílit: Chtěl bych "Burger" menu, na které když najedu, otevře se seznam odkazů.

V budoucnu to budu dělat přes SVG, ale nelíbí se mi že to nefunguje.

Díky moc

 
Odpovědět
9.5.2020 10:17
Avatar
Ondřej Šrytr
Člen
Avatar
Odpovídá na Lukáš Navrátil
Ondřej Šrytr:9.5.2020 13:40

Ahoj,

mohl bys sem vložit svůj kód, se kterým ti to nefungovalo? Použít <img> by neměl být problém.

 
Nahoru Odpovědět
9.5.2020 13:40
Avatar
Lukáš Navrátil
Člen
Avatar
Lukáš Navrátil:9.5.2020 19:35

Ahoj, díky za reakci.

https://www.codepile.net/pile/59epOJmq - HTML
https://www.codepile.net/pile/5RZBgrRv - CSS

Díky

 
Nahoru Odpovědět
9.5.2020 19:35
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:9.5.2020 20:51

Kdyz davas kod, tak zkus priste:

  1. odkaz na stranku
  2. odkaz na fiffle, treba
  3. Pridej kod sem, obal jej pres tlacitko
</>

<! -- https://jsfiddle.net/5mu3gphf/ -->
<style>
header{
    background-color: #90005F;
    min-height: 50px;
}

.dropdown{
    position: relative;
    display: inline-block;

    }
.logo{
    height: 40px;
    width: 120px;
    margin: 5px 0 0 2px;
    float: left;
}

.ddcontent{
    display: none;
    position: absolute;
    background-color: grey;
    min-width: 80px;
    z-index: 1;
    box-shadow: 0 8px 16px 0;
}

.menubtn{
    height: 31px;
    width: 35px;
    margin: 5px 0 0 5px;


}
.dropdown:hover .ddcontent {
    display: block;
}

.ddtrans {
    background-color: transparent;
    border: none;
    float: right;
}
</style>
<html>
    <head lang="cz-cs">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="UTF-8">
        <title>Vítejte na Salente.cz</title>
        <link rel="stylesheet" href="./css/style.css"/>
    </head>
    <body>

            <header>
                <div id="branding">
                    <img src="./img/logo-salente.png" alt="Salente Logo" class="logo">
                </div>
                <div id="dropdown">
                    <button class="ddtrans"><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="menubtn"></button>
                <div class="ddcontent">
                    <a href="">E-shop</a>
                    <a href="">Novinky</a>
                    <a href="">Kde koupit</a>
                    <a href="">O nas</a>
                    <a href="">Podpora</a>
                    <a href="">Kariera</a>
                    <a href="">Kosik</a>
                </div>
                </div>
            </header>
    </body>
</html>

Zkus si nastudovat zaklady css.

<span id="aaa" class="bbb"></span>
<style>
#aaa {} /*id */
.bbb {} /* class */
</style>
Editováno 9.5.2020 20:53
 
Nahoru Odpovědět
9.5.2020 20:51
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:9.5.2020 20:55

Nebo jinak, kdyz ti reknu, ze mas chybu v zapise id a class, dokazet si vypsat z html kodu seznam id, seznam class a totez udelat podle css a pak oba seznamy porovnat a najit chybu? :)

 
Nahoru Odpovědět
9.5.2020 20:55
Avatar
Lukáš Navrátil
Člen
Avatar
Lukáš Navrátil:9.5.2020 21:01

Odkaz na stránku je nahoře - www.tersource.cz

Budu už používat CodePile když se budu na něco ptát.

Jsem za blbce, protože jsem si nezkontroloval id/class. Rozdíl samozřejmě znám, jen jsem asi jel v nějakém automatickém módu a soustředil jsem se na obsah místo na formu.

Díky za radu!

 
Nahoru Odpovědět
9.5.2020 21:01
Avatar
Fondzee
Člen
Avatar
Fondzee:16.9.2020 13:29

https://codepen.io/…/pen/LYNBMVK

 
Nahoru Odpovědět
16.9.2020 13:29
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 7 zpráv z 7.