یکشنبه ۲۸ اردیبهشت ۱۴۰۴ |  عضویت / ورود





[ بخش اصلی آموزشها | افزودن آموزش | داری بیشترین امتیاز | دارای بیشترین بیننده | جدیدترین نظرات ]

ساخت منوهای زیبای افقی و عمودی به سادگی هر چه تمام‌تر در Dreamweaver CS3

این آموزش مربوط است به موضوع طراحي صفحات وب که توسط Hamid در تاریخ: Tuesday, 2008 September 02 ارسال شده است.   |   تعداد بازدید: 22772 بار   |   امتیاز متوسط: 5

صفحات مقاله: صفحه 1 | صفحه 2 |


-----------------------------

برخی توضیحات لازم:

آیا این منو فقط در همین فایل قابل استفاده است؟
خیر، این منو می‌تواند در جایی که شما خواستید، مورد استفاده قرار گیرد.
فرض کنید قرار است من این منو را در سایت آفتابگردان قرار دهم. مراحل زیر را باید طی کنم:
1- پوشه SpryAssets را در جایی از سایت آپلود کنم. (مهم نیست کجا)
2- به بخش نمایش کدهای فایلی که منوها را در آن ایجاد کرده‌اید بروید.
برای این کار، در بالای محیط نرم‌افزار Dreamweaver روی دکمه Code کلیک کنید:

با این کار، کدهای این صفحه دیده خواهد شد.
3- برای اینکه این منو در یک صفحه دیگر دیده شود، باید کدهای بین دو تگ <body> و <body/> در صفحه مورد نظر کپی شود.
4- فقط می‌ماند آدرس‌دهی فایل‌هایی که قبلاً آپلود کرده‌ایم. اگر به کدهای بین دو تگ <heah> و <head/> نگاه کنید، این دو خط کد را خواهید دید:

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />

باید فایل‌های SpryMenuBar.js و SpryMenuBarVertical.css را نسبت به جایی که پوشه SpryAssets را آپلود کرده‌اید، آدرس‌دهی کنید.
مثلاً فرض کنید من پوشه SpryAssets را در پوشه‌ای به نام web در روت اصلی سایت آپلود کرده‌ام. پس آدرس‌دهی من باید اینطور باشد:

<script src="http://www.aftab.cc/web/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="http://www.aftab.cc/web/SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />

5- در کدهای بین تگ‌های body هم باید عکس‌های جهت را آدرس‌دهی کنید:

imgRight:"http://www.aftab.cc/web/SpryAssets/SpryMenuBarRightHover.gif"

همین! منوی شما آماده است...

و اما منوی فارسی

برای اینکه این منو در سمت راست صفحه قرار گیرد و زیرمنوها به سمت چپ باز شوند، باید تغییراتی در فایل SpryMenuBarVertical.css انجام دهید.

- این فایل را با همین نرم‌افزار Dreamweaver باز کنید.

- کلیدهای ترکیبی Ctrl+F را فشار دهید و دنبال عبارت زیر بگردید:

text-align: left;

کلمه left را به right (یعنی راست) تغییر دهید.
با این کار، متن هر آیتم در منوها از سمت راست به چپ درج خواهد شد.

- این بار دنبال عبارت زیر بگردید:

margin: -5% 0 0 95%;

یک علامت - پشت عدد 95 بگذارید، یعنی خواهید داشت:

margin: -5% 0 0 -95%;

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

- این بار دنبال عبارت زیر بگردید، آن را در دو مکان خواهید یافت:

background-position: 95% 50%;

در هر دو مکان، عدد 95 را به 5 تغییر دهید.
با این کار، عکس "جهت‌ها" در سمت چپ منوها دیده خواهد شد.
باید با یک نرم‌افزار، تصویر جهت‌ها را که در پوشه SpryAssets قرار دارند به صورت افقی، آینه کنید که جهتشان به سمت چپ باشد. یا می‌توانید از اینجا دانلود کنید. (هر کدام از فایل‌ها را که خواستید، بر روی آن کلیک راست کنید و Save Target As را انتخاب کنید)

