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

یکشنبه 10 آذر 1392

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

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

همیشه منوها یکی از مهم‌ترین قسمت‌های یک وبسایت به شمار می‌روند. به همین جهت با صرف اندکی زمان می‌توانیم در عین سادگی منوهای زیبایی را خلق کنیم.   برای دیدن آموزش و سورس برنامه به ادامه مطلب... مراجعه نمایید

این بار هم قصد دارم در این آموزش با استفاده از CSS یک منوی افقی جالب را ایجاد کنم.ابتدا کد HTML منو را ایجاد می‌کنم. در اینجا من برای منوی مورد نظرم id را برابر با nav قرار دادم و در کدنویسی CSS استایل دلخواهم را از این طریق بر روی منو اعمال می‌کنم.

این بار هم قصد دارم در این آموزش با استفاده از CSS یک منوی افقی جالب را ایجاد کنم.ابتدا کد HTML منو را ایجاد می‌کنم. در اینجا من برای منوی مورد نظرم id را برابر با nav قرار دادم و در کدنویسی CSS استایل دلخواهم را از این طریق بر روی منو اعمال می‌کنم.


<ul id="nav"> <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> <li><a href="#">درباره وب‌دیتا</a></li> </ul>

حالا به سراغ مهم‌ترین بخش کار می‌رویم؛ یعنی ایجاد استایل دلخواه برای منوی ایجاد شده.

#nav{
direction: rtl;
}
#nav li{
display: inline;
}
#nav li a{
font-family: tahoma;
font-size: 12px;
font-weight: bold;
padding: 10px;
background-color: #333;
color: #ffffff;
border-bottom: 2px;
border-bottom-color: #9B1C26;
border-bottom-style: solid;
text-decoration: none;
}
#nav li a:hover{
background-color: #9B1C26;
padding-bottom: 12px;
border-bottom: 2px;
border-bottom-color: #000;
border-bottom-style: solid;
}

کار تمام است. حالا به توضیحات کدنویسی CSS می‌پردازم. در سطر اول تا سوم چینش صفحه را راست به چپ قرار داده‌ایم.
کد سطر پنجم تا هفتم هم منو را به صورت افقی مرتب می‌کند. سطر نهم تا بیستم حالت معمول منو را شکل می‌دهد که کاملاً به نحوه‌ی سلیقه‌ی شما برمی‌گردد و شما می‌توانید هر طور که تمایل دارید منوی خود را ایجاد کنید. سطرهای بیست و دوم تا بیست و هشتم نیز مربوط به ظاهری است که منو هنگامی است که نشانگر موس بر روی آن می‌رود، پیدا می‌کند.

نظرات() 
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
How do you treat a sore Achilles tendon?
چهارشنبه 12 مهر 1396 07:00 ق.ظ
An interesting discussion is worth comment. I believe that you ought to write
more on this topic, it might not be a taboo matter but generally folks don't speak about these issues.
To the next! Cheers!!
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
What do eccentric heel drops do?
شنبه 1 مهر 1396 07:39 ب.ظ
You really make it seem so easy along with your presentation however I to find
this topic to be actually one thing that I feel I might
by no means understand. It seems too complex and very extensive for me.
I am taking a look forward to your next post, I'll try to get the dangle of it!
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
What causes pain in the Achilles tendon?
سه شنبه 17 مرداد 1396 03:42 ق.ظ
I'm really loving the theme/design of your website.
Do you ever run into any web browser compatibility problems?
A small number of my blog audience have complained about my website not operating correctly in Explorer but looks great in Safari.
Do you have any solutions to help fix this issue?
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
Foot Complaints
جمعه 13 مرداد 1396 06:06 ب.ظ
When someone writes an piece of writing he/she maintains the
thought of a user in his/her brain that how a user can be aware of it.

Therefore that's why this paragraph is outstdanding.
Thanks!
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
http://trevanatividad.hatenablog.com
شنبه 17 تیر 1396 12:39 ب.ظ
I was suggested this web site by my cousin. I'm not sure whether this post is written by him as nobody
else know such detailed about my trouble. You are amazing!
Thanks!
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
BHW
جمعه 1 اردیبهشت 1396 04:25 ب.ظ
Please let me know if you're looking for a writer for your weblog.
You have some really great articles and I believe I would be a good asset.
If you ever want to take some of the load off, I'd love to write some content for your blog in exchange
for a link back to mine. Please blast me an e-mail if interested.

Cheers!
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
manicure
دوشنبه 21 فروردین 1396 05:19 ب.ظ
Truly when someone doesn't understand then its up to other visitors that they will help, so here
it happens.
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
BHW
پنجشنبه 10 فروردین 1396 02:31 ب.ظ
You could definitely see your skills in the work you
write. The arena hopes for even more passionate writers such as you who aren't afraid to mention how they believe.

At all times follow your heart.
 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر

موضوعات

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