آموزش ساخت 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 را به قالب خود منتقل کنید.
امیدوارم این آموزش به کار شما بیاید (البته برای آموزش وقت زیادی نگذاشتم شاید بعدا آموزش را کاملتر کنم و استایل زیباتری را برای منو قرار دهم)

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

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