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

ucinanie elementu przy rozsuwanym menu

0 głosów
62 wizyt
pytanie zadane 4 grudnia 2016 w HTML i CSS przez Wilier Bywalec (2,570 p.)

Hej, 

proszę niech ktoś rzuci okiem na kod, bo od kilku godzin się męczę.

Efekt jak na zdjęciu. Nie mam pojęcia czemu ucina mi dół elementu <li>, ucieta czesc to padding-bottom. Troche w CSSie jest burdel ale po prostu testuję różne przypadki. Uciecie natepuje w momencie najechania, korzystam z jQuery slideDown

body {
	margin: 0px;
	padding: 0px;
	border: 0px;
}

#container {
	width: 960px;
	margin: 50px auto;
}

ul {
	list-style-type: none;
	padding: 0px;

}


li {
	padding: 20px 0px;
}


#menu{
	height: 40px;
		
}

#menu ul li {
	position: relative;
	display: block;
	text-align: center;
	font-family: Georgia;
	font-weight: bold;
	width: 140px;
}

.podmenu li a{
	color: #fff;
	text-decoration: none;
	display: block;
}

.podmenu ul li ul {
	position: absolute;
	top: 0px;
	left: 140px;
}

.podmenu ul {
	display: none;
}

 li {
	background-color: rgba(0,0,0,0.7);
}

.podmenu li ul li:hover {
	background-color: #ff0000;
	color: #000; 
}

HTML

   <body>
		<div id="container">
			<div id="menu">
				<ul class="podmenu">
					<li><a href="http://jquery.com/">O firmie</a>
						<ul>
							<li><a href="http://jquery.com/">O firmie 1</a></li>
							<li><a href="http://jquery.com/">O firmie 2</a>
								<ul>
									<li><a href="http://jquery.com/">O firmie 21</a></li>
									<li><a href="http://jquery.com/">O firmie 22</a></li>
									<li><a href="http://jquery.com/">O firmie 23</a>
										<ul>
											<li><a href="http://jquery.com/">O firmie 231</a></li>
											<li><a href="http://jquery.com/">O firmie 232</a></li>
											<li><a href="http://jquery.com/">O firmie 233</a></li>
											<li><a href="http://jquery.com/">O firmie 234</a></li>
										</ul>
									</li>
									<li><a href="http://jquery.com/">O firmie 24</a></li>
								</ul>
							</li>
							<li><a href="http://jquery.com/">O firmie 3</a></li>
							<li><a href="http://jquery.com/">O firmie 4</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
    </body>

 

komentarz 4 grudnia 2016 przez argeento VIP (109,260 p.)
Wstaw chociaż CSSa, który wysuwa to podmenu poprawnie...
komentarz 4 grudnia 2016 przez Wilier Bywalec (2,570 p.)
jQuery

$(function() {

	$(".podmenu li").hover(
	function() {
		$(this).children("ul").stop().slideDown(500, "easeOutBack");
	},
	function() {
		$(this).children("ul").stop().slideUp("fast", "linear");
	}
	
	);

});

 

komentarz 4 grudnia 2016 przez argeento VIP (109,260 p.)
welp
komentarz 4 grudnia 2016 przez Wilier Bywalec (2,570 p.)
nie rozumiem o co Ci chodzi

1 odpowiedź

+1 głos
odpowiedź 4 grudnia 2016 przez argeento VIP (109,260 p.)

Nic nie ucina - pokazuje podmenu, od razu pod tekstem w przycisku (dokładnie tak, jak jest zapisane w HTMLu). Nadaj wymiary przyciskom lub dodaj do nich margin. 

  1. Nie stylizuj po tagach... sam zauważyłeś co się dzieje w CSSie... warto zainteresować się na przykład metodologią BEM
  2. JS jest tu kompletnie niepotrzebny - tym bardziej jQuery
komentarz 4 grudnia 2016 przez Wilier Bywalec (2,570 p.)
tak wiem nie jest potrzebny ale to właśnie jego się uczę i chciałem coś takiego z wykorzystaniem jQuery zrobić, hoverem w CSSie byłoby znacznie prościej

dziękuję juz sobie poradzę

Podobne pytania

0 głosów
0 odpowiedzi 117 wizyt
pytanie zadane 13 października 2017 w HTML i CSS przez Adrian1999 Nałogowiec (34,490 p.)
0 głosów
1 odpowiedź 120 wizyt
pytanie zadane 14 maja 2016 w HTML i CSS przez Sebastian Kopiczko Początkujący (370 p.)
0 głosów
0 odpowiedzi 57 wizyt
Porady nie od parady
Odznacz odpowiedź zieloną fajką, jeśli uważasz, że jest ona najlepsza ze wszystkich i umożliwiła ci rozwiązanie problemu.Najlepsza odpowiedź

85,698 zapytań

134,499 odpowiedzi

298,514 komentarzy

56,625 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...