آموزش آموزش ساختن منوی بازشو توسط css

[هادی ناصح 18854]

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

برای اینکار ابتدا یک تگ div ساخته و id= nav قرار می دهیم. سپس شروع به ساخت منو با استفاده از تگ ( ul ) می کنیم. همانطور که در کدهای زیر می بینید ما یک لیست نامرتب ( ul ) با کدهای استاندارد داریم که باید در قسمتNavigation قرار گیرد.

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

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

[هادی ناصح 18854]

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

حالا ما یک تگ

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

   

   

  
  <div id="nav">
  <ul>
  <li class="first"><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>
  
  

  برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • ورود
  • یا
  • ثبت نام

   

[EOS 14528]

مطلب بسیار مفید و کاربردی بود

 

مرسی

[هادی ناصح 18854]

مطلب بسیار مفید و کاربردی بود

 

مرسی

 

 

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

البته به کمک شما دوستان عزیز نیاز دارم برای تکمیل انجمن طراحی سایت

ممنونم سپیده جان که مطالعه کردی تاپیک رو

 

موفق باشید

هادی

[هادی ناصح 18854]

این تکه کد زیر مرحله مهم ساختن نوار منو است . اگر ما خصوصیت flot :left قرار دهیم تگ

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

 

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

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

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

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

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

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

 

 

 

#nav ul li ul {
display: none
}

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

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

کد های کامل 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;
}