Przesunięcie elementu menu w górę po najechaniu - problem

pytanie zadane 3 marca 2016 w HTML i CSS przez KamQiX Dyskutant (9,090 p.)
edycja 3 marca 2016 przez KamQiX

WItam.

Chciałbym zrobić w CSS tak by przycisk w Menu podskoczył o 10px w górę po najechaniu na niego. Niby udało mi się uzyskać taki efekt, ale gdy najedziemy na ten przycisk zbyt nisko to zaczyna dziwnie podskakiwać, ponieważ w momencie gdy podniesie się on o 10px w górę wtedy wskaźnik myszy już na niego nie wskazuje, więc z powrotem spada w dół po czym znów skacze do góry i tak cały czas. Jak naprawić ten problem?

Fragment CSS:


.menu
{
	text-align: right;
	margin-top: -10px;
}

ul a.menu
{
	text-decoration: none;
	font-size: 23px;
	color: #4f4f4f;
}

ul a.menu:hover
{
	position: relative;
	top: -10px;
	color: #000000;
}

ul
{
	display: inline-block;
}

li
{
	margin-left: 50px;
	list-style-type: none;
	float: left;
}

Fragment: HTML:

		<div class="menu">
			<ul>
				<li><a href="index.html" style="font-weight: 600" class="menu">Strona Główna</a></li>
				<li><a href="login.html" class="menu">Logowanie</a></li>
				<li><a href="rejestracja.html" class="menu">Rejestracja</a></li>
				<li><a href="onas.html" class="menu">O nas</a></li>
				<li><a href="kontakt.html" class="menu">Kontakt</a></li>
			</ul>

Proszę o pomoc!

2 odpowiedzi

odpowiedź 3 marca 2016 przez Janusz92 Bywalec (2,150 p.)
wybrane 3 marca 2016 przez KamQiX

Najlepsza

http://codepen.io/anon/pen/RaPEmo

Ustawiłem padding i display: block, zamiast wartości top, dzięki czemu pole odnośnika się powiększa i kursor na nim pozostaje. W sumie to position: relative jest niepotrzebne.

komentarz 3 marca 2016 przez KamQiX Dyskutant (9,090 p.)

O padding-bottom to nie pomyślałem. Faktycznie działa. Dzięki. Jeszcze jedna dziwna rzecz. Gdy zmieniam padding-bottom z 10px na 5px to nagle znowu zaczyna skakać. Ktoś potrafi to wyjaśnić?

http://codepen.io/anon/pen/oxXmzz

komentarz 3 marca 2016 przez Janusz92 Bywalec (2,150 p.)

Ponieważ w .menu jest margin-top: -10px;

Trzeba zmienić na -5px wtedy, albo przebudować całe menu i zrobić to nieco inaczej.

komentarz 3 marca 2016 przez Janusz92 Bywalec (2,150 p.)

Twój sposób ma taką niewygodną wadę, że trudno do tego dodać efekt transition.

Można przebudować np. w taki sposób http://codepen.io/anon/pen/EKjrpK

Albo zamiast transform, dać margin-top na minus i padding-bottom na plus.

komentarz 3 marca 2016 przez KamQiX Dyskutant (9,090 p.)

Super! Teraz nawet jest z animacją i wygląda to lepiej, tylko, że pod spodem mam diva, a przez padding-bottom tego menu ten div schodzi na dół o 10px po najechaniu przycisku w menu.

.informacja
{
	float: right;
	width: 560px;
	height: 200px;
	background: rgba(255,255,255,0.6);
	margin-top: 100px;
	padding: 30px;
}

		<div class="informacja">

				
			<p>Przykładowy tekst.</p>
				
			<a href="rejestracja.html" class="przycisk"><div class="button">Zarejestruj się!</div></a>
			<div class="maszkonto">Masz już konto? <a class="zaloguj" href="login.html">Zaloguj się!</a></div>
		</div>

komentarz 4 marca 2016 przez Janusz92 Bywalec (2,150 p.)

Zrobiłbym mniej więcej tak: http://codepen.io/anon/pen/qZOERv

odpowiedź 3 marca 2016 przez niezalogowany

Podaj jeszcze .menu2 :)

komentarz 3 marca 2016 przez KamQiX Dyskutant (9,090 p.)

Wkleiłem niechcący starą wersję pliku HTML. Tak naprawdę nie ma tam class="menu2" tylko po prostu class="menu" i jest zdefiniowane przez .menu {}

Już poprawione.