برای این ساعت از وبسایت وب آموز برای شما آموزشی تهییه کرده ام که امیدوارم مورد استقبال شما کاربران و دوستان عزیز قرار بگیره
با استفاده از این آموزش شما خواهید توانست در بالای سایت خود یک منوی شناور ایجاد نمایید و لینک های مورد نظر خود را قرار دهید
ما برای این آموزش از دو فایل عکس بسیار سبک با نام های hover و topmenubg استفاده خواهیم کرد
در واقع hover زمانی نمایان خواهد شد که موس شما بر روی لینک قرار بگیرد و topmenubg نیز بک گراند منوی شما خواهد بود
فایل ضمیمه را برای دانلود شما عزیزان قرار میدم تا دانلودش کنید و ازش استفاده نمایید
اما بریم سراغ آموزش
برای ساخت چنین منویی باید ابتدا منو ها و استایل ها رو تعریف کنیم . من بنا بر عادت خودم اول استایل رو تعریف میکنم و سپس میرم سراغ تعریف div ها و منو ها
ابتدا موتون و نوشته هام رو تعریف میکنم . لازم هست یاد آوری کنم در وبسایت شما حتما این کلاس تعریف شده پس بهتره از این دو کلاس زیر که تعریف میکنم استفاده نکنید در سایت خود چون ممکنه بهم بریزه همه استایل لینک هاتون رو . من برای اینکه تو دمو درست نشون داده شه اومدم تعریف کردم
کد PHP:
a {text-decoration:none;color:#555555; font-family:b yekan; font-size:15px;}
a:hover {text-decoration:none;color:#409dc9; font-family:b yekan; font-size:15px;}
بعد میام و تعریف میکنم که div تاپ منو مشخصات زیر رو داشته باشه :
بک گراند داشته باشه ، بک گراند تکرار شه ، اندازش ۱۰۰درصد کامل مرورگر باشه ، ارتفاعش ۴۹ پیکسل باشه ، بردار داشته باشه و رنگ بردار و… رو تعریف میکنم با استفاده از روش زیر و سپس مشخصات منوها رو تعریف میکنیم با استفاده از روش زیر
کد PHP:
.topmenu {background:url(topmenubg.png) repeat-x; width:100%; height:49px; border-top:#CCC 1px solid;position:fixed;top:0px;z-index:999999;}
.menu {float:right; padding-right:10px; padding-top:5px;}
.menu a {margin-left:2px;margin-right:2px;padding-left:10px;padding-right:10px;padding-top:5px; padding-bottom:6px;color:#666; text-shadow:#FFF 1px 1px;}
.menu a:hover {margin-left:2px;margin-right:2px;padding-left:10px;padding-right:10px;padding-top:10px; padding-bottom:13px;background:url(hover.png) center;color:#666; text-shadow:#FFF 1px 1px
بعد میریم div ها رو به روش زیر تعریف میکنیم
کد PHP:
<div class="topmenu">
<div class="menu">
<a href="#">خانه</a>
<a href="#">انجمن</a>
<a href="#">تماس با ما</a>
<a href="#">تبلیغات</a>
<a href="#">آرشیو</a>
<a href="#">کاربران</a>
<a href="#">فیس بوک</a>
<a href="#">خبر خوان</a>
<a href="#">درباره ما</a>
<a href="http://www.webamoz.ir">وب آموز</a>
</div>
</div>
حالا کار تموم هست و میتونید از این منو برای سایت خود استفاده کنید
میتونید نمونه و دمو رو در فایل ضمیمه دانلود کنید
برای دانلود فایل ضمیمه به سایت مراجعه کنید
امیدوارم این آموزش مورد توجه و رضایت شما دوستان گرامی قرار بگیره
+1 و تشکر یادتون نره ها
یا حق
آموزش ساخت منو شناور در بالای سایت
دکمه تشکر خراب شده آیا ؟ 
پاسخ با نقل قول