اموزش ساخت یک منو در دریمیور

شروع موضوع توسط websaz2012 ‏29 دسامبر 2011 در انجمن نرم‌افزارهای توسعه‌وب‌سایت (Sublime, VSCode و ...)

?

نظرتون چیه؟

  1. خیلی بد

    0 رای
    0.0%
  2. بد

    0 رای
    0.0%
  3. متوسط

    100.0%
  4. خوب

    0 رای
    0.0%
اجازه دادن چند رای داده شده است.
  1. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    سلام امروز میخواهیم یک منو به سلیقه خود بسازیم
    مثل همین سایت
    با ما باشین.
    برای ساخت منویی مثل این منو در دریمیور باید یک دیو بعد از هدر بسازین اسمشو nav بزارین
    طول و عرضش دست خودتون.
    بعد رنگ background اونو f4f4f4# میزارین .مرحله دوم نوشتن متن تو اونه متنتونو توش بنویسین بعد به هر کلمه لینکاتو بدین مورحله سوم اینه که دوباره یکیرو های لایت کنین از قسمت پنل css style بر روی دکمه new css style کلیک کنید یک کادر باز میشه متن قبل از #nav a رو از توش پاک کنین بروی ok کلیک کنین حالا یک کادر دیگه باز میشه که توش تنظیمات لینکتونو میدین اندازه فونتو رو 12 از نوع bold بزارین رنگشو #000000 انتخاب کنید .اگه میخواین متنتون تو وسط کادر باشه text align:center انتخاب کنید تنظیمات دیگه رو به میل خودتون انجام بدین فقط یک نکته دیگه اینه که تو قسمت display باید اونو تبدیل به block کنید چرا؟ چون این خاصیت باعث میشه هر کلمه مثل یک دیو جداگانه فقط از نظر شکل میگم اما واحده خوب تا اینجا کار تقریبا تمومه فقط یه چیز مونده اونم وقتی است که موسو رو لینک بزاریم رنگش تغییر کنه واسه این کار دوباره روی یکی از لینکها های لایت کنید و دوباره روی new css style کلیک کنید . متن قبل از #nav a رو پاک کنید و جلوی nav a# این کلمه رو تایپ کنید hover: که تبدیل به nav#:hover بشه ok رو بزنید و تو کادر دیگه رنگ متنو روی قرمز یا شش2423# تنظیم کنید همچنین میتونین خاصیتهای دیگه ای هم بهش بدین.
    کار تموم شد
    با سپاس
     
    نوشته شده توسط websaz2012 در ‏29 دسامبر 2011
    sh1 graphic از این پست تشکر کرده است.
  2. vahidd.com

    vahidd.com Member

    ارسال‌ها:
    249
    تشکر شده:
    211
    امتیاز دستاورد:
    16
    برای اینکار میتونی از منوساز دریم ویور استفاده کنی:

    Insert>Spry>spry menu bar
     
    نوشته شده توسط vahidd.com در ‏6 ژانویه 2012
    [email protected] و mazyar_f از این پست تشکر کرده اند.
  3. mazyar_f

    mazyar_f Member

    ارسال‌ها:
    30
    تشکر شده:
    18
    امتیاز دستاورد:
    6
    bo2o عزیز ممکنه بفرمایید که از همین طریقی که شما فرمودین،چطوری میشه ویژگی های منو ها رو تغییر داد؟مثلا border نداشته باشه و عکسی که به عنوان آیتمش تعریف میکنیم کل کادر رو بگیره؟

    <li ><a href="#"><img src="ax.jpg" /></a></li>
    ویا سایز هر قسمت از منو رو چطور میشه تغییر داد؟!

     
    نوشته شده توسط mazyar_f در ‏5 فوریه 2012
  4. vahidd.com

    vahidd.com Member

    ارسال‌ها:
    249
    تشکر شده:
    211
    امتیاز دستاورد:
    16
    برای اینکار باید فایل Css‌ای که نرم افزار درست میکنه رو EDIT کنید
     
    نوشته شده توسط vahidd.com در ‏5 فوریه 2012
    mazyar_f از این پست تشکر کرده است.
  5. mazyar_f

    mazyar_f Member

    ارسال‌ها:
    30
    تشکر شده:
    18
    امتیاز دستاورد:
    6
    ممنونم از توجهتون اما ممکنه بیشتر توضیح بدین.اگر کد نمونه هم بگدارید ممنون میشم.
    مشکل اصلیم کادر دور لیست
    هاست.و اینکه وقتی با موس روی گزینه های لیست وایسیم کادر دورش آبی رنگ میشه و من میخواستم رنگ دیگه ای باشه یا کلا این کادر نباشه.
    آیا امکان این تغییر وجود داره؟
     
    نوشته شده توسط mazyar_f در ‏6 فوریه 2012
  6. vahidd.com

    vahidd.com Member

    ارسال‌ها:
    249
    تشکر شده:
    211
    امتیاز دستاورد:
    16
    برای مثال وقتی وارد گزینه‌ی Spry Menu bar از Insert میشید گزینه‌ی Horizontal رو که وقتی انتخاب میکنه برنامه خودش پوشه‌ای به طور پیشفرض به نام SpryAssets در جایی که فایل Html یا فایل دیگه‌ای درست میکنه و فایل‌های Js و CSS و GIF رو میریزه اونجا حال شما باید فایل
    SpryMenuBarHorizontal.css رو ویرایش کنید میتونید با خود دریم ویور ویرایشش کنید بعد از بازکردن فایل باید برای برداشتن Border باید کد زیر رو ادیت کنید:
    کد (Text):
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
    {
        border: 1px solid #CCC;
    }
    /* Menu items are a light gray block with padding and no text decoration */
    برای ادیت Background کل منو باید Background-color رو عوض کنید:
    کد (Text):
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    {
        display: block;
        cursor: pointer;
        background-color: #EEE;
        padding: 0.5em 0.75em;
        color: #333;
        text-decoration: none;
    }
    /* Menu items that have mouse over or focus have a blue background and white text */
    و برای ویرایش رنگی که ماس میره روی منو باید کد زیر رو ویرایش کنید:
    کد (Text):
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    {
        background-color: #33C;
        color: #FFF;
    }
     
     
    نوشته شده توسط vahidd.com در ‏6 فوریه 2012
    mazyar_f از این پست تشکر کرده است.
  7. tarenoco

    tarenoco Member

    ارسال‌ها:
    216
    تشکر شده:
    14
    امتیاز دستاورد:
    18
    من از ورژن cc استفاده میکنم که تو این ورژن این قسمت نیست ممنون میشم کمک کنید که جاش رو پیدا کنم
     
    نوشته شده توسط tarenoco در ‏3 مارس 2014
  8. tarenoco

    tarenoco Member

    ارسال‌ها:
    216
    تشکر شده:
    14
    امتیاز دستاورد:
    18
    کسی نیــــــــــــــــــــــــــــسسسسسسسسسسستتتتتتتتتتتتتتتتتتتتتتتتتتتتتتتتتتتت ؟
    من کــــــــــــــــــــــــــــــــمــــــــــــــــــــــــــــک میخوام
     
    نوشته شده توسط tarenoco در ‏19 می 2014

به اشتراک بگذارید