آموزش ساخت منو شناور در بالای سایت
برای این ساعت از وبسایت وب آموز برای شما آموزشی تهییه کرده ام که امیدوارم مورد استقبال شما کاربران و دوستان عزیز قرار بگیره
با استفاده از این آموزش شما خواهید توانست در بالای سایت خود یک منوی شناور ایجاد نمایید و لینک های مورد نظر خود را قرار دهید
ما برای این آموزش از دو فایل عکس بسیار سبک با نام های 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 و تشکر یادتون نره ها
یا حق
پاسخ : آموزش ساخت منو شناور در بالای سایت
اقا دستت درد نکنه مطلب بدرد بخوریه مرسی...
پاسخ : آموزش ساخت منو شناور در بالای سایت
سلام آيا كد html اين منو هم وجود داره ياه نه؟
پاسخ : آموزش ساخت منو شناور در بالای سایت
کد:
http://s3.picofile.com/file/7401578816/navar_menu_www_webamoz_ir_.zip.html
پاسخ : آموزش ساخت منو شناور در بالای سایت
پاسخ : آموزش ساخت منو شناور در بالای سایت
پاسخ : آموزش ساخت منو شناور در بالای سایت
با سلام؛
این منو بی نظیر هستش. دارم روش کار میکنم تا به شکل دلخواه خودم دربیاد اما به یه مشکل جدی برخوردم که 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>
مشکل از کجاست؟
بی نهایت ممنونم. بی صبرانه منتظر پاسختون هستم.
موفق باشین.
پاسخ : آموزش ساخت منو شناور در بالای سایت
کافیه width رو برابر 100% قرار بدید
به این شکل
کد PHP:
.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
بی نهایت ممنونم.
با آرزوی سربلندی ...
خواهش میکنم
ممنونم از شما
موفق باشید و سربلند
پاسخ : آموزش ساخت منو شناور در بالای سایت
سلام دوست گرامی
دمت گرم ! خیلی دنبال یه همچین چیزی بودم !
فقط آدرس سایتی که دادی برای دانلود عکس ها ! کار نیمکنه
ممنون میشم پیگیری کنی
با تشکر
پاسخ : آموزش ساخت منو شناور در بالای سایت
نقل قول:
نوشته اصلی توسط
gupi
سلام دوست گرامی
دمت گرم ! خیلی دنبال یه همچین چیزی بودم !
فقط آدرس سایتی که دادی برای دانلود عکس ها ! کار نیمکنه
ممنون میشم پیگیری کنی
با تشکر
عزیز تاریخ تاپیک : وبسایت وب آموز هم دامنش اکسپایر شده و خیلی وقته جمع شده
میتونید از عکس های دیگه ای استفاده کنید
یا حق
