+17

رای مثبترای منفینقل قولگزارش

منوی آبشاری - آموزش منوی آبشاری - آموزش آبشاری کردن منوی های قالب - منوی بازشو - آموزش بازشو کردن منو - منوی آبشاری css - آموزش آبشاری کردن منو در قالب جوملا

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

}

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

برای راحتی شما عزیزان این آموزش را نیز در قالب یک فایل PDF آماده کرده ایم که میتوانید از لینک زیر دریافت نمایید. 

آموزش آبشاری کردن منو های قالب

لطفا برای دانلود فایل از این مجموعه عضو شده و یا وارد شوید!			تاریخ اندازه فایل تذکرات	1390-10-03 301.93 KB 901

کپی برداری از این مطلب فقط با نام مجیک جوملا و لینک به صفحه اول وب سایت

www.magicjoomla.com

مجاز می باشد.

• آموزش نصب و فعال کردن قالب مدیریت در جوملا 1.7
• آموزش قرار دادن کد وب گذر در سایت
• آموزش فعال کردن منوهای بازشونده در قالب های حرفه ای
• آموزش برداشتن کپی رایت جوملا
• آموزش فارسی سازی قالب های آرتیستر 3.1

این مطلب را به اشتراک بگذارید