زمان کنونی: ۱۰-۱-۱۴۰۳, ۱۰:۲۸ صبح درود مهمان گرامی! (ورودثبت نام)


ارسال پاسخ 
 
امتیاز موضوع:
  • 2 رأی - میانگین امتیازات: 5
  • 1
  • 2
  • 3
  • 4
  • 5
كاربردي آموزش ایجاد منو آبشاری در قالب های جوملا
۱۹-۱۱-۱۳۹۰, ۰۵:۳۵ صبح (آخرین ویرایش در این ارسال: ۱۹-۱۱-۱۳۹۰ ۰۶:۴۷ صبح، توسط Reza Ganji.)
ارسال: #1
Wink آموزش ایجاد منو آبشاری در قالب های جوملا
درود
دوستان زیادی همیشه با ایجاد منو آبشاری در جوملا مشکل داشتند و کی از درخواست انتشار آموزشی برای این منظور بود !
امشب متوجه شدم دوست خوبمون آقای سعید رمضان زاده طراح و مدیر سایت مجیک جوملا آموزش ایجاد منو آبشاری رو در سایت خودشون منتشر کردند و با ذکر منبع اجازه انتشار آن را نیز داده اند !
از این رو من هم این آموزش را برای استفاده دوستان قرار میدهم.

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

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

با سلام

از اونجایی که هدف اصلی ما از ایجاد وب سایت مجیک جوملا فارسی سازی افزونه های جوملا و نیز آموزش های حرفه ای جوملا بوده به همین خاطر بر آن شدیم که آموزش آبشاری کردن منو ها رو در قالب بوسیله CSS به شما عزیزان آموزش دهیم.

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

خوب در مرحله اول باید باکسی را برای قرار گیری منو در آن در قالب طراحی کنیم پس فایل index.php قالب را بار میکنیم و این کد ها رو در جایی که میخواهید قرار دهید.

<div id=”magicjoomla_com_wrapper”>

<div id=”magicjoomla_com_wrapper_1”>

<div id=”menu”>

<jdoc:include type="modules" name="topmenu" style="xhtml" />

</div>

</div>

</div>

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

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

کد های خط چهارم همون کد های اعلام ماژول هستند در اصل برای فراخوانی و نامگذاری ماژول به کار میروند به این ترتیب که شما الان در مدیریت جوملای خود موقعیت ماژول منوی خود را باید در topmenu قرار دهید و اگر این نام را عوض کنید حتما باید در مدیریت ماژول هم نام را عوض کنید.ختم کلام اینکه باید نامی که در مدیریت ماژول برای موقعیت ماژول وارد میکنید با نامی که در اینجا وارد میکنید یکسان باشند.

حالا بریم سراغ کد های CSS برای اینکار فایل template.css قالب خود را باز کنید که البته این نام در قالب های شرکت های مختلف ممکن است به هر اسمی باشد.

این کد ها رو در آخرفایل CSS خود اضافه کنید.

#magicjoomla_com_1_wrapper {

          float: right;

          width: 980px;

          position: absolute;

          height: 55px;

          z-index: 999;

          }

#magicjoomla_com_wrapper {

          overflow:hidden;

          }

div#menu {

    height: 55px;

    padding: 10px 0 0;

    width:auto;

          z-index: 999;

  }

div#menu ul  {

    margin: 0;

    padding: 0;

    list-style: none;

}

div#menu ul.menu {

    padding-left: 30px;

}

div#menu a  {

    position: relative;

    z-index: 10;

    height: 41px;

    display: block;

    float: left;

    line-height: 41px;

    text-decoration: none;

    font: normal 12px Tahoma, Trebuchet MS;

}

div#menu li  {

    position: relative;

    margin: 0;

    padding: 0 0px 0 0;

    display: block;

    float: right;

    z-index: 9;

}

div#menu ul ul li  {

    z-index: 9;

}

div#menu li:hover>ul  {

    right: -2px;

}

  

div#menu ul ul  }

          z-index: 999;

    padding: 0px 4px 10px 4px;

          background-color: #343434;

    border: 3px solid #fff;

          color: #fff;

    position: absolute;

    top: 48px;

    left: -999em;

    width: 180px;

   padding: 0px 4px 10px 4px;

    margin-top:1px;

          color: #fff;

    }

div#menu li:hover>div  {

    visibility: visible;

}

  

div#menu span  {

    margin-top: -4px;

    padding-left: 15px;

    color: #fff;

    font: normal 11px Tahoma, Helvetica,Arial,FreeSans,sans-serif;

    background: none;

    line-height: 42px;

    display: block;

    cursor: pointer;

    background-repeat: no-repeat;

    background-position: 95% 0;

    text-align: center;

}

  

/* menu::level1 */

div#menu a  {

    padding: 0 10px 0 0;

    line-height: 50px;

    height: 52px;

    margin-right: 5px;

    _margin-right: 1px;

    background: none;

    text-transform: uppercase;

}

div#menu ul.menu>li:hover>a span  {

            color: #07b3e1;

}

/* menu::level2 */

div#menu ul ul li  {

    background: none;

    padding: 0;

}

div#menu ul ul a  {

    padding: 0px;

    height: auto;

    float: none;

    display: block;

    line-height: 25px;

    font-size: 13px;

    color: #fff;

    z-index: -1;

    padding-left: 5px;

    white-space: normal;

    width: 152px;

    margin: 0 8px;

    text-transform: none;

}

    

div#menu ul ul a span  {

            padding: 0 5px;

    line-height: 25px;

    font-size: 11px;

}

div#menu ul ul a:hover  {

background:none;

background-color: #3c3c3c;

}

