021-20483015

ساخت منو زیبا و کارآمد به همراه TAB

در اینجا سبک ها و تکنیک های مختلف ایجاد یک منوی جدولبندی شده و بازگردانی دوباره جدول ها یا سبک همپوشانی که در آن هر تب وجود . در حالی که در طراحی سایت ، باید از الهامات و آموزش ها استفاده کرد. یکی از آنها این آموزش میباشد. منوی زیر را روش به روش ایجاد خواهیم کرد همچنین سورس آماده آن نیز در دسترس میباشد.

مرحله اول: انتقال زبانه ها

بنابراین برای ادامه کار شما باید یاد بگیرید که چگونه در فتوشاپ یک دکمه طراحی کنین. این آموزش بسیار دقیق و کامل و همچنین یک کار بزرگ در آموزش ساخت دکمه منو در فتوشاپ می باشد.

در TABهای غیر فعال رنگ مایل به خاکستری استفاده شده است، و در TAB فعال آبی پر رنگ استفاده شده است. و همچنین در حالت شناور رنگ آبی کم رنگ است.

مرحله دو: برش زبانه ها در PSD

به یک نکته بیشتر توجه داشته باشید که در برش تصاویر که اولین تب یعنی تب "Home" باید از داشتن هرگونه سایه در لبه سمت چپ در حالت غیر فعال خوداری به عمل آید.از این رو، برای آن تب خاص ما باید یک تب جداگانه ای برای آن که بدون سایه می باشد بسازیم.

مرحله سوم: کد نویسی

حالا برش ما کامل است و ما تمام تصاویر مورد نیاز را داریم حالا می توانیم شروع به برنامه نویسی کنیم. صفحه اولیه که همان منو ها هساتند را به زبان HTML به روش زیر می نویسیم.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div id="page-wrap">
		<ul id="main-nav">
			<li><a href="index.html">Home</a></li>
			<li><a href="portfolio.html">Portfolio</a></li>
			<li><a href="services.html">Services</a></li>
			<li><a href="about.html">About Us</a></li>
			<li><a href="contact.html">Contact</a></li>
		</ul>
		<div></div>
		<div id="featured">
			<div id="featured-content">
			</div>
		</div>
	</div>
</body>
</html>

ما یک منوی ناوبری نامرتب با تعریف کلاس ها ایجاد کردیم.


<ul id="main-nav">
	<li class="current"><a href="index.html">Home</a></li>
	<li class="portfolio"><a href="portfolio.html">Portfolio</a></li>
	<li class="services"><a href="services.html">Services</a></li>
	<li class="about"><a href="about.html">About Us</a></li>
	<li class="contact"><a href="contact.html">Contact</a></li>
</ul


ul#main-nav li {
    float: left;
    position: relative;
    display: inline;
}

همچنین پس زمینه ها ، ارتفاع عرض و کلیه تنظیمات مربوط به تب ها را انجام می دهیم.


ul#main-nav li a {
	position: relative;
	width: 110px;
	height: 29px;
	display: block;
	background-image: url('../images/tabs.png');
	background-position: center center;
	color: #44403b;
	text-decoration: none;
	font-size: 14px;
	padding-top: 12px;
	text-align: left;
	padding-left: 30px;
	font-weight: bold;
}
ul#main-nav li.home a {
	background-image: url('../images/tab-home.png');
}
ul#main-nav li.current a {
	background-position: top;
	color: #ffffff;
}
ul#main-nav li a:hover {
	background-position: bottom;
	color: #ffffff;
}
ul#main-nav li.current a:hover {
	background-position: top; /*To Prevent the Current tab from changing colour on hover*/
	color: #ffffff;
}

یک کلاس مربوط به هر یک از عناصر یک لیست و یک کلاس به نام current به زبانه تعریف شده است که برای صفحه فعلی قرار وجود دارد طوری که می توانیم از ارزش های مختلف دستور z-index به هر برگه در جهت صعودی به طوری که هر برگه در محور z بالاتر از تب پس از آن قرارداده شده است. قبل از استفاده از مقادیر z-index ، مطمئن شوید که ویژگی موقعیت عنصر لیست به نسبت تنظیم شده است.


ul#main-nav li.current {
    z-index: 100;
}
ul#main-nav li.home {
    z-index: 100;
}
ul#main-nav li.portfolio {
    z-index: 99;
}
ul#main-nav li.services {
    z-index: 98;
}
ul#main-nav li.about {
    z-index: 97;
}
ul#main-nav li.contact {
    z-index: 96;
}


ul#main-nav {
    margin-left: 20px;
}
ul#main-nav li {
    float: left;
    position: relative;
    margin-left: -20px;
    display: inline;
}

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

مفاهیم طراحی وب

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط