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

یکشنبه 10 آذر 1392

آموزش ساختن منوی بازشو توسط CSS

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

سلام ، امروز میخواهیم طریقه ایجاد یک منوی یازشو را با هم یاد بگیریم. می دانیم که امروزه منوهای بازشو در طراحی صفحات وب بسیار کاربرد دارند و می توانیم از آنها در زیبایی سایت خود و دسترسی آسان به صفحات دیگر استفاده کنیم.در ابتدا ما از کدهای html که در ایجاد منو به ما کمک می کنند و کاربرد دارند استفاده می کنیم.
برای اینکار ابتدا یک تگ div ساخته و id= nav قرار می دهیم. سپس شروع به ساخت منو با استفاده از تگ ( ul ) می کنیم. همانطور که در کدهای زیر می بینید ما یک لیست نامرتب ( ul ) با کدهای استاندارد داریم که باید در قسمتNavigation قرار گیرد.


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

حالا به کدها نگاه می کنیم ، من کد بخش نمونه کارها را پر رنگ کردم تا بهتر دیده شود و شما دقت کنید  مکان تگ بسته لیست نمونه کارها  را (< /ul>)  درست وارد کرده و پس از کد لیست سومین آیتم لیست بازشو قرار دهید.

حالا ما یک تگ  <ul> در داخل تگ <li> نمونه کارها ساخته ایم  و آیتم هایی که می خواهیم جز زیرمجموعه آن باشد در آنقرار می دهیم. و با کلیک  بر روی نمونه کارها  این سه گزینه ای که ساخته ایم نشان داده می شود. ( مانند کدهای زیر)

01<div id="nav">
02<ul>
03<li class="first"><a href="#">Home</a></li>
04<li><a href="#">About Me</a></li>
05<li><a href="#">Portfolio</a>
06<ul>
07<li><a href="#">Web</a></li>
08<li><a href="#">Print</a></li>
09<li><a href="#">Photos</a></li>
10</ul>
11</li>
12<li><a href="#">Contact Me</a></li>
13</ul>
14</div>

پس از اتمام  کدهای html  ، حالا نوبت css  است :

کدهای CSS

ابتدا ما  تغییراتی را در ویژگی    id  تگ  div که آن را به اسم   #nav تعریف کردیم انجام می دهیم . اول برای تعیین ویژگی کلی صفحه  پهنا و ارتفاع صفحه  و اندازه قلم را تعیین می کنیم . البته ممکن است با تغییر قلم همترازی  پهنا و ار تفاع تغییر کند ولی مسئله ای پیش نمی آید.  سپس  خط بعدی کد زیر  list-style :none قرار داده تا شکل های کنار لیست را پاک کنیم.

01*{ margin:0px; padding: 0px; }
02#nav {
03font-family: arial, sans-serif;
04position: relative;
05width: 390px;
06height:56px;
07font-size:14px;
08color:#999;
09margin: 0 auto;
10}
11#nav ul {
12list-style-type: none;
13}

این تکه کد زیر مرحله  مهم ساختن نوار منو است  . اگر ما خصوصیت  flot :left   قرار دهیم تگ   <div> ما را به حالت شناور در می آورد . و لیست ما از حالت پلکانی  به صورت عمودی و کنار هم در می آید . فراموش نکنید که  خصوصیت Position : relative انتخاب کرده تا لیست نمونه کار به عنوان والد معرفی شود ، زیرا منوی باز شو ما باید توسط آن حمایت و به جلو برده شود.

1#nav ul li {
2float: left
3position: relative;
4}

حالا نوبت دادن مقدار به لینک های لیست ما می باشد . که محل قرارگیری  متن را مرکز قرار داده و برای  آیتم های لیست یک حاشیه راست درست می کنیم .

1#nav ul li a {
2text-align: center;
3border-right:1px solid #e9e9e9;
4padding:20px;
5display:block;
6text-decoration:non;
7color:#999;
8}

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

بخش اول کد مربوط به  دومین  تگ < ul>  ما  می باشد که با  مقداردهی  خصوصیت  display : none   از قرار گرفتن المانی در تگ div  جلوگیری می کنیم .

بخش دوم کد نیز برای  اینکه المان کل سطر خود را اشغال کند خصوصیت  display را با    block مقدار دهی می کنیم.

سپس  ویژگی  position  منوی بازشو را برای اینکه به صورت  زیر هم باشد ، absolute   قرار می دهیم.

1#nav ul li ul {
2display: none
3}
4#nav ul li:hover ul {
5display: block;
6position: absolute;
7}

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

01#nav ul li:hover ul li a {
02display:block;
03background:#12aeef;
04color:#ffffff;
05width: 110px;
06text-align: center;
07border-bottom: 1px solid #f2f2f2;
08border-right: none;
09}
10#nav ul li:hover ul li a:hover {
11background:#6dc7ec;
12color:#fff;
13}

کد های کامل css

01*{ margin:0px; padding: 0px; }
02#nav {
03font-family: arial, sans-serif;
04position: relative;
05width: 390px;
06height:56px;
07font-size:14px;
08color:#999;
09margin: 0 auto;
10}
11#nav ul {
12list-style-type: none;
13}
14#nav ul li {
15float: left;
16position: relative;
17}
18#nav ul li a {
19text-align: center;
20border-right:1px solid #e9e9e9;
21padding:20px;
22display:block;
23text-decoration:none;
24color:#999;
25}
26#nav ul li ul {
27display: none
28}
29#nav ul li:hover ul {
30display: block;
31position: absolute;
32}
33#nav ul li:hover ul li a {
34display:block;
35background:#12aeef;
36color:#ffffff;
37width: 110px;
38text-align: center;
39border-bottom: 1px solid #f2f2f2;
40border-right: none;
41}
42#nav ul li:hover ul li a:hover {
43background:#6dc7ec;
44color:#fff;
45}

پ ن : این پست توسط نویسنده میهمان سینا ی عزیز نوشته شده که با وجود سن وسال کمی که داره اما مهارت خوبی و از خودش نشان داده و امیدوارم شاهد فعالیتهای بیشتری از سینا جان در آِ تی تی باشیم.


نظرات() 
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
https://janidonoho.wordpress.com/
جمعه 13 مرداد 1396 01:54 ب.ظ
Hey there! I could have sworn I've been to this site before but after checking through some of the
post I realized it's new to me. Anyhow, I'm definitely delighted
I found it and I'll be book-marking and checking back
frequently!
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
Foot Problems
شنبه 7 مرداد 1396 08:55 ب.ظ
Unquestionably believe that which you said. Your favorite justification appeared to
be on the internet the simplest thing to be aware of.

I say to you, I definitely get annoyed while people
consider worries that they plainly don't know about. You
managed to hit the nail upon the top as well as defined out
the whole thing without having side effect , people can take a signal.
Will probably be back to get more. Thanks
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
manicure
یکشنبه 20 فروردین 1396 10:03 ب.ظ
Hi to all, as I am really keen of reading this blog's post
to be updated daily. It includes nice stuff.
 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر

موضوعات

قالب فلش فوق العاده زیبا و حرفه ای
سئو چیست؟
وبلاگ های تازه طراحی و مطلب گذاری شده
به اشتراک گذاشتن اینترنت 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