پارس جوم :: انجمن های تخصصی جوملا

نسخه‌ی کامل: آموزش ساختن منوی بازشو توسط 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;
}

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


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


دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
سلام
آموزش بسیار کامل و مفیدی است و کاملا اجرا شد
فقط یک نکته
در قیمت اول چند تا منو تعریف کردیم به نامهای web , print , ...خوب برای استفاده در جوملا باید از منوهای جوملا استفاده کنه
برای این موضوع چکار باید بکنم ؟
اموزش واقعا مفید و درجه یکی بود بی صبرانه منتظر مطالب جدیدتون هستم
لینک مرجع