زمان کنونی: ۲۹-۵-۱۳۹۸, ۰۱:۳۵ صبح درود مهمان گرامی! (ورودثبت نام)


ارسال پاسخ 
 
امتیاز موضوع:
  • 1 رأی - میانگین امتیازات: 5
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش ساختن منوی بازشو توسط CSS
۲۰-۱۰-۱۳۸۹, ۰۷:۲۳ عصر (آخرین ویرایش در این ارسال: ۲۰-۱۰-۱۳۸۹ ۰۷:۳۳ عصر، توسط Reza Ganji.)
ارسال: #1
Wink آموزش ساختن منوی بازشو توسط CSS
[تصویر:  1294645698_1_2ccc2421d5.jpg]

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

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

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

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

<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Portfolio</a>
<ul>
<li><a href="#">Web</a></li>
<li><a href="#">Print</a></li>
<li><a href="#">Photos</a></li>
</ul>
</li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>

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

کدهای CSS

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

*{ margin:0px; padding: 0px; }
#nav {
font-family: arial, sans-serif;
position: relative;
width: 390px;
height:56px;
font-size:14px;
color:#999;
margin: 0 auto;
}
#nav ul {
list-style-type: none;
}

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

#nav ul li {
float: left
position: relative;
}

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

#nav ul li a {
text-align: center;
border-right:1px solid #e9e9e9;
padding:20px;
display:block;
text-decoration:non;
color:#999;
}

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

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

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

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

#nav ul li ul {
display: none
}
#nav ul li:hover ul {
display: block;
position: absolute;
}

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

#nav ul li:hover ul li a {
display:block;
background:#12aeef;
color:#ffffff;
width: 110px;
text-align: center;
border-bottom: 1px solid #f2f2f2;
border-right: none;
}
#nav ul li:hover ul li a:hover {
background:#6dc7ec;
color:#fff;
}

کد های کامل css

*{ margin:0px; padding: 0px; }
#nav {
font-family: arial, sans-serif;
position: relative;
width: 390px;
height:56px;
font-size:14px;
color:#999;
margin: 0 auto;
}
#nav ul {
list-style-type: none;
}
#nav ul li {
float: left;
position: relative;
}
#nav ul li a {
text-align: center;
border-right:1px solid #e9e9e9;
padding:20px;
display:block;
text-decoration:none;
color:#999;
}
#nav ul li ul {
display: none
}
#nav ul li:hover ul {
display: block;
position: absolute;
}
#nav ul li:hover ul li a {
display:block;
background:#12aeef;
color:#ffffff;
width: 110px;
text-align: center;
border-bottom: 1px solid #f2f2f2;
border-right: none;
}
#nav ul li:hover ul li a:hover {
background:#6dc7ec;
color:#fff;
}

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.


دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.


دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
امضاء Reza Ganji
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
نصب جوملا نسخه دلخواه بصورت رایگان و پشتیبانی عالی

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

آر اس فرم حرفه ای | تب ساز نونامبر | کامپوننت لودر | ثبت نام درگروه کاربری دلخواه

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

!!!شماره همراه جهت پشتیبانی از خدمات و مشاوره خرید و سفارش می باشد لطفا مشکلات رو در انجمن مطرح کنید!!!
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
 سپاس شده توسط مهدی بختیاری ، شاهین سمیع عادل ، سید منصور فیروزه ، mking ، mshnejad1 ، sabah ، artoor1 ، hirbod ، mortaza_max ، mal2moh ، banirazavi
۱۵-۴-۱۳۹۲, ۰۲:۲۱ صبح
ارسال: #2
آموزش ساختن منوی بازشو توسط CSS
سلام
آموزش بسیار کامل و مفیدی است و کاملا اجرا شد
فقط یک نکته
در قیمت اول چند تا منو تعریف کردیم به نامهای web , print , ...خوب برای استفاده در جوملا باید از منوهای جوملا استفاده کنه
برای این موضوع چکار باید بکنم ؟
یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
۲۷-۴-۱۳۹۸, ۰۵:۴۹ عصر
ارسال: #3
RE: آموزش ساختن منوی بازشو توسط CSS
اموزش واقعا مفید و درجه یکی بود بی صبرانه منتظر مطالب جدیدتون هستم
امضاء banirazavi
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
| دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
| دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
ارسال پاسخ 


پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان