خواندن ۱ دقیقه·۳ سال پیش

ساخت آیکون های منو برای منو ریسپانسیو

آموزش طراحی سایت

ایجاد نوار منو بالایی در وب سایت

در این مقاله می آموزیم که چطور یک نوار منوی بالایی با استفاده از دستور CSS ایجاد کنیم.

ساخت نوار منو بالایی در وب سایت

قدم اول : کد HTML را اضافه کنید.
مثال :

<div class=&quotTOPNAV&quot>
<a class=&quotACTIVE&quot href=&quot#HOME&quot>خانه</a>
<a href=&quot#NEWS&quot>اخبار</a>
<a href=&quot#CONTACT&quot>تماس با ما</a>
<a href=&quot#ABOUT&quot>درباره ما</a>
</div>

قدم دوم : کد CSS را اضافه کنید.

مثال ساخت آیکون منو در منو ریسپانسیو :

<!DOCTYPE html>
<html>
	<head>
		<meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale=1&quot>
		<link rel=&quotstylesheet&quot href=&quothttps://cdnjs.cloudflare.com/ajax/libs/font
awesome/4.7.0/css/font-awesome.min.css&quot>
		<style>
			body {
			font-family: Arial, Helvetica, sans-serif;
			direction: rtl;
	}
		.navbar {
		width: 100%;
		background-color: #555;
		overflow: auto;
		direction: rtl;
		}
			.navbar a {
			float: right;
			padding: 12px;
			color: white;
		text-decoration: none;
		font-size: 17px;
	}
		.navbar a:hover {
		background-color: #000;
		}			
		.active {
		background-color: #4CAF50;
		}
			@media screen and (max-width: 500px) {
			.navbar a {
				float: none;
				display: block;
	}
		}
	</style>
	</head>
	<body>
		<h2>منو بار ریسپانسیو همراه با آیکون های نمایشی</h2>
		<p>اندازه پنجره مرورگر خود را تغییر دهید تا تاثیر ریسپانسیو را ببینید</p>
		
		<div class=&quotnavbar&quot>
			<a class=&quotactive&quot href=&quot#&quot><i class=&quotfa fa-fw fa-home&quot></i>خانه</a> 
			<a href=&quot#&quot><i class=&quotfa fa-fw fa-search&quot></i>جستجو</a> 
			<a href=&quot#&quot><i class=&quotfa fa-fw fa-envelope&quot></i>تماس با ما</a> 
			<a href=&quot#&quot><i class=&quotfa fa-fw fa-user&quot></i>ورود</a>
	</div>
</body>
</html>

برای مشاهده مثال های بیشتر برروی دوره آموزش طراحی سایت کلیک نمایید

آموزش طراحی سایتدوره آموزش طراحی سایتآموزش برنامه نویسیآموزشگاه برنامه نویسی

برلیانس

شاید از این پست‌ها خوشتان بیاید