- و در نهایت، دنبال عبارت زیر بگردید:

f\loat: left;

آن را با عبارت زیر جایگزین کنید:

float: right;

توجه: جالب است که یک باگ در Dreamweaver را با هم کشف کردیم! کلمه float به اشتباه، f\loat تایپ می‌شود!!! احتمالاً دست کدنویس دریم‌.وی.ور لغزیده است. به هر حال، شما باید آن را به float تغییر دهید و left را هم right کنید.

- برای اینکه منوی ما به سمت راست صفحه منتقل شود، باید یک تغییر هم در فایل html مربوط به منوها بدهیم. یعنی همان فایلی که در مرحله اول، ایجاد و ذخیره کردیم.
به بخش Code بروید. دقیقاً بعد از تگ <body> کد زیر را قرار دهید:

<div align="right">

و دقیقاً قبل از عبارت <script type="text/javascript"> کد زیر را قرار دهید:

</div>

به تصویر زیر دقت کنید:

تمام شد! منوی فارسی و راست به چپ شما آماده است.

می‌توانید نمونه نهایی منوی مربوط به این آموزش را اینجا ببینید.
همانطور که گفته شد، فایل‌های پوشه SpryAssets هم از اینجا قابل دانلود هستند.

توجه کنید که این منو می‌تواند یک Base و منوی خام برای تمامی کارهای شما باشد. پس پوشه SpryAssets را در جایی نگاه دارید و هر وقت نیاز شد منوی شبیه به این منو برای کارهای خود ایجاد کنید، به راحتی از آن استفاده کنید.

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


نسخه پرینتی مقاله


صفحات مقاله: صفحه 1 | صفحه 2 |



نظر شما در مورد این آموزش


نام شما:
نظر شما:

جمع عدد 14 با 7 را در كادر زیر وارد نمایید:
(این كار برای جلوگیری از فعالیت موتورهای اسپمر است)

چه امتیازی به این مطلب می‌دهید؟ 

سحر
بوسیله: , در: Monday, 2009 June 29
بسيار عالي . سپاسگزاري هم در حد بسيار بالا هست. :) موفق باشين

مهدي
بوسیله: , در: Monday, 2009 October 05
آقا دمت گرم خيلي مردي ولي آدرسي كه براي دانلود منوها گذاشتي كار نميكنه

حمید رضا نیرومند
بوسیله: Hamid, در: Monday, 2009 October 05
فایل‌های مورد نظر را از اینجا دانلود کنید:
http://tutorials.aftabgardan-cc.com/web_designing/Dreamweaver CS3/Spry Menu/SpryAssets/SpryMenuBar.zip

فافا
بوسیله: , در: Sunday, 2009 October 18
سلام
ممنونم
فقط يه مشكلي برام پيش مياد وقتي كد رو تو صفحم ميذارم عرض صفحم خيلي زياد ميشه
شما بگيد چي كار كنم

پیمان
بوسیله: , در: Friday, 2010 April 23
سلام ، واقعا ممنون ، لطف کردین ، زنده باشین

ابراهيم
بوسیله: , در: Sunday, 2010 May 09
فوق‌الاده بود.خيلي بهره بردم. خسته نباشيد.

کريم
بوسیله: , در: Monday, 2010 June 21
عالي بود. دست شما درد نکند

فهيمه
بوسیله: , در: Tuesday, 2010 August 31
عالي بود . روانتر و شيوا تر از اين ديگه نميشد .
مرسي

حمید
بوسیله: , در: Thursday, 2010 October 28
آقا یه دنیا تشکر کار مارو واقعا راه انداخت .
خدا خیرت بده یکی تو این دنیا دو تا تو اون دنیا .
مرسی

SYA
بوسیله: , در: Saturday, 2011 May 21
دمت گرم.

