• 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

Object Storage Arubacloud
0 głosów
986 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 186 wizyt
pytanie zadane 27 marca 2016 w HTML i CSS przez VeniK Początkujący (270 p.)
+1 głos
2 odpowiedzi 2,356 wizyt
pytanie zadane 22 lutego 2016 w JavaScript przez Dynamic Bywalec (2,910 p.)
0 głosów
1 odpowiedź 474 wizyt
pytanie zadane 31 grudnia 2015 w HTML i CSS przez Paweł123 Nałogowiec (33,500 p.)

92,655 zapytań

141,546 odpowiedzi

319,984 komentarzy

62,024 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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy 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!

...