ویرگول
ورودثبت نام
برلیانس
برلیانس
برلیانس
برلیانس
خواندن ۱ دقیقه·۵ سال پیش

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


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

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

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

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

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

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

<div class="TOPNAV">
<a class="ACTIVE" href="#HOME">خانه</a>
<a href="#NEWS">اخبار</a>
<a href="#CONTACT">تماس با ما</a>
<a href="#ABOUT">درباره ما</a>
</div>

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font
awesome/4.7.0/css/font-awesome.min.css">
		<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="navbar">
			<a class="active" href="#"><i class="fa fa-fw fa-home"></i>خانه</a> 
			<a href="#"><i class="fa fa-fw fa-search"></i>جستجو</a> 
			<a href="#"><i class="fa fa-fw fa-envelope"></i>تماس با ما</a> 
			<a href="#"><i class="fa fa-fw fa-user"></i>ورود</a>
	</div>
</body>
</html>

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


آموزش طراحی سایتدوره آموزش طراحی سایتآموزش برنامه نویسیآموزشگاه برنامه نویسی
۰
۰
برلیانس
برلیانس
شاید از این پست‌ها خوشتان بیاید