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

[vahab00]

برای این ساعت از وبسایت وب آموز برای شما آموزشی تهییه کرده ام که امیدوارم مورد استقبال شما کاربران و دوستان عزیز قرار بگیره

با استفاده از این آموزش شما خواهید توانست در بالای سایت خود یک منوی شناور ایجاد نمایید و لینک های مورد نظر خود را قرار دهید


http://s2.webamoz.ir/img/menu-top.jpg

ما برای این آموزش از دو فایل عکس بسیار سبک با نام های hover و topmenubg استفاده خواهیم کرد

در واقع hover زمانی نمایان خواهد شد که موس شما بر روی لینک قرار بگیرد و topmenubg نیز بک گراند منوی شما خواهد بود

فایل ضمیمه را برای دانلود شما عزیزان قرار میدم تا دانلودش کنید و ازش استفاده نمایید

اما بریم سراغ آموزش

برای ساخت چنین منویی باید ابتدا منو ها و استایل ها رو تعریف کنیم . من بنا بر عادت خودم اول استایل رو تعریف میکنم و سپس میرم سراغ تعریف div ها و منو ها

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


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 تاپ منو مشخصات زیر رو داشته باشه :

بک گراند داشته باشه ، بک گراند تکرار شه ، اندازش ۱۰۰درصد کامل مرورگر باشه ، ارتفاعش ۴۹ پیکسل باشه ، بردار داشته باشه و رنگ بردار و… رو تعریف میکنم با استفاده از روش زیر و سپس مشخصات منوها رو تعریف میکنیم با استفاده از روش زیر


.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 ها رو به روش زیر تعریف میکنیم


<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>

حالا کار تموم هست و میتونید از این منو برای سایت خود استفاده کنید

میتونید نمونه و دمو رو در فایل ضمیمه دانلود کنید

برای دانلود فایل ضمیمه به سایت مراجعه کنید (http://www.webamoz.ir/1391/03/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b3%d8%a7%d8%ae%d8%aa-%d9%85%d9%86%d9%88-%d8%b4%d9%86%d8%a7%d9%88%d8%b1-%d8%af%d8%b1-%d8%a8%d8%a7%d9%84%d8%a7%db%8c-%d8%b3%d8%a7%db%8c%d8%aa.html)

امیدوارم این آموزش مورد توجه و رضایت شما دوستان گرامی قرار بگیره

+1 و تشکر یادتون نره ها

یا حق

[valy33]

اقا دستت درد نکنه مطلب بدرد بخوریه مرسی...

[airnasa]

سلام آيا كد html اين منو هم وجود داره ياه نه؟

[ipsat]

http://s3.picofile.com/file/7401578816/navar_menu_www_webamoz_ir_.zip.html

[airnasa]

خيلي ممنون

[par30shop]

خیلی خوب بود

[md.zolfi]

با سلام؛
این منو بی نظیر هستش. دارم روش کار میکنم تا به شکل دلخواه خودم دربیاد اما به یه مشکل جدی برخوردم که 2 روزه نمیتونم حلّش کنم! میتونین کمکم کنین؟ خیلی به کمکتون نیاز دارم.
این منو با تغییر سایز پنجره مرورگر از جای خودش تکون میخوره. یعنی به سمت راست و چت لیز میخوره. میخواستم ثابت بمونه در موقعیتی که میخواهم. و فقط در جای خودش بالا و پایین حرکت کنه.
کد هایی که من ویرایش کردم به صورت زیر هستش:



<style type="text/css">
.topmenu { width:960px; height:41px; right:12%; left:12%; float:center; background-color:#6FD4DD; border-bottom:#CCC 2px solid;position:fixed;top:0px;z-index:9999999; direction:rtl;}
.menu {float:right; padding-right:10px; padding-top:5px; direction:rtl;}
.menu a { display: inline-block; position: relative; float:center; margin-left:2px;margin-right:2px;padding-left:10px;padding-right:10px;padding-top:0px; padding-bottom:7px;color:#FFF; text-shadow:#1E939E 1px 1px; text-align:center; direction:rtl; font-family:B Bardiya,'B Bardiya',tahoma; font-size:12pt; }
.menu a:hover { position: relative; float:center; text-align:center; margin-left:2px;margin-right:2px;padding-left:10px;padding-right:10px;padding-top:0px; padding-bottom:7px;background-color:#F8F8F8; color:#CCC; text-shadow:#393939 1px 1px direction:rtl; font-family:B Bardiya,'B Bardiya',tahoma; font-size:12pt; }
</style>




<div id="menu" class="topmenu">
<div id="menu" class="menu">
<a href="#">صفحه نخست</a>
<a href="#">متن آزمایشی</a>
<a href="#">متن آزمایشی</a>
<a href="#">متن آزمایشی</a>
<a href="#">متن آزمایشی</a>
</div>
</div>

مشکل از کجاست؟
بی نهایت ممنونم. بی صبرانه منتظر پاسختون هستم.
موفق باشین.

[vahab00]

کافیه width رو برابر 100% قرار بدید
به این شکل

.topmenu { width:100%; height:41px; right:12%; left:12%; float:center; background-color:#6FD4DD; border-bottom:#CCC 2px solid;position:fixed;top:0px;z-index:9999999; direction:rtl;}

[md.zolfi]

بی نهایت ممنونم.
با آرزوی سربلندی ...

[vahab00]

بی نهایت ممنونم.
با آرزوی سربلندی ...

خواهش میکنم
ممنونم از شما
موفق باشید و سربلند

[gupi]

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

با تشکر

[vahab00]

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

با تشکر

عزیز تاریخ تاپیک :
June 6th, 2012
وبسایت وب آموز هم دامنش اکسپایر شده و خیلی وقته جمع شده
میتونید از عکس های دیگه ای استفاده کنید
یا حق