Login to your account

Username *
Password *
Remember Me

Create an account

Fields marked with an asterisk (*) are required.
Name *
Username *
Password *
Verify password *
Email *
Verify email *
Captcha *
Reload Captcha

آموزش ساخت منوی عمودی باز شو با CSS مطلب ویژه

By فروردين 04, 1392 22167 0

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

head

امروز آموزش طراحی یک منو با CSS و Html را به طور کاملا تصویری و مرحله مرحله آموزش میدهم. کاربران فعال بخش آموزش درخواست بیشتر کردم مطالب آموزشی طراحی سایت و طراحی قالب در فتوشاپ را کرده بودند که امیدوارم بتوانم مطالب این بخش را در هفته های آینده کمی کامل تر نسبت به قبل کنم.

بسیار خوب همانطور که میدانید برای کد نویسی Css و Html نیاز به برنامه خاصی نیست ولی من برای راحتی کارم از نرم افزار Dream weaver استفاده میکنم . برای شروع برنامه نوت پد ویندوز یا نرم افزار نامبرده شده را اجرا کنید .

برای طراحی قالب همیشه من یک فولدر ایجاد میکنم و فایل های خودم را که می خواهم طراحی کنم در فولدرهای مشخص قرار میدهم . برای ساخت این منو هم می توانیم یک فولدر به نام Css ایجاد کنیم و هر 2 فایل خودمان را در آن قرار دهیم یکی فایل Index.html و دیگری فایل  menu.css


1. پس اولین مرحله ساخت یک فولدر در محل دلخواه و ایجاد دو فایل با نام های مشخص شده . به تصاویر زیر دقت کنید من اینکار را انجام میدهم.
نکته : اگر از نرم افزار notepad استفاده می کنید یکبار فایل را باپسوند html. و بار دوم با پسوند css. ذخیره کنید .

css-vertical-menu1

2.در مرحله دوم باید کدهای اولیه و پایه Html را در فایل Index.html تایپ کنیم . من اینکار را انجام داده ام .

css-vertical-menu2

3. در مرحله سوم باید یک لینک از فایل Index.html به فایل menu.css بدهیم  چون تغییرات ظاهری منو در فایل menu.css اعمال می شود .(لینک به فایل css بین تگ head قرار می گیرد .)

css-vertical-menu3

4. تا به اینجا که سخت نبوده ؟ حالا بریم دیگه کدهای اصلی را وارد فایل index.html کنیم و بعدش با استفاده از فایل css تغییرات ظاهری را اعمال کنیم .

من تگ div  را بین تگ bodyدر صفحه قرار میدهم و شناسه آن را با استفاده از id = navigation مشخص میکنم .

تگ < div > : اين تگ يک قسمت و ناحيه مجزا را بر روی صفحه تعيين می کند . از اين تگ معمولا برای تقسيم بندی فضای صفحه به نواحی مجزا استفاده می شود.

ID : مشخص کننده يک شناسه منحصر به فرد برای تگ در درون سند HTML است . id هر تگ در کدنويسی CSS و زبان های اسکرپيتی کاربرد دارد . توسط id می توان به تگ مورد نظر در فایل Css دست يافت .

css-vertical-menu4

5. برای ایجاد منو از تگهای Ul و li استفاده می شود .من از این دو تگ استفاده کرده و بین id = navigation منوهای صفحه را قرار میدهم . چرا منو در بین تگ id = navigation قرار میگیرد بدلیل اینکه می خواهیم تغییرات اعمال شده روی id = navigation صورت بپذیرد .

css-vertical-menu5

فایل index.html را با یک مرورگر مشاهده کنید .(روی فایل کلیک راست کرده و از منوی open with یک مرورگر را انتخاب نمایید )

css-vertical-menu6

6. در این مرحله میخواهم اندازه فونت منو ، طول و عرض منو و فاصله از طرفین را مشخص کنم . همین طور دایره های قبل از لینکها را حذف کنم برای انجام اینکارفایل menu.css را باز کنید و کدهای زیر را داخل آن تایپ نمایید

css-vertical-menu7

نتیجه:

css-vertical-menu8

7. برای اینکه متن های تایپ شده را تبدیل به یک لینک کنیم از تگ A بین تگ li استفاده میکنیم

css-vertical-menu9

css-vertical-menu10

8. نوبت میرسه به تغییر شکل ظاهری لینکها در فایل css . کدهای زیر را در فایل css خود تایپ کنید .

css-vertical-menu11

css-vertical-menu12

9. همانطور که می بینید لینکها معلوم نیست اجازه به همین دلیل من تگ a را در فایل css فراخوانی میکنم و شکل ظاهری آن را با استفاده از دستورات css تغییر میدهم

css-vertical-menu13

css-vertical-menu14

10.در این مرحله می خواهم وقتی موس روی کادرهای طوسی رنگ که می رود رنگ کادر تغییر کنه. کد زیر را آخر فایل css اضافه کنید

css-vertical-menu15

css-vertical-menu16

11. بسیار خوب منوی اصلی ساخته شده حالا در این مرحله می خواهم وقتی موس روی لینک صفحه اصلی میره 4 زیر مجموعه از روبروی لینک نمایش داده بشه . برای انجام اینکار بین تگ li منوی صفحه اصلی یک ul با تگ li دیگه مثل مرحله اول ایجاد میکنم . فقط برای اینکه با شناسه های دیگه فرق داشته باشه یک class هم به تگ ul  نسبت میدهم چون میخواهم با فراخوانی این کلاس ظاهرو نحوه نمایشو در فایل css مشخص کنم .برای اینکه بهتر متوجه بشید به تصویر زیر دقت کنید

css-vertical-menu17

کدهای css را همانند تصویرزیر تایپ کنید .

css-vertical-menu18

css-vertical-menu19

12. من در مرحله آخر می خواهم لینک آموزش را به 3 قسمت تقسیم کنم که اون 3 قسمت نیز باز دارای زیر مجموعه باشند. برای انجام اینکار عین مرحله قبل ابتدا لینک مورد نظر خودمان که دارای زیر مجموعه هست را انتخاب کرده و تگ ul.li را با یک کلاس بین اون تایپ میکنیم ودر مرحله بعد با فراخوانی شناسه مشخص شده در css تغییرات ظاهری مورد نظر را اعمال می نماییم .

اول لینکها را اضافه میکنم

css-vertical-menu20

بعد همان کدهای مرحله قبل را کپی میکنم برای شناسه sub-level2

css-vertical-menu21

css-vertical-menu22

head

مشاهده دمو

این مورد را ارزیابی کنید
(0 رای‌ها)
آخرین ویرایش در چهارشنبه, 13 خرداد 1394 ساعت 21:08
کلیه حقوق متعلق است به فروشگاه آسارایان. طراحی و پشتیبانی: webriz

Please publish modules in offcanvas position.

تک وب دیزاین-قالب فارسی جوملا