Home  Contact  Sitemap

Untitled 2

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

Menu

با سلام

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

 {jd_file file==31}

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

www.magicjoomla.com

مجاز می باشد.

نظر خود را اضافه کنید.

0
Komento
شرایط و قوانین.

کاربرانی که در این گفتگو شرکت کرده اند

MagicJoomla.com   |    کلیه حقوق مادی و معنوی نزد وب سایت  مجیک جوملا  محفوظ می باشد.

  Getpr