آموزش ساختن منوی بازشو توسط CSS
|
۲۰-۱۰-۱۳۸۹, ۰۷:۲۳ عصر
(آخرین ویرایش در این ارسال: ۲۰-۱۰-۱۳۸۹ ۰۷:۳۳ عصر، توسط Reza Ganji.)
ارسال: #1
|
|||
|
|||
آموزش ساختن منوی بازشو توسط CSS
سلامو درود این آموزش از سایت آی تی توتاریال است ولی آموزش اصلی مربوط به سایت دیگری به آدرس دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید. میباشد که ترجمه شده و در سایت مذکور قرار گرفته و به خاطر اینکه ممکن است در آینده در سایت مذکور موجود نباشد من اینجا هم قرار میدهم.این آموزش برای ساخت منو بازشو توسط سی اس اس است و شاید کامل نباشه ولی خالی از لطف هم نیست و اصول کار توضیح داده شده. آموزش: امروزه منوهای بازشو در طراحی صفحات وب بسیار کاربرد دارند و می توانیم از آنها در زیبایی سایت خود و دسترسی آسان به صفحات دیگر استفاده کنیم.در ابتدا ما از کدهای html که در ایجاد منو به ما کمک می کنند و کاربرد دارند استفاده می کنیم. برای اینکار ابتدا یک تگ div ساخته و id= nav قرار می دهیم. سپس شروع به ساخت منو با استفاده از تگ ( ul ) می کنیم. همانطور که در کدهای زیر می بینید ما یک لیست نامرتب ( ul ) با کدهای استاندارد داریم که باید در قسمتNavigation قرار گیرد. حالا از موارد عمومی که در بیشتر وب سایت ها استفاده می شود مانند : خانه ، درباره ما ، نمونه کارها و تماس با ما برای نامگذاری منو استفاده می کنیم . سپس اسامی که قرار است داخل لیست بازشو قرار گیرد را منویسیم. برای مثال ما آنها را گرافیک ، طراحی ها و سایر موارد استفاده می کنیم که البته شما می توانید با توجه به میل خود و نیازتان هر نامی که دوست داشتید را انتخاب کنید. حالا به کدها نگاه می کنیم ، من کد بخش نمونه کارها را پر رنگ کردم تا بهتر دیده شود و شما دقت کنید مکان تگ بسته لیست نمونه کارها را (< /ul>) درست وارد کرده و پس از کد لیست سومین آیتم لیست بازشو قرار دهید. حالا ما یک تگ <ul> در داخل تگ <li> نمونه کارها ساخته ایم و آیتم هایی که می خواهیم جز زیرمجموعه آن باشد در آنقرار می دهیم. و با کلیک بر روی نمونه کارها این سه گزینه ای که ساخته ایم نشان داده می شود. ( مانند کدهای زیر) کد: (انتخاب همه) <div id="nav"> پس از اتمام کدهای html ، حالا نوبت css است : کدهای CSS ابتدا ما تغییراتی را در ویژگی id تگ div که آن را به اسم #nav تعریف کردیم انجام می دهیم . اول برای تعیین ویژگی کلی صفحه پهنا و ارتفاع صفحه و اندازه قلم را تعیین می کنیم . البته ممکن است با تغییر قلم همترازی پهنا و ار تفاع تغییر کند ولی مسئله ای پیش نمی آید. سپس خط بعدی کد زیر list-style :none قرار داده تا شکل های کنار لیست را پاک کنیم. کد: (انتخاب همه) *{ margin:0px; padding: 0px; } این تکه کد زیر مرحله مهم ساختن نوار منو است . اگر ما خصوصیت flot :left قرار دهیم تگ <div> ما را به حالت شناور در می آورد . و لیست ما از حالت پلکانی به صورت عمودی و کنار هم در می آید . فراموش نکنید که خصوصیت Position : relative انتخاب کرده تا لیست نمونه کار به عنوان والد معرفی شود ، زیرا منوی باز شو ما باید توسط آن حمایت و به جلو برده شود. کد: (انتخاب همه) #nav ul li { حالا نوبت دادن مقدار به لینک های لیست ما می باشد . که محل قرارگیری متن را مرکز قرار داده و برای آیتم های لیست یک حاشیه راست درست می کنیم . کد: (انتخاب همه) #nav ul li a { این دو مرحله مهمترین مراحل در این خودآموز می باشد . که به وسیله آن می توانیم به منوی بازشو با قابلیت دلخواه برسیم . بخش اول کد مربوط به دومین تگ < ul> ما می باشد که با مقداردهی خصوصیت display : none از قرار گرفتن المانی در تگ div جلوگیری می کنیم . بخش دوم کد نیز برای اینکه المان کل سطر خود را اشغال کند خصوصیت display را با block مقدار دهی می کنیم. سپس ویژگی position منوی بازشو را برای اینکه به صورت زیر هم باشد ، absolute قرار می دهیم. کد: (انتخاب همه) #nav ul li ul { در نهایت یکسری خصوصیات به منوی بازشو مانند پهنا ، رنگ پس زمینه ، محل قرار گیری متن و مقدار حاشیه به آن اضافه کرده که شما میتوانید طبق طرح خود آنها را تغییر دهید . کد: (انتخاب همه) #nav ul li:hover ul li a { کد های کامل css کد: (انتخاب همه) *{ margin:0px; padding: 0px; } دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید. دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید. دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید. |
|||
|
۱۵-۴-۱۳۹۲, ۰۲:۲۱ صبح
ارسال: #2
|
|||
|
|||
آموزش ساختن منوی بازشو توسط CSS
سلام
آموزش بسیار کامل و مفیدی است و کاملا اجرا شد فقط یک نکته در قیمت اول چند تا منو تعریف کردیم به نامهای web , print , ...خوب برای استفاده در جوملا باید از منوهای جوملا استفاده کنه برای این موضوع چکار باید بکنم ؟ |
|||
۲۷-۴-۱۳۹۸, ۰۵:۴۹ عصر
ارسال: #3
|
|||
|
|||
RE: آموزش ساختن منوی بازشو توسط CSS
اموزش واقعا مفید و درجه یکی بود بی صبرانه منتظر مطالب جدیدتون هستم
|
|||
|
کاربرانِ درحال بازدید از این موضوع: 1 مهمان