بازگشت   پی سی سیتی > کامپیوتر اینترنت و شبکه Computer internet > زبان های برنامه نویسی Programming

زبان های برنامه نویسی Programming بحث در مورد زبانهای مختلف برنامه نویسی

 
 
ابزارهای موضوع نحوه نمایش
Prev پست قبلی   پست بعدی Next
  #1  
قدیمی 05-11-2013
behnam.yousefi behnam.yousefi آنلاین نیست.
تازه وارد
 
تاریخ عضویت: May 2013
نوشته ها: 1
سپاسها: : 0
در ماه گذشته یکبار از ایشان سپاسگزاری شده
پیش فرض ایجاد منوی عمودی با استفاده از css و html

می خواهیم با اسفاده از css و html یک منوی عمودی (vertical menu) ایجاد کنیم.

برای دیدن مثال، روی لینک زیر کلیک کنید.

ایجاد منوی عمودی (vertical menu) با استفاده از css و html

ما برای شما این مثال کوچک را قرار دادیم تا درک راحتتری داشته باشد.

همان طور که می دانید منوها را چه افقی و چه عمودی با استفاده از تگ ul و li می سازند.

* تگ ul و li تگ های زبان html هستند.

حالا به کد ul و li مثال بالا توجه کنیدکد ul و li مثال بالا به صورت زیر است)

<ul class="v-menu">
<li><a href="#">صفحه اصلی</a></li>
<li><a href="#">درباره ما</a></li>
<li><a href="#">خدمات</a></li>
<li><a href="#">تماس با ما</a></li>
</ul>


به کد های html بالا دقت کنید. به تگ ul کلاس (class) داده شده است.(v-menu).

یعنی این که تگ ul که همان منوی عمودی ما است از کلاس v-menu در فایل css استفاده می کند.

و حالا کد های کلاس v-menu :

ul.v-menu{
list-style:none;
margin-bottom: 0;
margin-top: 0;
padding-right: 0;
width: 170px;
background:green;
padding:10px;
}
ul.v-menu li{padding:5px; background:#42B242; margin-bottom:5px}
ul.v-menu li:hover{padding:5px; background:#59BD59; margin-bottom:5px}
ul.v-menu a{ text-decoration:none; color:#fff; font-family:Tahoma, Geneva, sans-serif}



کد های بالا کدهای css این مثال هستند که باید در فایل Css سایتتون و یا اگر تنها یک فایل html دارید در تگ <head> قرار گیرند.

** شما می توانید با تغییر css منو های بسیار زیباتری ایجاد کنید...

انشالله در آینده آموزش ایجاد زیر منو برای همین نوع منو (vertical) قرار خواهیم داد.

منبع : http://www.sitesazi.com/support/arti...-css-html.html
پاسخ با نقل قول
کاربران زیر از behnam.yousefi به خاطر پست مفیدش تشکر کرده اند :
 


کاربران در حال دیدن موضوع: 1 نفر (0 عضو و 1 مهمان)
 
ابزارهای موضوع
نحوه نمایش

مجوز های ارسال و ویرایش
شما نمیتوانید موضوع جدیدی ارسال کنید
شما امکان ارسال پاسخ را ندارید
شما نمیتوانید فایل پیوست در پست خود ضمیمه کنید
شما نمیتوانید پست های خود را ویرایش کنید

BB code is فعال
شکلک ها فعال است
کد [IMG] فعال است
اچ تی ام ال غیر فعال می باشد



اکنون ساعت 01:21 PM برپایه ساعت جهانی (GMT - گرینویچ) +3.5 می باشد.



Powered by vBulletin® Version 3.8.4 Copyright , Jelsoft Enterprices مدیریت توسط کورش نعلینی
استفاده از مطالب پی سی سیتی بدون ذکر منبع هم پیگرد قانونی ندارد!! (این دیگه به انصاف خودتونه !!)
(اگر مطلبی از شما در سایت ما بدون ذکر نامتان استفاده شده مارا خبر کنید تا آنرا اصلاح کنیم)


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




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