خانه وبلاگ کدنویسی آموزش ایجاد منوی آبشاری توسط Css3

آموزش ایجاد منوی آبشاری توسط Css3

وبلاگ - کدنویسی

سلام

امروز با یکی از آموزش های طراحی وب سایت و ابزار های بسیار کاربردی وب سایت در خدمت کاربران سایت تک وب دیزاین هستیم.

امروزه بسیاری از سایت ها برای حرفه ای تر شدن از منوهای آبشاری استفاده می کنند، و بسیاری از طراحان وب به دنبال طراحی منوی آبشاریی هستند که علاوه بر زیبایی و سبکی، با مرورگرهای مختلف سازگاری داشته باشد.

منوی آبشاریی که قصد معرفی آن را به شما داریم با استفاده از تکنولوژی جدید Css3 طراحی شده و علاوه بر زیبایی و سبکی با تمام مرورگرها نیز سازگاری کامل دارد(البته باید این را هم عرض کنم که ما دیگر مرورگر IE6 را مرورگر حساب نمی کنیم!)

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

 

 

منوی آبشاری با سی اس اس 3

دانلود فایل منوی آبشاری سی اس اس 3

http://trainbit.com/files/7776399884/CSS3_Drop_Down_Menu.zip
http://takwdir.persiangig.com/compress/CSS3_Drop_Down_Menu.zip

 

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

ابتدا شما در بین تگ زیر در قالب خود:

 

این کد را قرار می دهید:

 

این کد برای فراخوانی فایل سی اس اس به درون قالب است، توجه داشته باشید باید فایل Style.css موجود در درون فایل دانلودی منوی آبشاری را در پوشه اصلی قالب کپی کنید.

در ادامه کدهای زیر:

 
<ul id="nav">

<li><a href="#">صفحه اصلی</a></li>

<li><a href="#">خدمات سایت</a>
 
<ul>

<li><a href="#">طراحی وب</a></li>

<li><a href="#">پیاده سازی وب سایت</a></li>

<li><a href="#">طراحی قالب جوملا</a></li>

<li><a href="#">یهینه سازی وب سایت</a></li>

<li><a href="#">فارسی سازی قالب</a></li>
 
</ul>
</li>

<li><a href="#">بخش های سایت</a>
 
<ul>

<li><a href="#">دانلود قالب رایگان</a></li>

<li><a href="#">دانلود قالب های تجاری</a></li>

<li><a href="#">قالب های تک وب دیزاین</a></li>

<li><a href="#">آموزش</a></li>
 
</ul>
</li>

<li><a href="#">سفارش طراحی</a></li>

<li><a href="#">تماس با ما</a></li>
 
</ul>
 

را در قسمتی که میخوایید منوی آبشاری خود را ایجاد کنید کپی کنید.

کار ایجاد منوی آبشاری تمام است

سایت خود را دوباره رفرش کنید و نتیجه کار را مشاهده کنید.

 

نظرات 

 
+3 #1 مهدی مانیان 1390-09-08 21:04
با سلام.

چگونه می توان این منو را روی قالب های جوملا پیاده سازی کرد؟

من در قالب سایتم(قالب محرم 90) یک فایل nav.css ساخته ام و کد های فایل style.css را در این فایل قرار داده ام.

بعد این فایل css را در فایل template.css ایمپورت کرده ام.

بعد یک موقعیت سایختم تا از این کدهای css استفاده کند.
این کد را در فایل index.php قالب به جای کد منوی قبلی نوشتم







من این کد را در خط 37 نوشتم.
و همچنین موقعیت nav را در templateDetails .xml اضافه کرده ام.
nav

ولی منو نمایش داده نمی شود.

مشکل از چیست؟

با تشکر.
 
 
+6 #2 مـرادی 1390-09-08 21:46
سلام

سایت شما بررسی شد

شما در فیلد "شناسه تگ منو" ماژول مورد نظر
nav قرار بدید.
 
 
0 #3 مهدی مانیان 1390-09-09 15:58
سلام.

خیلی ممنون از اطلاعات خوبتون.

فقط یک مشکل بزرگ هست.

به سایت من بروید. www.matlabha.ir

منو را ببینید کجا و چگونه نمایش داده می شود.

مشکل از چیست؟

من برای ایجاد این موقعیت کد زیرا وارد کردم.









من برای حل این مشکل کار هایی کردم ولی به نتیجه نرسیدم.

همچنین چون می دانم direction:rtl بیشتر وقت ها مشکل ایجاد می کند ، آن را از تگ body حذف کردم.

چگونه این مشکل را حل کنم؟

با تشکر.
 
 
+2 #4 مـرادی 1390-09-09 23:29
سلام

جناب مانیان ربطی به دایرکشن نداره!

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

شما طبق آموزش منوی دستی رو ایجاد کنید و بررسی کنید ببینید نشون داده میشه؟
 
 
0 #5 مرتضی 1390-09-11 16:35
سلام خسته نباشین ممنون از مطلب خوبتون من ان منورو استفاده کردم اما یه مشکل دارم منو که باز میشه میره زیر عکس پایین منو تو سایتم میتونید ببینید اگه ممیکنه کمک کنین که چه تغییری بدم تا این مشکلش رفع بشه ممنون
 
 
+2 #6 مـرادی 1390-09-11 16:42
سلام

شما باید z-index مربوط به منو رو بالاتر از عکستون قرار بدید.
برای اینکار شما در خط 92 فایل سی اس اس منوی آبشاری
این کد رو جایگزین کد موجود کنید:
#nav ul {
background: url("images/gradient.png") repeat-x scroll 0 0 #DDDDDD;
border: 1px solid #B4B4B4;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
display: none;
margin: 0;
padding: 0;
position: absolute;
right: 0;
top: 30px;
width: 185px;
z-index: 9999;
}


در پناه حق...
 

به علت ارسال اسپم های فراوان، قسمت نظرات سایت در حال حاضر غیرفعال می باشد.
به این دلیل از شما کاربران گرامی عذرخواهی می کنیم.

ایمن شده بوسیله وب سایت تک وب دیزاین تک وب دیزاین