• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

VPS Starter Arubacloud
0 głosów
938 wizyt
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

+1 głos
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
+1 głos
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.

Podobne pytania

+2 głosów
2 odpowiedzi 178 wizyt
pytanie zadane 27 marca 2016 w HTML i CSS przez VeniK Początkujący (270 p.)
+1 głos
2 odpowiedzi 2,303 wizyt
pytanie zadane 22 lutego 2016 w JavaScript przez Dynamic Bywalec (2,910 p.)
0 głosów
1 odpowiedź 461 wizyt
pytanie zadane 31 grudnia 2015 w HTML i CSS przez Paweł123 Nałogowiec (33,500 p.)

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...