Jump to content
Sign in to follow this  
Bartek Huza

Jak osiągnąć efekt rozwijanej listy po najechaniu na Menu

Recommended Posts

Witam! Mam problem z zrobieniem takiego efektu żeby po najechaniu na menu rozwinęła się lista np. kategorie ale nie w jednym pionowym w pasku tylko w kilku obok siebie takich samych paskach z inną zawartością. Jak taki efekt osiągnąć?

O to kod html: 

<!DOCTYPE html>
<html lang="pl">
<head>

	<meta charset="utf-8"/>
	<title>Astronomium</title>
	<meta name="Description" content="Najlepsza strona internetowa dla ludzi pragnących nowych doświadczeń a także takich, którzy chcą się do edukować lub tak sobie poczytać o moich jak i innych czytelników pomysłów. Każdy może być wysoko inteligentny. Ciekawość to naturalna część człowieczeństwa."/>
	<meta name="Keywords" content="Astronomia, Fizyka, Chemia, Biologia, Informatyka, HTML, CSS, JS, JavaSCript, PHP, MySQL, Java, Techinka, Obecna sytuacja na ziemi, Inżynieria, Plany misji kosmicznych, przeszłość, przyszłość, człowiek, ewolucja, Terraformacja, planety, egzoplanety, gwiazdy, protogwiazdy, układy gwiezdne, życie poza ziemskie, bakterie, protisty"/>
	<meta name="author" content="Huza Bartłomiej"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<link rel="shourtcut icon"  href="img/ikona.ico"/>
	<link rel="stylesheet" href="css/main.css"/>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Source+Sans+Pro:700&amp;subset=latin-ext" rel="stylesheet">
	<script src="js/code.js"></script>

</head>
<body>

	<div class="wrapper">
	
		<div  class="mainheader"><header>
			
			<div class="mainnav"><nav>
			
				<ol class="navlist">
				
					<li><a href="#">start</a></li>
					<li><a href="#">kategorie</a>
					
						<ul>
							<li>Astronomia</li>
							<li>Fizyka</li>
							<li>Chemia</li>
							<li>Biologia</li>	
							<li>Elektronika</li>
							<li>Informatyka</li>
							<li>Technika</li>
							<li>Przyszłość</li>
						</ul>
						<div style="clear:both;"></div>
					
					</li>
					<li><a href="#">forum</a></li>
					<li><a href="#">donate</a></li>
					<li><a href="#">o autorze</a></li>
					<li><a href="#">kontakt</a></li>
					<li><a href="#">kursy</a></li>
				
				</ol>
			
			</nav></div>
			
			<div class="logo"><span style="color:#bb0000;">Astro</span><span style="color:#0000bb;">nomium</span></div>
		
		</header></div>

	</div>	
		
</body>
</html>

A to kod CSS:

body
{
	background-color:#3f3d3d;
	color:#efefef;
	font-size:27px;
	font-family: 'Open Sans', sans-serif;
	/*font-family: 'Source Sans Pro', sans-serif;*/
	margin:0!important;
}

.wrapper
{
	width:100%;
}

.mainheader
{
	width:100%;
	text-align:center;
	height:110px;
}

.logo
{
	font-size:44px;
	text-transform:uppercase;
	padding:40px;
	background-color:#2e2c2c;
}

.mainnav
{
	width:100%;
	background-color:#c34f4f;
	border-top:1px solid #751b1b;
	border-bottom:1px solid #751b1b;
}

.navlist
{
	list-style-type:none;
	display:inline-block;
	height:53px;
	line-height:200%;
	padding:0;
	margin:0;
	font-size:21px;
}

.navlist a
{
	display:block;
	text-decoration:none;
	color:#efefef;
}

.navlist > li 
{
	float: left;
	width: 150px;
	height: 40px;
	text-transform:uppercase;
	margin-top:10px;
}

.navlist > li:hover a
{
	color:#a12d2d;
}

.navlist > li > ul
{
	padding:0;
	margin:0;
	list-style-type:none;
	height:40px;
	display:none;
}

.navlist > li:hover > ul
{
	display:block;
}

.navlist > li:hover > ul > li
{
	width:150px;
	height:40px;
	line-height:200%;
	background-color:#c34f4f;
	color:#efefef;
}

.navlist > li:hover > ul > li:last-child
{
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
}

Z góry Dzięki za pomoc!!! ☺️ 

Share this post


Link to post

Zobrazuj to screenem jakimś i wrzuć kod na CodePen.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Create a New Account. It’s free and easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
×
×
  • Create New...