ساخت منوی آکاردئونی

آخرین بروز رسانی: اسفند ۱۴, ۱۳۹۶

برای خواندن کامل مطلب به سایت سر بزنید . آنجا کد ها و تصوایر کاملا خوانا ترند !
https://www.webyar.net/

منو آکاردئونی

 منوی آکاردئونی :

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

نحوه ی ایجاد منوی آکاردئونی :

در مرحله­ ی اول ایجاد منوی آکاردئونی باید کد های html برای ساخت آیتم های اصلی منو نوشته شود. ابتدا باید یک فهرست توسط ul ایجاد کرد و آیتم های  اصلی منو  را داخل آن قرار داد. این آیتم ها باید در تگ li و داخل یک تگ a قرار گیرند. برای هر تگ li باید یک id متفاوت در نظر گرفت و همچنین قسمت href تگ a داخل li نیز باید آدرس آن با نام id تگ li یکسان باشد. با استفاده از این شناسه شما قادر خواهید بود هنگامی که بر روی یک آیتم منوی آکاردئونی کلیک می کنید زیر منوی آن را باز کنید. برای این کار باید از خصوصیت target استفاده کنیم. این خصوصیت زمانی استفاده می شود که لینکی وجود داشته باشد که به یک شناسه اشاره می کند. حال هنگامی که بر روی آن لینک کلیک می کنید , می توانیدعناصر لینک مورد نظر را مشاهده کنید.

<ul> <li  id=" webyar"> <a  href="# webyar "  title="">وب یار </a></li> <li  id=" seoyar "> <a  href="# seoyar "  title=""> سئو یار</a></li> <li  id=" forushgahsaz "> <a  href="# forushgahsaz " title="">فروشگاه ساز </a></li> <li  id=" hostyar "> <a  href="# hostyar " title=""> هاست یار</a></li> </ul>

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

<ul> <li  id=" webyar "> <a  href="# webyar "  title=""> وب یار </a> <ul> <li > <a  href="#"  title=""> طراحی سایت اصفهان</a></li> <li > <a  href="#"   title="">  طراحی سایت </a></li> <li> <a   href="#"  title="">سئو سایت</a></li> <li> <a   href="#"  title="" > سئو سایت اصفهان  </a></li> <li> <a   href="#"  title="" > طراحی فروشگاه اینترنتی </a></li> <li> <a   href="#"   title=""> طراحی فروشگاه اینترنتی اصفهان </a></li> </ul>	 </li> </ul>

به همین ترتیب می توانید به سایر آیتم های اصلی منوی آکاردئونی نیز زیر منو اضافه کنید.

<div class="box_category"> <ul> <li  id=" webyar "> <a  href="#webyar"  title="">وب یار</a> <ul> <li > <a   href="#"  title=""> طراحی سایت اصفهان</a></li> <li > <a   href="#"  title="" > طراحی سایت </a></li> <li> <a    href="#"  title="" >سئو سایت</a></li> <li> <a    href="#"  title=""> سئو سایت اصفهان  </a></li> <li> <a    href="#"  title="" > طراحی فروشگاه اینترنتی </a></li> <li> <a    href="#"  title="" > طراحی فروشگاه اینترنتی اصفهان </a></li> </ul>	 </li> <li  id="seoyar"> <a  href="# seoyar "  title=""> سئو یار </a> <ul> <li> <a  href="#"  title=""> سئوسایت </a></li> <li> <a  href="#"  title=""> سئوسایت اصفهان</a></li>	 <li> <a  href="#"  title=""> بهینه سازی سایت</a></li>	 <li> <a  href="#"  title=""> سئو گوگل</a></li>	 <li> <a  href="#"  title=""> سئوسایت خارجی </a></li>	 </ul> </li> <li  id=" forushgahsaz "><a  href="# forushgahsaz "> فروشگاه ساز </a> <ul> <li><a href="#" title=""> فروشگاه اینترنتی</a></li> <li><a  href="#"  title=""> سایت فروشگاهی </a></li>	 <li><a  href="#"  title=""> طراحی فروشگاه اینترنتی</a></li>	 <li><a  href=""  title=""> طراحی فروشگاه اینترنتی اصفهان </a></li>			 </ul> </li> <li id=" hostyar "> <a href="# hostyar  " title=""> هاست یار</a> <ul> <li> <a  href="#"  title=""> هاست سایت </a></li> <li> <a  href="#"  title=""> انواع هاست </a></li>	 <li> <a  href="#"  title=""> سرور – پهنای باند</a></li>			 </ul> </li>	 </ul> </div>

بعد از اتمام نوشتن کد های html  منو نوبت به استایل دهی و تعریف کلاس های css می شود . تا این مرحله منو ها و زیر منو ها طراحی شده اند اما امکان باز شدن منوی آکاردئونی وجود ندارد زیرا نیاز به یک قطعه کد css داریم. به قطعه کد زیر توجه کنید.

