تبلیغات
p5soft | دانلود نرم افزار,طراحی سایت,طراحی قالب وبلاگ
پرواز تفریحی پاراگلایدر
پرواز تفریحی پاراگلایدر پرواز تفریحی پاراگلایدر

یکشنبه 10 آذر 1392

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

نویسنده: امیر حسینی   


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

مشاهده دمو

نظرات() 
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
What is distraction osteogenesis?
شنبه 1 مهر 1396 04:31 ب.ظ
It's an amazing post designed for all the web people; they will obtain advantage from it I am sure.
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
How do you get a growth spurt?
پنجشنبه 23 شهریور 1396 09:21 ق.ظ
It's remarkable designed for me to have a web page,
which is valuable for my knowledge. thanks admin
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
How can I increase my height after 18?
سه شنبه 17 مرداد 1396 04:13 ق.ظ
It's really a nice and useful piece of info. I'm happy that you simply shared this helpful info with us.
Please stay us informed like this. Thank you for sharing.
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
Can exercise increase your height?
یکشنبه 15 مرداد 1396 12:56 ق.ظ
I'm gone to inform my little brother, that he should also go to see this webpage
on regular basis to obtain updated from most recent news update.
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
johnnywalczyk.hatenablog.com
جمعه 13 مرداد 1396 03:52 ب.ظ
It's genuinely very difficult in this busy life to listen news on Television, thus I simply
use internet for that reason, and take the hottest news.
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
http://leliamccosh.hatenablog.com/archive/2015/09/28
جمعه 6 مرداد 1396 08:09 ب.ظ
Currently it looks like Wordpress is the preferred blogging platform available
right now. (from what I've read) Is that what you are using on your blog?
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
What is distraction osteogenesis?
چهارشنبه 4 مرداد 1396 07:52 ب.ظ
First of all I would like to say fantastic blog! I had a quick
question which I'd like to ask if you do not mind. I was curious to know how you center yourself and clear your head prior to writing.
I've had difficulty clearing my thoughts in getting my ideas out.
I do enjoy writing however it just seems like the first
10 to 15 minutes are usually lost simply just trying to figure out how to begin. Any recommendations or hints?
Appreciate it!
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
manicure
سه شنبه 22 فروردین 1396 02:23 ق.ظ
Hello! I could have sworn I've visited your blog
before but after looking at some of the articles I realized it's new to
me. Nonetheless, I'm definitely delighted I stumbled
upon it and I'll be bookmarking it and checking back regularly!
 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر

موضوعات

قالب فلش فوق العاده زیبا و حرفه ای
سئو چیست؟
وبلاگ های تازه طراحی و مطلب گذاری شده
به اشتراک گذاشتن اینترنت PC با موبایل از طریق usb
اتصال مستقیم تبلت به اینترنت adsl
دفترچه راهنمای فارسی گوشی هوشمند سامسونگ
راهنمای کامل فعال سازی اینترنت ایرانسل (GPRS و EDGE)، بسته های افزایشی و تعرفه‌های مربوطه
ساخت کاربر VIP برای سایت های وردپرسی
/طرح-لایه-باز-اسلایدر-سری-اول.
دریافت کد « ما را حمایت کنید 2 »
دانلود قالب گالری عکس
اسلاید شوی حرفه ای
کد اسلاید شو برای وبلاگ
قالب های حرفه ای وبلاگ همراه با اسلایدشو
ابزار نمایش اسلایدر تصاویر
ابزار اسلایدر عکس برای نمایش چندین تصویر در وبلاگ
قالب همراه با اسلاید شو
کد عضویت کاربر
دانلود اسکریپت مدیریت کاربران AuthManager نسخه ۳
عوامل موثر در افزایش رنکینگ سایت در گوگل
نمایش توضیحات برای یک فیلد در کنار آن به صورت Tooltip نمایش کد
اسلایدشو با قابلیت پیش نمایش فریم ها- کد جاوا
فیلم فارسی آموزش جاوا اسکریپت (JavaScript) – بخش اول
آموزش ساخت تاریخ و روز با جاوا
کد جاوا اسکریپت تغیر رنگ پس زمینه با کلیک بر روی یک دکمه/لینک
آموزش انتقال بازدید کننده از دامنه قدیمی به دامنه جدید سایت یا وبلاگ
پیش فرض چگونه جاوا اسکریپت را بر روی مرورگر فعال کنیم؟ (+آموزش تصویری)
دانلود کتاب آموزش جاوا اسکریپت صورت کامل
اسکریپت پرداخت آنلاین بانک پارسـیان
اسکریپت سئو سایت در موتور های جستجوگر seo paneL
مراقب لیست سیاه متور های جستجوگر باشید!!
افزونه رمز گذاری روی لینک های دانلود مخصوص vip کردن سایت+آموزش استفاده
25 افزونه کاربردی برای مرورگر کروم
25 افزونه کاربردی برای مرورگر کروم- part2
بازاریابی شبکه های اجتماعی
کلمات کلیدی مطلب : آموزش - تنظیمات - فیس بوک - امنیت فیس بوک - facebook -
آموزش کامل تنظیمات فیس‌بوک(قسمت اول)
5 اشتباه در رایج در شبکه های اجتماعی
ابزارهای بازاریابی شبکه های اجتماعی - نبض وب سایت تان را در دست بگیرید
5 راه برای فروش توسط شبکه های اجتماعی
سوالات و مشکلات سری d سامسونگ
آموزش تصویری / کامل Css3 - مقدماتی تا پیشرفته
ستون های چندگانه در Css3
آموزش تصویری / کامل Css3 - مقدماتی تا پیشرفته
مرجع کامل دستورات CSS2
آموزش ساختن منوی بازشو توسط CSS
آموزش ساخت منوی عمودی ساده با CSS
آموزش ساخت منوی افقی ساده با CSS
آموزش هک کردن فیس بوک
آموزش هک و جلوگیری از هک شدن مودم ADSL

آمار وبلاگ

  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :
  • P5design & PARAPINK5 Sales, I.R.I., Inc. All information applies to I.R. vehicles only
    tell number : 09365995390 | 09122061238 | 09022061238
    www.p5bisim.com