{كاربردي} آموزش ایجاد منو آبشاری در قالب های جوملا

[Reza Ganji]

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

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

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

با سلام

از اونجایی که هدف اصلی ما از ایجاد وب سایت مجیک جوملا فارسی سازی افزونه های جوملا و نیز آموزش های حرفه ای جوملا بوده به همین خاطر بر آن شدیم که آموزش آبشاری کردن منو ها رو در قالب بوسیله 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;

}

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

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



در ضمن فایل پی دی اف آموزشی هم تهیه شده که از سایت مجیک جوملا در پایین صفحه میتونید دانلود کنید.