قطعه کد اول زیر منو ها را مخفی می کند و قطعه کد دوم باعث می شود هنگامی که بر روی یک منو کلیک می کنید زیر منوی آن باز شود.

box_category  ul  li  ul{.  display:none;            }  ul  li:target  ul{ dispalay:block; }  ul  li  a{  display: block; }

کد های css زیر برای نمایش یک منوی آکاردئونی ساده می باشد. این کد ها صرفا برای نمونه می باشد و شما می توانید براساس نیاز خود این کدها را تغییر دهید.

.box_category{ width: 245px;      background-color: #ffc107; float:right; }  .box_category  ul  li  ul   li:hover{ width: 245px; background-color:#8bc34a; }  .box_category  ul  li:hover{ background-color:#e6f16e; width: 245px; }  .box_category  ul  li  ul  li{ background:#fff; width: 245px; overflow: hidden; border: none; }  box_category  ul  li{ .   color: #fff; cursor: pointer; text-align: right; background-color:#ecf2ab ; border-bottom: 1px solid #bdcea9;	 }  box_category  ul  li  ul  li  a{ . font: 14px 'Yekan; text-align: right; margin: 0px 0px 0px 10px; border: none; color:#000; }  .box_category ul li a{ font: 14px 'Yekan'; font-weight: bold; display: block; }  .box_category  ul  li  ul{  display:none; }  .box_category ul li ul li a:hover{ margin-right: 5px; }  .box_category  ul  li:target  ul{ display: block position: relative; }  .box_category  ul  li::before{ content:"\f0de"; font-size:20px; color: #bdbdbd; font-family: 'FontAwesome' vertical-align: middle; float: right; margin: 8px 7px 0px 10px;    }  .box_category  ul  li  ul  li::before{ font-family: 'FontAwesome'; content:"\f0d7"; display: inline-block; vertical-align: middle; margin: 8px 7px 0px 10px; }

 

منو آکاردئونی

از توجه شما بسیار سپاسگذاریم. برای دریافت آموزش های بیشتر می توانید با تیم طراحی سایت وب یار همراه باشید.

نوشته ساخت منوی آکاردئونی اولین بار در طراحی سایت اصفهان | سئو سایت اصفهان پدیدار شد.

طراحی سایت اصفهان | سئو سایت اصفهان

پربازدیدترین اخبار
طراحی سایت اصفهان

طراحی سایت اصفهان |طراحی سایت حرفه ای | سئو تضمینی سایت طراحی سایت اصفهان تیم طراحی سایت و سئو سایت وب یار به آدرس http://www.webyar.net ، بامجوز رسمی از نظام کامپیوتر کشور و دارای نماد اعتماد و نماد ساماندهی و با ۱۶ سال دانش تخصصی در زمینه طراحی وب سایت ,سئوسایت در گوگل و امنیت […]

عکس بستنی قیفی بستنی قیفی یک بستنی محبوب همه و به ویژه محبوب بچه هاست. نان های قیقی با شکل های مختلف به این منظور تولید می شوند و هر نوع بستنی از میوه ای و شکلاتی گرفته تا خامه ای را به صورت قیفی و به اشکال زیبا عرضه می کنند. در اینجا عکسهای […]

طراحی سایت

طراحی سایت در اصفهان   طراحی سایت و سئو سایت در اصفهان   تیم طراحی سایت و سئو سایت وب یار به آدرس ، بامجوز رسمی از نظام کامپیوتر کشور و دارای نماد اعتماد و نماد ساماندهی و با ۱۶ سال دانش تخصصی در زمینه طراحی وب سایت , سئو سایت در گوگل ، ارسال […]

رام رسمی اندروید ۶٫۰٫۱ ملقب به مارشمالو بلاخره برای سامسونگ گلکسی S5 منتشر شد. در این پست تمامی رام های اندروید ۶ سری SM-G900 را به تفکیک مدل با آموزش اختصاصی نصب متنی و ویدیویی قرار میدهیم. همانطور که میدانید حتی اندروید ۵٫۱٫۱ برای گلکسی اس۵ منتشر نشد و این دیوایس با نسخه مشکل دار […]

RightNote  نرم افزاری برای نگهداری و دسته بندی یادداشت های شماست . شما می توانید نوشته های کوتاه یا بلند خود را ذخیره کرده و به دو صورت از طریق منو بالای نرم افزار و یا منوی درختی پیدا کنید. در این نرم افزار ویژگی های زیادی مانند جستجوی کلمه و یا جمله وجود داشته […]

دانلود آهنگ جدید احمد صفایی به نام حیف شد دانلود موزیک جدید احمد صفایی به نام حیف شد دانلود آهنگ حیف شد از احمد صفایی دانلود آهنگ با کیفیت ۳۲۰ پخش آنلاین آهنگ http://dl.musicahang.ir/images/03597867752248133576.mp3 ترانه و آهنگ : احمد صفایی ، تنظیم : امیر حیدری متن آهنگ جدید احمد صفایی بنام حیف شد از نگاه […]