احمد
بوسیله: , در: Friday, 2011 September 09
عالي بود . روانتر و شيوا تر از اين ديگه نميشد .
مرسي

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

احمد
بوسیله: , در: Friday, 2011 September 09
من همه کارها رو کردم منو رفته سمت راست ولی فلش روی منو سمت چپ نرفته توضحات بالا هرچی کردم نشود لطفا کمی کمک کنید

محمد
بوسیله: , در: Sunday, 2012 June 24
سلام یک دنیا ممنون،اگه بدونین من چند وقت بود دنبال این آموزش می گشتم

mohammad javad
بوسیله: , در: Sunday, 2012 July 22
dasteton dard nakone
kheyli be dardam khord


مریم
بوسیله: , در: Sunday, 2012 December 02
خیلی ممنون،خیلی واضح توضیح دادین.

maryam
بوسیله: , در: Sunday, 2013 February 03
عالی بود

امیر عسکری
بوسیله: , در: Friday, 2013 March 22
با سلام
آموزش خوبی بود.
فقط اون قسمتی که نوشتید :
div align="right"
بهتره با کد

جایگزین بشه.

همچنین عملکرد این منو دارای تاخیر هست، ممکن هست این تاخیر برای بعضی ها ازار دهنده باشه و بخوان منو سریعا باز بشه برای این کار فایل
Sprymenubar.js
رو باز کنید و در لاین 103 عبارت
this.showDelay
مدت زمان باز شدن زیرمنو ها هست که متغیر اون به عدد 5 تغییر کنه
و لاین 104
this.hideDelay
مدت زمان بسته شدن زیرمنو که متغیر اون هم به عدد5 تغییر کنه

امیر عسکری
بوسیله: , در: Friday, 2013 March 22
با سلام
آموزش خوبی بود.
فقط اون قسمتی که نوشتید :
div align="right"
بهتره با کد
span style="float:right"
جایگزین بشه.

همچنین عملکرد این منو دارای تاخیر هست، ممکن هست این تاخیر برای بعضی ها ازار دهنده باشه و بخوان منو سریعا باز بشه برای این کار فایل
Sprymenubar.js
رو باز کنید و در لاین 103 عبارت
this.showDelay
مدت زمان باز شدن زیرمنو ها هست که متغیر اون به عدد 5 تغییر کنه
و لاین 104
this.hideDelay
مدت زمان بسته شدن زیرمنو که متغیر اون هم به عدد5 تغییر کنه

محسن
بوسیله: , در: Saturday, 2013 November 30
خیلی ممنون عالی بود

واحد
بوسیله: , در: Sunday, 2013 December 08
مرسی ازتون


مهین
بوسیله: , در: Tuesday, 2015 June 23
سلام من یک مشکل داشتم ممنون میشم کمکم کنید (وقتی موسم روی کشوی منو ها قرار میگیره پرش دارد یعنی نمی توانم کشوی بقیه منو ها را باز کنم یا با موس رویشان قرار بگیرم) ممنون میشم کمکم کنید؟؟؟؟؟

mahin
بوسیله: , در: Tuesday, 2015 June 23
سلام من یک مشکل داشتم ممنون میشم کمکم کنید (وقتی موسم روی کشوی منو ها قرار میگیره پرش دارد یعنی نمی توانم کشوی بقیه منو ها را باز کنم یا با موس رویشان قرار بگیرم) ممنون میشم کمکم کنید

mahin
بوسیله: , در: Tuesday, 2015 June 23
سلام من یک مشکل داشتم ممنون میشم کمکم کنید (وقتی موسم روی کشوی منو ها قرار میگیره پرش دارد یعنی نمی توانم کشوی بقیه منو ها را باز کنم یا با موس رویشان قرار بگیرم) ممنون میشم کمکم کنید

کوروش
بوسیله: , در: Wednesday, 2019 January 23
چطور میتوان منو های ایجاد شده را مثل منو سایت آفتاب راستچین کرد

Tutorials ©