يكشنبه 3 شهريور 1398

Font Size

Screen

Profile

Layout

Direction

Menu Style

Cpanel
  • آموزش
  • قالب ها
  • نرم افزارها
  • سوال شما

آموزش ساخت منوی باز شونده با css در جوملا

آموزش ساخت css منو
آموزش ساخت css منو

بسیاری از کاربران سایت تقاضای آموزش ساخت منوی بازشونده بالا با css را داشتند که بتوانند در قالب های جوملا از آن استفاده کنند یعنی بدون استفاده از ماژول یک منوی آبشاری در بالای سایتشان قرار بدهند.در نتیجه این آموزش برای این عزیزان در سایت قرار می گیرد و امیدوارم که مفید واقع شود.
برای شروع کار من کدهای css مربوط به منو را در یک فایل css قرار داده ام و به همراه آموزش که در یک فایل pdf است ضمیمه می کنم و شما می توانید در ادامه مطلب دانلود کنید.
روند کار بسیار ساده است و حتی کاربران مبتدی نیز می توانند بسیار ساده این کار را انجام بدهند

آموزش در ادامه مطلب . برای دریافت فایل های آموزش از اینجا ثبت نام کنید 

ابتدا فایل reza1078_menu.css را در پوشه css منوی خود وارد می کنید حال لازم است که این فایل css را به قالب خود بشناسانید.
برای اینکار می توانید از کد زیر استفاده کنید:

  <link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/css/reza1078_menu.css" type="text/css" />

در مرحله بعدی شما باید یک موقعیت مناسب برای قالب خود درست کرده باشید مثلا می توانید یک div بنویسید و یک موقعیت مناسب را برای منو در نظر بگیرید این کد می تواند به صورت های مختلفی نوشته شود(کار با css است و باید بتوانید با موقعیت دلخواه را ایجاد کنید)
مثال:

#reza1078_menu{

    position: relative;
    margin:0 auto;
    width:1001px;
    height:220px;
    direction:rtl

{

البته کد بالا بسیار مبتدیانه است و مطلب خاصی ندارد که بخواهم توضیح بدهم فقط به این نکته اشاره می کنم که وقتی position را برابر relative قرار می دهیم منو را نسبت به موقعیت فعلی(در هر کجای صفحه باشد) که تنظیم شده است قرار می دهیم سپس با ویژگی‌های top، right، bottom و left می‌توان مکان آنها را نسبت به مکان اولیه قرارگیرشان تغییر داد.

حال به سراغ کد اصلی که در فایل index.php است می رویم کدهای زیر را در موقعیت مناسب وارد می کنیم.


<div id="reza1078_menu">
<div id="ja-mainnavwrap">
    <div id="ja-mainnav" class="clearfix">
    <jdoc:include type="modules" name="menu" />
    </div>
</div>
</div>

در اینجا ما یک موقعیت جدید با نام menu درست کرده ایم (البته هر نامی که بخواهید می توانید قرار دهید)
دیگر کار تمام است می توانید موقعیت منوی اصلی خود را menu انتقال دهید(اگر در موقعیتها چنین عنوانی وجود ندارد تایپ کنید) و نتیجه را ببینید در ضمن شما می توانید با ویرایش reza1078_menu.css این منو را با قالب خود set کنید.
تذکر: تصاویر موجود در فایل image را به قالب خود منتقل کنید.
امیدوارم این آموزش به کار شما بیاید (البته برای آموزش وقت زیادی نگذاشتم شاید بعدا آموزش را کاملتر کنم و استایل زیباتری را برای منو قرار دهم)

برای دیدن لینک دانلود باید با نام کاربری خود وارد شوید

سوالات خودتان را در اینجا مطرح کنید

نظرات  

 
#1 ali 12 مرداد 1391 ساعت 04:40
سلام کد را باید در چه فایلی بنویسیم در کدام css ،اطلاعات موقعیت را باید در کجاا بنویسیم خواهشمندم توضیح بدهید.
از اموزش شما واقعا ممنون
نقل قول
 

افزودن نظر


کد امنیتی
تصویر جدید

لطفا نظر خود را فقط در رابطه با مطلب بالا ارائه دهید

نظر سنجی

در سایت چه چیزی قرار دهیم؟






نتایج

کاربران عضو

کاربران عضو : 2090
اعضای حاضر : 0

اعضای حاضر در سایت
هیچ عضوی حاضر نیست!

معرفی 5 عضو آخر سایت
Airbladekhw
Rigidsgc
Fingerboardelu
Zbtkamy
yruibutbrs

پرداخت امن پاسارگاد

زرین پال

شما هستيد در: آموزش آموزش جوملا آموزش ساخت منوی باز شونده با css در جوملا