div#menu ul ul a:hover span  {

          background:none;

          color: #07b3e1;

}

div#menu ul ul a.parent span  {

  background:none;

}

div#menu ul ul a.parent:hover  {

  background-color: #3c3c3c;

}

div#menu ul ul a.parent:hover span  {

  background:none;

}

div#menu ul ul span  {

    margin-top: 0;

    text-align: right;

}

div#menu ul ul li  {

    width: 100%;

}

  

/* menu::level3 */

div#menu ul ul ul  {

    padding: 0;

    margin: -38px 180px 0 0 !important;

    margin-left: 172px;

          

}

div#menu ul ul div li  {

    position:relative;

    top:-10px;

}

div#menu li div  {

    list-style: none;

    float: right;

    position: absolute;

    z-index: 11;

    top: 2px;

    left: 0;

    visibility: hidden;

          height: 10px;

    width: 180px;

          margin: 0px 0 0 -4px;

    padding: 0;

}

خوب دیگه تموم شد.وقتی فایل رو ذخیره کنید قالب شما دارای یک منوی آبشاری خوب و سالم که روی اینترنت اکسپلورر نیز کار میکنه خواهد شد.

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.



در ضمن فایل پی دی اف آموزشی هم تهیه شده که از سایت مجیک جوملا در پایین صفحه میتونید دانلود کنید.
امضاء Reza Ganji
انجمن پارس جوم
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
 سپاس شده توسط publichtml ، پیام عمرانی ، saso ، mking ، صدرا حسابی ، masato ، ali_85
۷-۱۲-۱۳۹۰, ۰۱:۰۲ صبح
ارسال: #2
RE: آموزش ایجاد منو آبشاری در قالب های جوملا
برای ما که جواب نداد
امضاء asrertebat
با سلام لطفا به سایت ما لینک دهید
طراحی سایت
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

ثبت آگهی
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

آموزش تصویری
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

آپلود عکس
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
۷-۱۲-۱۳۹۰, ۰۲:۵۸ صبح
ارسال: #3
RE: آموزش ایجاد منو آبشاری در قالب های جوملا
خوب حتما یک جای کار اشتباه شده البته من هم تست نکردم چون واقعا وقت دیدن پست های انجمن رو هم ندارم ولی بد نیست یکی از دوستان تست کنه و جواب رو ایجا بزاره !
امضاء Reza Ganji
انجمن پارس جوم
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
 سپاس شده توسط ehsansabet
۱۳-۱-۱۳۹۱, ۱۰:۴۳ عصر
ارسال: #4
RE: آموزش ایجاد منو آبشاری در قالب های جوملا
لطفا دمو اجرا شده همین دستورات رو قرار بدین
یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
۱۴-۱-۱۳۹۱, ۰۶:۱۱ عصر
ارسال: #5
RE: آموزش ایجاد منو آبشاری در قالب های جوملا
بهتره به جای
left:0 و left:-999
از
top:0 و top:-999
استفاده کنید
امضاء hoomanb
مزرع سبز فلک دیدم و داس مه نو یادم از کشته خویش آمد و هنگام درو
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
 سپاس شده توسط Reza Ganji
۲۲-۱-۱۳۹۱, ۰۳:۱۷ صبح
ارسال: #6
RE: آموزش ایجاد منو آبشاری در قالب های جوملا
با سلام
درست می فرمایند این کار نمی کنند
کسی دوستان می داند مشکل کجاست لطفا کمک کنید
با تشکر
یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
۳۱-۱-۱۳۹۱, ۰۸:۳۰ عصر
ارسال: #7
RE: آموزش ایجاد منو آبشاری در قالب های جوملا
باسلام
اگه ميشه اموزش اضافه كردن فليد تصوير براي ثبت كاربران رابگوييد
باتشكر arash sh
یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
۱-۲-۱۳۹۱, ۱۲:۳۱ صبح
ارسال: #8
RE: آموزش ایجاد منو آبشاری در قالب های جوملا
(۲۲-۱-۱۳۹۱ ۰۳:۱۷ صبح)iran.1440 نوشته شده توسط: دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
با سلام
درست می فرمایند این کار نمی کنند
کسی دوستان می داند مشکل کجاست لطفا کمک کنید
با تشکر
دوست عزیز دموی آنلاین قرار دهید تا بتوان مشکل را بررسی کرد !!


(۳۱-۱-۱۳۹۱ ۰۸:۳۰ عصر)arash sh نوشته شده توسط: دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
باسلام
اگه ميشه اموزش اضافه كردن فليد تصوير براي ثبت كاربران رابگوييد
باتشكر arash sh
دوست عزیز به پارس جوم خوش آمدید . در ابتدای کار تقاضا می کنم دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
را مطالعه فرمایید و سؤالات نا مرتبط با یک تاپیک را در تاپیک جدید مطرح نمایید . باتشکر


.
امضاء شاهین سمیع عادل
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
/ دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

طراحی وب سایت شرکتی ، شخصی ، فروشگاهی ، انجمن های گفتگو
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
: دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
۸-۴-۱۳۹۲, ۰۳:۵۵ عصر
ارسال: #9
آموزش ایجاد منو آبشاری در قالب های جوملا
باسلام
من هم تست کردم و جواب نگرفتم
لطفا کمک کنید مشکل از کجاست؟
یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
۸-۴-۱۳۹۲, ۰۵:۰۹ عصر
ارسال: #10
آموزش ایجاد منو آبشاری در قالب های جوملا
سلام
لطفا مدیران این مورد رو پیگیری کنن
یک آموزش گذاشته شده و هیچگس نتیجه نگرفته
یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
ارسال پاسخ 


پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 2 مهمان