NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:
Avatar
Ondrca
Tvůrce
Avatar
Ondrca:4.3.2014 17:37

Ahoj lidi, potřeboval bych udělat menu, na které, když najedu na odkaz se animovaně posune dolů.
Mám následující kód:

<div class="menu">
<a href="odkaz.html" id="a">Odkaz</a>
<a href="odkaz.html" id="b">Odkaz</a>
<a href="odkaz.html" id="c">Odkaz</a>
<a href="odkaz.html" id="d">Odkaz</a>
</div>
<div class="obsah">
</div>

a css:

*{
        text-decoration: none;
        font-family:Sehgoe UI light,Segoe Ui,Ubuntu,Calibri;
        transition:all 0.5s;
        -webkit-transition:all 0.5s;
        -moz-transition:all 0.5s;
}
.menu{
        width: 950px;
        margin: 0 auto;
        padding-top: 10px;
}
#a,#b,#c,#d{
box-shadow:0px 15px 0px;
font-size:25px;
        padding: 50px;
        color:white;
        margin-left:25px;
        line-height:175px;
}
#a:hover,#b:hover,#c:hover,#d:hover{
        position: relative;
        top: 20px;
}
#a{
background-color: #990000;
}
#b{
background-color: #009900;
}
#c{
background-color: #000099;
}
#d{
background-color: #430730;
}

Dolů se mi to posune, ale bohužel ne animovaně.
Doufám, že mi někdo poradí.
Díky moc předem

Editováno
Odpovědět
4.3.2014 17:37
Zase jsem o něco chytřejší
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Michal Žůrek - misaz:4.3.2014 17:39

bez JS neuděláš ani ránu.

 
Nahoru Odpovědět
4.3.2014 17:39
Avatar
Ondrca
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Ondrca:4.3.2014 17:40

Doufal jsem, že to půjde jen přes čisté css, ostatní animace mi fungují - jenom to top ne :(

Nahoru Odpovědět
4.3.2014 17:40
Zase jsem o něco chytřejší
Avatar
Ondrca
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Ondrca:4.3.2014 18:32

Nenapsal bys mi ten kód pls?

Nahoru Odpovědět
4.3.2014 18:32
Zase jsem o něco chytřejší
Avatar
done
Člen
Avatar
Odpovídá na Ondrca
done:4.3.2014 18:36 
$(document).ready(function(){
$("a").mouseover(function(){
$(this).animate({top: "+=20px"},2000)
});
})
 
Nahoru Odpovědět
4.3.2014 18:36
Avatar
Benjibs
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
Benjibs:4.3.2014 18:39

Naozaj?
https://mdn.mozillademos.org/…example.html

Ide to aj bez použitia JS

Editováno
Nahoru Odpovědět
4.3.2014 18:39
1 + 1 = 2
Avatar
Ondrca
Tvůrce
Avatar
Odpovídá na done
Ondrca:4.3.2014 18:40

Ahoj, dík za odpověď, ale tvůj script mi nefunguje :(

Nahoru Odpovědět
4.3.2014 18:40
Zase jsem o něco chytřejší
Avatar
done
Člen
Avatar
Odpovídá na Ondrca
done:4.3.2014 18:40

Máš importovanou jQuery ?

 
Nahoru Odpovědět
4.3.2014 18:40
Avatar
Ondrca
Tvůrce
Avatar
Odpovídá na done
Ondrca:4.3.2014 18:41

Mám:

<script>
  $(document).ready(function(){
  $("a").mouseover(function(){
  $(this).animate({top: "+=20px"},2000)
  });
  })
  </script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Nahoru Odpovědět
4.3.2014 18:41
Zase jsem o něco chytřejší
Avatar
Ondrca
Tvůrce
Avatar
Odpovídá na Benjibs
Ondrca:4.3.2014 18:42

Ahoj, ale to není to co chci

Nahoru Odpovědět
4.3.2014 18:42
Zase jsem o něco chytřejší
Avatar
Benjibs
Člen
Avatar
Odpovídá na Ondrca
Benjibs:4.3.2014 18:53

Môžeš si tam predsa v CSS pridať transitiony, aby to bolo aj animované :)
Edit: Ondrca: vymeň poradie tých skriptov. Odkaz na jQuery by mal byť prvý.

Editováno
Nahoru Odpovědět
4.3.2014 18:53
1 + 1 = 2
Avatar
Ondrca
Tvůrce
Avatar
Odpovídá na Benjibs
Ondrca:4.3.2014 18:56

Ani po výměně to nefunguje.
Transitiony tam mám, ale já nechci dělat tohle vyjížděcí menu.

Nahoru Odpovědět
4.3.2014 18:56
Zase jsem o něco chytřejší
Avatar
done
Člen
Avatar
Odpovídá na Ondrca
done:4.3.2014 19:00

zkus odstranit "+=" a nechat tam pouze "20px".

 
Nahoru Odpovědět
4.3.2014 19:00
Avatar
Ondrca
Tvůrce
Avatar
Odpovídá na done
Ondrca:4.3.2014 19:09

pořád nic :(

Nahoru Odpovědět
4.3.2014 19:09
Zase jsem o něco chytřejší
Avatar
Libor Šimo (libcosenior)
Tvůrce
Avatar
Odpovídá na Ondrca
Libor Šimo (libcosenior):4.3.2014 19:38

Skús sa pozrieť sem: http://www.w3schools.com/…ef/tryit.asp?…

Nahoru Odpovědět
4.3.2014 19:38
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
KleoCZ
Člen
Avatar
KleoCZ:4.3.2014 20:01

Tak ... zde máš výsledek http://jsfiddle.net/Kleo86/8h8rW/1/ ... jinak pár věcí:

  1. id si myslím, že by měly být unikátní i v css ... tzn. jednou jim dáváš rozměr pak zvláště barvy nevim no (zkusit použít třídy nebo jiné selectory)
  2. takovéto menu se řeší přes <ul><li>, je to rozhodně lepší pro manipulaci do budoucna a i manipulaci přes jquery ;)
  3. jak psal libco http://www.w3schools.com/ ... nechť je tvou modlou, jestli chceš postoupit trochu dále ;)

Kdybys měl ještě dotazy, tak mi pošli poštu ;) Měj se.

PS: vše co se má na stránce hýbat je opravdu možná lepší řešit jquery ;)

Editováno
Nahoru Odpovědět
4.3.2014 20:01
Apeluji na všechny co odpovídají na dotazy, tak pokud je to jen trochu možné dávejte rovnou reálná řešení třeba v htt...
Avatar
Ondrca
Tvůrce
Avatar
Odpovídá na KleoCZ
Ondrca:4.3.2014 20:02

Dík

Nahoru Odpovědět
4.3.2014 20:02
Zase jsem o něco chytřejší
Avatar
Ondrca
Tvůrce
Avatar
Odpovídá na KleoCZ
Ondrca:4.3.2014 20:08

Jenom ještě - nevíš, jak udělat aby se to provedlo jenom jednou (to už je) a ale aby to zůstalo nakonec když na tom mám pořád myš, tak aby to zůstalo na pozici top:10px?

Nahoru Odpovědět
4.3.2014 20:08
Zase jsem o něco chytřejší
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 18 zpráv z 18.