Diskuze: Problém s menu

HTML a CSS HTML a CSS Problém s menu American English version English version

Avatar
Ondrca
Redaktor
Avatar
Ondrca:

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 4.3.2014 17:38
Odpovědět 4.3.2014 17:37
Zase jsem o něco chytřejší
Avatar
Michal Žůrek (misaz):

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

Nahoru Odpovědět  -1 4.3.2014 17:39
Nesnáším {}, proto se jim vyhýbám.
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Ondrca:

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
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Ondrca:

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:
$(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:

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

Ide to aj bez použitia JS

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

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:

Máš importovanou jQuery ?

 
Nahoru Odpovědět 4.3.2014 18:40
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na done
Ondrca:

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
Redaktor
Avatar
Odpovídá na Benjibs
Ondrca:

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:

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 4.3.2014 18:54
Nahoru Odpovědět 4.3.2014 18:53
1 + 1 = 2
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na Benjibs
Ondrca:

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:

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

 
Nahoru Odpovědět 4.3.2014 19:00
Avatar
Ondrca
Redaktor
Avatar
Nahoru Odpovědět 4.3.2014 19:09
Zase jsem o něco chytřejší
Avatar
Nahoru Odpovědět 4.3.2014 19:38
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
kleofas.hatlapatka:

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 4.3.2014 20:01
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
Redaktor
Avatar
Nahoru Odpovědět 4.3.2014 20:02
Zase jsem o něco chytřejší
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na kleofas.hatlapatka
Ondrca:

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.